title: Using will_paginate with AJAX live search with jQuery in Rails
body: <p>I am using will_paginate to successfully page through records. I am also using AJAX live search via jQuery to update my results div. No problem so far. The issue I have is when trying to paginate through those live search results. I simply get "Page is loading..." with no div update. Am I missing something fundamental? I believe I may need to somehow bind the pagination links' click event via jQuery as well.</p>
  
  <pre><code># index.html.erb
  
    &lt;form id="searchform" accept-charset="utf-8" method="get" action="/search"&gt;
      Search: &lt;input id="search" name="search" type="text" autocomplete="off" title="Search location, company, description..." /&gt;      
     &lt;%= image_tag("spinner.gif", :id =&gt; "spinner", :style =&gt;"display: none;" ) %&gt;  
    &lt;/form&gt;
  
  # JobsController#search
  
  def search
      if params[:search].nil?
        @jobs = Job.paginate :page =&gt; params[:page], :order =&gt; "created_at desc"
      elsif params[:search] and request.xhr?
        @jobs = Job.search params[:search], params[:page]
      end
      render :partial =&gt; "jobs", :layout =&gt; false, :locals =&gt; { :jobs =&gt; @jobs }
    end
  
  # Job#search
  
  def self.search(search, page)
      logger.debug "Job.paginate #{search}, #{page}"
      paginate :per_page =&gt; @@per_page, :page =&gt; page,
               :conditions =&gt; ["description LIKE ? or title LIKE ? or company LIKE ?", 
                 "%#{search}%", "%#{search}%", "%#{search}%"], 
                 :order =&gt; 'created_at DESC'
    end
  
  # search.js
  
  $(document).ready(function(){
  
    $("#search").keyup(function() {
      $("#spinner").show(); // show the spinner
      var form = $(this).parents("form"); // grab the form wrapping the search bar.
      var url = form.attr("action"); // grab the URL from the form's action value.
      var formData = form.serialize(); // grab the data in the form
      $.get(url, formData, function(html) { // perform an AJAX get, the trailing function is what happens on successful get.
        $("#spinner").hide(); // hide the spinner
        $("#jobs").html(html); // replace the "results" div with the result of action taken
      });
    });
  
  });
  </code></pre>