2

I have a app with search functionality. The index page displays all the items in the database. Also when I search my products it works using AJAX. How to add AJAX functionality to my pagination? I'm using Kaminari for my pagination.

          $(function() {

               $( "#name" ).autocomplete({
                    source: "shirts/autocomplete",
                    autoFocus: false,
                    minLength: 1,
                    select: function(event,ui){
                document.getElementById("name").value = ui.item.value;

                  $.ajax({
                url:"shirts/show?name="+ui.item.value,
                type:"GET",
             });    
            }
          });
          });
Raghuveer
  • 397
  • 2
  • 8
  • It depends on your controller also. If the controller's response is the whole page it will reload no matter what. Just respond back the JSON with data maybe – Felipe Skinner Jan 28 '14 at 12:44

1 Answers1

0

Simply add to your pagination link remote: true or handle it with javascript and then in your controller:

if request.xhr?
  render json: @products # ajax request
else
  render layout: true # standard layout
end

You will have to catch 'ajax:success' in your javascript and append the recieved products.

Piotr Kruczek
  • 2,384
  • 11
  • 18
  • I've added 'remote:true' in my pagination link, but it still isn't working.
    <%= paginate @first, :remote => true %>
    . Then in my .js.erb file I've added '$("#container").html("<%= escape_javascript(render "shirt/first")%>"); $("#paginator").html('<%= escape_javascript(paginate(@first, :remote => true).to_s) %>');'. But then when I click next, it says internal server error.     – Raghuveer Jan 29 '14 at 04:39
  • Check if you've passed the kaminari pagination correctly [here](http://stackoverflow.com/questions/9016943/multiple-pagination-with-kaminari-via-ajax). If the problem isn't there, paste what your server log says (what exactly is that 500). – Piotr Kruczek Jan 29 '14 at 10:30