Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Kris Chery
Kris Chery
935 Points

How can I implement Javascript/ Jquery in rails 4.2.4 with ruby 2.2.3.

I am building an app with ruby on rails. The version of rails and ruby are as listed above.

My objective is to implement JavaScript/ Jquery into my mindmap index views so that they can dynamically add information into my page without having to reload the entire page. So their will be a link to be clicked on which will will display the mindmap form, on submission of the form, the form should disappear and the new data should be appended into the specified div views. --So far I have been able to display the mindmap form once I click on the new link but the form doesn't disappear on the submission of the form. I have been able to allow the user to enter and submit the information but the information only shows after i do a full page reload.

I have tried a number but nothing seems to help.

Someone Please help. If you live in Chicago, I owe you a beer :).

Below are the controller, js and views file.

class MusesController < ApplicationController before_action :find_muse, only: [:show, :edit, :update, :create, :destroy] before_action :find_profile, only: [:index, :show]

def index @muses = Muse.all.order('created_at DESC') end

def show end

def new @muse = Muse.new end

def create @muse = Muse.new(muse_params) @muse.author_id = current_author.id if @muse.save redirect_to @muse, notice: "You have successfully added your muses" else render "new" end end

def edit end

def update if @muse.update(muse_params) redirect_to @muse, notice: "You have successfully updated your muse" else render 'edit' end end

def destroy end

private

def find_profile @profile = Profile.find_by(params[:id]) end

def find_muse @muse = Muse.find_by(params[:id]) end

def muse_params params.require(:muse).permit(:body, :image, :author_id) end end

JavaScript files are located under the mind map views folder as FYI

new.js.erb

$("a#new_mindmap_link").hide().after("<%= j render('form')%>");

create.js.erb

$("form#new_mindmap").remove(); $("a#new_mindmap_link").show(); $("div#mindmap").append("<%= j render(@mindmaps) %>");

Mindmap index page

<%= link_to "Create Mindmap", new_mindmap_path, id:"new_mindmap_link", remote: true %> <% @mindmaps.each do |mindmap| %> <div class="mindmap">
<div>Source: <%= mindmap.src %></div> <div class="meta"> <%= link_to time_ago_in_words(mindmap.created_at) + " ago" , mindmap %> <span class="admin"><%= link_to "Edit", edit_mindmap_path(mindmap) %> <%= link_to "Delete", mindmap , method: :delete, data: { confirm: "Are you sure you want to delete this Mindmap" } %> </span> </div> </div> <% end %>

Mindmap Form

<div class="col-md-4 mindmap-container"> <%= simple_form_for @mindmap, remote: true do |f| %> <%= f.input :src, as: :url, class:'form-control', label: false, placeholder:"Add a URL" %> <%= f.input :src_purpose, as: :text, class: 'form-control', label: false, placeholder: "Add a description to your URL"%> <%= f.input :capsule_id, label: false, collection: Capsule.all, default: 'Select a capsule', label_method: :title %> <%= f.input :profile_id, label: false, collection: Profile.all, default: 'Select a Profile ID',label_method: :profile_name %> <%= f.button :submit, class:'btn btn-primary' %> <% end %> </div>