Search code examples
javascriptruby-on-railsajaxcoffeescriptkaminari

Rails 5: Kaminari gem with ajax setup


I have already installed the kaminari gem and it's working fine with my rails 5 app. On a page where I have the comments I'm trying to implement the pagination via Ajax and thus without refreshing the page. The comments are located inside panel with tabs.

This is the setup I have thus far:

gem 'kaminari'

the controller action

 def show
  @item = Item.find(params[:id])
  @comments = Comment.where(item_id: @item).order(created_at: :desc).page(params[:page])

  respond_to do |format|
    format.js  { render 'show.js.erb' }
    format.html
  end
end

show.js.erb

$("#pages-comments").html("<%= escape_javascript render(@comments) %>")
$("#paginator").html("<%= escape_javascript(paginate(@comments, remote: true)) %>")

show.html.erb

<div class="tab-pane" id="comments">
     <div class="pages-comments">
        <%= render 'comments/comment' %>
      </div>

      <div id="paginator">
         <%= paginate @comments, remote: true %>
      </div>

 </div>

and even though it seems like the show.js.erb file is rendering when I click on the pagination links it doesn't redirect me to the next page. Also I'm not getting no errors inside the browser inspector.

This is what the console when using byebug shows:

  Rendering pages/show.js.erb
  Comment Load (1.8ms)  SELECT  "comments".* FROM "comments" WHERE "comments"."item_id" = 8 ORDER BY "comments"."created_at" DESC LIMIT $1 OFFSET $2  [["LIMIT", 10], ["OFFSET", 0]]
   (1.3ms)  SELECT COUNT(*) FROM (SELECT  1 FROM "comments" WHERE "comments"."item_id" = 8 ORDER BY "comments"."created_at" DESC LIMIT $1 OFFSET $2) subquery_for_count  [["LIMIT", 10], ["OFFSET", 0]]
  Shopper Load (1.2ms)  SELECT  "shoppers".* FROM "shoppers" WHERE "shoppers"."id" = $1 LIMIT $2  [["id", 2], ["LIMIT", 1]]
  CACHE Shopper Load (0.2ms)  SELECT  "shoppers".* FROM "shoppers" WHERE "shoppers"."id" = $1 LIMIT $2  [["id", 2], ["LIMIT", 1]]
  CACHE Shopper Load (0.3ms)  SELECT  "shoppers".* FROM "shoppers" WHERE "shoppers"."id" = $1 LIMIT $2  [["id", 2], ["LIMIT", 1]]
  CACHE Shopper Load (0.2ms)  SELECT  "shoppers".* FROM "shoppers" WHERE "shoppers"."id" = $1 LIMIT $2  [["id", 2], ["LIMIT", 1]]
  CACHE Shopper Load (0.4ms)  SELECT  "shoppers".* FROM "shoppers" WHERE "shoppers"."id" = $1 LIMIT $2  [["id", 2], ["LIMIT", 1]]
  CACHE Shopper Load (0.2ms)  SELECT  "shoppers".* FROM "shoppers" WHERE "shoppers"."id" = $1 LIMIT $2  [["id", 2], ["LIMIT", 1]]
  CACHE Shopper Load (0.5ms)  SELECT  "shoppers".* FROM "shoppers" WHERE "shoppers"."id" = $1 LIMIT $2  [["id", 2], ["LIMIT", 1]]
  CACHE Shopper Load (0.3ms)  SELECT  "shoppers".* FROM "shoppers" WHERE "shoppers"."id" = $1 LIMIT $2  [["id", 2], ["LIMIT", 1]]
  CACHE Shopper Load (0.3ms)  SELECT  "shoppers".* FROM "shoppers" WHERE "shoppers"."id" = $1 LIMIT $2  [["id", 2], ["LIMIT", 1]]
  CACHE Shopper Load (1.1ms)  SELECT  "shoppers".* FROM "shoppers" WHERE "shoppers"."id" = $1 LIMIT $2  [["id", 2], ["LIMIT", 1]]
  CACHE  (0.2ms)  SELECT COUNT(*) FROM (SELECT  1 FROM "comments" WHERE "comments"."item_id" = 8 ORDER BY "comments"."created_at" DESC LIMIT $1 OFFSET $2) subquery_for_count  [["LIMIT", 10], ["OFFSET", 0]]
  CACHE  (0.2ms)  SELECT COUNT(*) FROM (SELECT  1 FROM "comments" WHERE "comments"."item_id" = 8 ORDER BY "comments"."created_at" DESC LIMIT $1 OFFSET $2) subquery_for_count  [["LIMIT", 10], ["OFFSET", 0]]
  CACHE  (0.2ms)  SELECT COUNT(*) FROM (SELECT  1 FROM "comments" WHERE "comments"."item_id" = 8 ORDER BY "comments"."created_at" DESC LIMIT $1 OFFSET $2) subquery_for_count  [["LIMIT", 10], ["OFFSET", 0]]
  CACHE  (0.2ms)  SELECT COUNT(*) FROM (SELECT  1 FROM "comments" WHERE "comments"."item_id" = 8 ORDER BY "comments"."created_at" DESC LIMIT $1 OFFSET $2) subquery_for_count  [["LIMIT", 10], ["OFFSET", 0]]
  CACHE  (0.2ms)  SELECT COUNT(*) FROM (SELECT  1 FROM "comments" WHERE "comments"."item_id" = 8 ORDER BY "comments"."created_at" DESC LIMIT $1 OFFSET $2) subquery_for_count  [["LIMIT", 10], ["OFFSET", 0]]
  CACHE  (0.2ms)  SELECT COUNT(*) FROM (SELECT  1 FROM "comments" WHERE "comments"."item_id" = 8 ORDER BY "comments"."created_at" DESC LIMIT $1 OFFSET $2) subquery_for_count  [["LIMIT", 10], ["OFFSET", 0]]
  CACHE  (0.2ms)  SELECT COUNT(*) FROM (SELECT  1 FROM "comments" WHERE "comments"."item_id" = 8 ORDER BY "comments"."created_at" DESC LIMIT $1 OFFSET $2) subquery_for_count  [["LIMIT", 10], ["OFFSET", 0]]
  CACHE  (0.3ms)  SELECT COUNT(*) FROM (SELECT  1 FROM "comments" WHERE "comments"."item_id" = 8 ORDER BY "comments"."created_at" DESC LIMIT $1 OFFSET $2) subquery_for_count  [["LIMIT", 10], ["OFFSET", 0]]
  CACHE  (0.2ms)  SELECT COUNT(*) FROM (SELECT  1 FROM "comments" WHERE "comments"."item_id" = 8 ORDER BY "comments"."created_at" DESC LIMIT $1 OFFSET $2) subquery_for_count  [["LIMIT", 10], ["OFFSET", 0]]
  Rendered collection of comments/_comment.html.erb [10 times] (822.0ms)
   (1.0ms)  SELECT COUNT(*) FROM "comments" WHERE "comments"."item_id" = 8
  Rendered pages/show.js.erb (1205.3ms)

Any ideas what I might be doing wrong?

Update 1 After implemnting @Gabbar answer and when I click on the next page I get this:

Started GET "/show/8?page=2" for 127.0.0.1 at 2017-12-01 16:51:39 +0200
Processing by PagesController#show as JS
  Parameters: {"page"=>"2", "id"=>"8"}
  Item Load (0.5ms)  SELECT  "items".* FROM "items" WHERE "items"."id" = $1 LIMIT $2  [["id", 8], ["LIMIT", 1]]
Completed 500 Internal Server Error in 3ms (ActiveRecord: 0.5ms)



TypeError (no implicit conversion of Integer into String):

app/controllers/pages_controller.rb:33:in `+'
app/controllers/pages_controller.rb:33:in `show'

Solution

  • can you try this

     def show
      params[:page] ||= 1
      @item = Item.find(params[:id])
      @comments = @item.comments.order(created_at: :desc).page(params[:page])
      #if params[:page].class == String
        #params[:page].to_i = params[:page].to_i + 1
      #else
        #params[:page] = params[:page] + 1
      #end
      respond_to do |format|
        format.js  { render 'show.js.erb' }
        format.html
      end
    end
    

    in show.js.erb

    $(".pages-comments").html("<%= escape_javascript render(@comments) %>"); 
    $("#paginator").html("<%= escape_javascript(paginate(@comments, remote: true)) %>");