How to implement Ajax with will_paginate gem on Ruby on Rails

Question

I want to implement Ajax on my ruby on rails project. I currently use the will_paginate gem. Whenever I click for the next page, the whole page reloads, which I don't want to happen. How can I prevent this? I found a similar question but it didn't work for me. I guess it's because I am using Rails 5.2.2? I am not sure.

My index.html.erb looks like this:

 <div class="row justify-content-center align-items-center">
       <div class="page_info">
        <h5><%= page_entries_info @imports %></h5>
       </div>
 </div>
 <div class="row justify-content-center align-items-center">
       <div class="page_info">
        <h5><%= will_paginate @imports, :container => false %></h5>
       </div>
 </div>

Here is my code in my controller.rb:

class ImportsController < ApplicationController
  def index
     @imports = Import.all
     @imports = Import.paginate(:page => params[:page], :per_page => 5)   
  end

probably duplicate of https://stackoverflow.com/questions/13623953/how-to-implement-ajax-pagination-with-will-paginate-gem — Dev.rb, Jan 30 '19 at 02:16
@nileshkumar sadly that one didn't work for me, can you help me with this? I am using Rails 5.2.2 — C.N.N., Jan 30 '19 at 02:22
@nileshkumar I updated the question, please refer above for my controller. Also, I'm currently not using jquery as I've never tried it before. I just started learning rails. — C.N.N., Jan 30 '19 at 02:48
Not sure if it's an option, but I'd recommend you to try Kaminari, switching from will_paginate is pretty easy and it has the `remote: true` option. — arieljuod, Jan 30 '19 at 03:54
@arieljuod will also give this a shot, thanks! I'll let you know if it works. — C.N.N., Jan 30 '19 at 03:57

Noah · Answer 1 · 2019-01-30T04:08:15.293

1

To paginate with AJAX instead of a page refresh, you'll need to add a data-remote="true" to all of the paginate links.

data-remote="true" is a rails helper that will cause the server to interpret the request as JS instead of HTML.

First step, create a new helper:

module RemoteLinkPaginationHelper
  class LinkRenderer < WillPaginate::ActionView::LinkRenderer
    def link(text, target, attributes = {})
      attributes['data-remote'] = true
      super
    end
  end
end

Second, add a paginate method to the application_helper.

module ApplicationHelper
  def paginate(collection, params= {})
    will_paginate collection, params.merge(:renderer => RemoteLinkPaginationHelper::LinkRenderer)
  end
end

Then, you can replace this:

<div class="row justify-content-center align-items-center">
  <div class="page_info">
    <h5><%= will_paginate @imports, :container => false %></h5>
  </div>
</div>

with this:

<div class="row justify-content-center align-items-center">
  <div class="page_info">
    <h5><%= paginate @imports, :container => false %></h5>
  </div>
</div>

I got these steps from this GitHub Snippet: https://gist.github.com/jeroenr/3142686

edited Jan 30 '19 at 04:08

answered Jan 30 '19 at 02:55

Noah

550
2
8

Hi @Noah, I followed this but it doesn't seem to go to the next page when I click on "Next". – C.N.N. Jan 30 '19 at 03:13
Just to make things clear, in order to create a new helper (as stated in Step 1), I first need to generate a new controller named "RemoteLinkPagination" right? I'm sorry for this very basic question but I'm still new to Rails – C.N.N. Jan 30 '19 at 03:15
it doesn't seem to work on Rails 5. Do you happen to know a workaround for this one? – C.N.N. Jan 30 '19 at 03:28
Are you getting an error on Rails 5? What does not seem to work? If you look at the server logs, do any requests come in when you click the pagination buttons? – Noah Jan 30 '19 at 03:31
when I click on "Next" or on another page, it does not show any error, but it stays on the same page. The server logs show that the request comes in but it doesn't render on the page. – C.N.N. Jan 30 '19 at 03:42
I read some comments on the Github Snippet that you posted and one commenter said that it doesn't work on Rails 5. Perhaps the syntax has changed? – C.N.N. Jan 30 '19 at 03:43
also, when I use "will_paginate" in my view instead of just "paginate" it works fine, but it still refreshes the entire page. When I use "will_paginate", the logs say that 'Processing by SampleController#index as HTML'. However, when I use "paginate" in my views as you suggested, the logs say 'Processing by SampleController#index as JS'. What does this mean? – C.N.N. Jan 30 '19 at 03:50
The "Processing as JS" simply means that it is an AJAX call. Are you familiar with the Chrome/Firefox debug tools? If so, can you send me a screenshot of the response tab of the request that is sent when you click the paginate button? Also, try removing the container: false from the index.html.erb – Noah Jan 30 '19 at 04:01
I removed the container: false as you said, it remained the same. For the screenshot, how do you want me to send it to you? – C.N.N. Jan 30 '19 at 05:14
@C.N.N. Instead of the screenshot, just post the JSON response from the response tab in Chrome/Firefox. – Noah Jan 31 '19 at 03:39
This answer worked very well for me. Thank you @Noah – ozbilgic Dec 07 '20 at 11:59

How to implement Ajax with will_paginate gem on Ruby on Rails

1 Answers1