jQuery doesn't run in Rails views

Question

I am trying to run a simple jQuery code on my rails app which will simply change the HTML inside my views (just to test if jquery is really working before doing anything serious).

Inside my views/contacts folder I created index.js.erb file and tried to pull up the id contacts from my content and the paginator id from my pagination views. Here's the content of the index.js.erb file (or even changing it to index.js doesn't work):

$('#contacts').html('<p>hello contacts</p>');
$('#paginator').html('<p>hello paginator</p>')

This code will simply get the contacts and paginator id and supposed to change the HTML to the paragraph tags.

Here's where I am trying to pull up the contacts id above (which is inside views/contacts/index.html.erb:

<table class="table" id="contacts">
                 <%= render partial: "contact", object: @contacts, remote: true %>            
              </table>    

And here's where I am pulling up the paginator id (which is inside my views/layouts/_paginator.html.erb:

   <div class="card-footer">
                <div id="paginator" class="pagination justify-content-center">
              <%= paginate @contacts, remote: true %>
           </div>
          </div>

Please take note that paginate method you see above is coming from the kaminari gem. I place the remote:true code to be a able to make a javascript/jquery call behind the scene.

I also notice that the index.js.erb from views/contacts doesn't colorize on my editor:

Here's the code on my contacts_controller:

class ContactsController < ApplicationController

  before_action :find_params, only: [:edit, :update, :destroy]

  def index

    # catch the group id from params in session
    session[:selected_group_id] = params[:group_id]

    @contacts = Contact.by_group(params[:group_id]).search(params[:term]).order(created_at: :desc).page params[:page]

    respond_to do |format|
      format.js
      format.html
    end 
end 

def autocomplete
  @contacts = Contact.search(params[:term]).order(created_at: :desc).page(params[:page])
  render json: @contacts.map { |contact| { id: contact.id, value: contact.name } }
end

def new
  @contact = Contact.new
end 

def create
  @contact = Contact.new(contact_params)
  if @contact.save
    flash[:success] = "Contact was successfully created."
    redirect_to(previous_query_string)
  else
    render 'new' 
  end
end 

def edit
end 

def update
  if @contact.update(contact_params)
    flash[:success] = "Contact successfully updated."
    redirect_to(previous_query_string)
  else
    render 'edit'
  end
end 

def destroy
  @contact.destroy
  flash[:success] = "Contact successfuly deleted."
  redirect_to contacts_path
end 

private

def contact_params
   params.require(:contact).permit(:name, :email, :phone, :mobile, :company, :address, :city, :state, :country, :zip, :group_id, :avatar)
end 

def find_params
  @contact = Contact.find(params[:id])
end

def previous_query_string
  session[:selected_group_id] ? { group_id: session[:selected_group_id] } : {} 
end 


end

What I am expecting here is for the index.js or index.js.erb file will run and change the content of the table and paginator to the paragraph tag stated above but for some reason, it doesn't run the code or even recognize the jquery added inside views/contacts/index.js file.

Any idea how to make sure it runs or if I am missing anything?

Answer 1

Rails doesn't work this way. The index.js.erb is only rendered and returned if javascript is requested by the client. If html is requested then only the index.html.erb view will be rendered.

What I think you are trying to do is add Page Specific Javascript, that goes in your app/assets/javascripts/ folder. See here: https://brandonhilkert.com/blog/page-specific-javascript-in-rails/.

If you add the following to the app/assets/javascripts/contacts.coffee file it should get you started:

$(document).on('turbolinks:load', ->
  $('#contacts').html('<p>hello contacts</p>')
  $('#paginator').html('<p>hello paginator</p>')
)

or

$(document).ready( ->
  $('#contacts').html('<p>hello contacts</p>')
  $('#paginator').html('<p>hello paginator</p>')
)

if you are not using turbolinks.