Rails jQuery is rendering text instead of collection

Question

I created a file inside my javascript folder "load-contacts.js" in hopes of trying to load the collections as well as the pagination via jquery.

$(document).on('turbolinks:load', function() {
    $('#contacts').html("<%= j render(@contacts) %>");
    $('#paginator').html("<%= j paginate @contacts, remote: true %>");
  });

When I run this code it actually works and change the part where it intended to change. However, it is only rendering it as text as it instead of the collection and the pagination (kaminari gem).

Here's how it looks like:

Any idea what am i missing here?

UPDATES:

Here's 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]


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

Here's the part for the kaminari gem pagination:

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

And here's where I am suppose to be rendering the contacts inside the views/contacts/index.html.erb:

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

Answer 1

you can't use j render outside .erb. Because j render is method of rails, your js just know it is string

what you need are use script tag inside your html.erb, or use rails ajax. It is working as expected

reference: How to render partial on the same page after clicking on link_to with AJAX

Answer 2

have you tried escape_javascript before calling render.

something like:

<%= escape_javascript render(my_partial) %>