Ajax request with will paginate

Ajax_Will_Paginate

1. Create javascript file in folder with data you want to render. For example, I want a list of service providers so I ahve to go into views>service_providers and I will put my javascript index file in there:
I will be rendering out of the index page so I am going to label my file 
index.js.erb


2. In my views>service_providers>>index.html.erb I have a partial with the list of service providers. I wrapped that content in a div with an id called "service-providers-list".  This will allow me to pull that information into jquery

  <section class="main col col-lg-7">

      <div id="service-providers-list">

        <%= render 'service_providers_list' %>

      </div>
  </section> <!-- main col col-lg-6 -->




3. In the index.js.erb file I put:
$("#service-providers-list").html("<%= escape_javascript(render("service_providers_list")) %>");


Meaning:
// $("#[id on the page of the div/section that you will be pulling from]").html("<%= escape_javascript(render("[name of partial that you created and want to render")) %>");




4. In your vendors>>javascript>>myscript.js file you will put the javacript code to create the ajax request
$(function() {
...

 $(".pagination a").live("click", function() {
    $(".pagination").html("Looking for Service Providers ..."); //will show users the page is loading
    $.get(this.href, null, null, "script") // will get the required script for the page
    return false; 
  }); //you need to put live because it will continually do the click event when the DOM is loading. If you just put in click as the method it will do it once and not again. 
  
  });//jQuery is loaded
  
  
  5. Run your program and you should see that everytime you click it will go to the next showing of service providers without rendering a new page.