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

Question

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 MindmapsController < ApplicationController

  before_action :find_capsule, only: [:new, :index, :create, :show, :update, :destroy]
  before_action :find_mindmap, only: [:show, :edit, :index, :update, :destroy]

  before_action :authenticate_author!

  def index
    @mindmaps = Mindmap.all.order('created_at DESC')

  end

  def new
    @mindmap = Mindmap.new
  end

  def create
    @mindmap = Mindmap.new(mindmap_params)
    if @mindmap.save
      respond_to do |format|
        format.html {redirect_to mindmaps_path , notice:"You have successfully created a Mindmap"}
        format.js
      end
    else
      render 'new'
    end
  end

  def show
  end

  def edit
  end

  def update
    if @mindmap.update(mindmap_params)
      redirect_to @mindmap , notice:" You have successfully updated Your Mindmap"
    else
      render 'edit'
    end
  end

  def destroy
    @mindmap.destroy
    redirect_to mindmaps_path
  end

  def find_mindmap
    @mindmap = Mindmap.find_by(params[:id])
  end

  def find_capsule
    @capsule = current_author.capsules.find_by(params[:id])
  end

  def mindmap_params
    params.require(:mindmap).permit(:src, :src_purpose, :capsule_id, :profile_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

Mindmaps#index

<%= 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>

you're showing a lot of code here. Can you narrow down where your problem is occurring and describe it in a little more detail? — max pleaner, Jun 19 '16 at 21:28
I am having an issue with the javascript. Here is what I am attempting to do based on a tutorial I found on youtube, here is the link. https://www.youtube.com/watch?v=FBxVN7U1Qsk, I am trying to do that exactly but on index page of this controller basically. — Kris Chery, Jun 19 '16 at 21:31
It sounds like everything works in your code except that the page needs to be reloaded to run some jQuery. This could be a Turbolinks issue. Try [removing Turbolinks](http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4) or see [this answer](http://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links) for how to avoid `$(ready` issues when using Turbolinks. — max pleaner, Jun 19 '16 at 22:03

score 0 · Answer 1 · answered Jun 19 '16 at 22:09

0

If you check your logs, I doubt if the js.erb views are called at all, because your action only knows to respond to html at the moment. I think a way to solve the issue is to add a respond_to block as such to your create action

def create
    @muse = Muse.new(muse_params)
    @muse.author_id = current_author.id
    if @muse.save
      respond_to do |format|
         format.html { redirect_to @muse, notice: "You have successfully added your muses" }
         format.json
      end
    else
      render :new
    end
  end

Let me know if that helps at all

answered Jun 19 '16 at 22:09

oreoluwa

5,553
2
20
27

Apologies, seems stack overflow is having problems with updating my files. Just updated the correct controller code. let me know what your thoughts are. – Kris Chery Jun 19 '16 at 22:17
No, the form doesnt disappear, once submission is made and the link that i originally hid doesnt appear. The new content isnt appended to the mindmap div – Kris Chery Jun 19 '16 at 22:27
Do you have this on a public Github or something? – oreoluwa Jun 19 '16 at 22:35
No I don't have that. This project is in bit bucket? – Kris Chery Jun 20 '16 at 03:36

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

Mindmaps#index

1 Answers1