AJAX page reloading

Question

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",
             });    
            }
          });
          });

Answer 1

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.