title: Bind ajax request to link_to
body: <p>I want to update the number of likes on my "ideas" page when someone hit the like button using ajax</p>
  
  <p>The button is displayed as follows in the ideas#show view ( the path currently directs to likes#create without ajax)</p>
  
  <pre><code>  - unless signed_in? and current_user.likes? @idea
      = link_to "Like this idea!", idea_likes_path(@idea), :class =&gt; "btn btn-large btn-block btn-success", method: :post, id: 'like_button'
    - else
      = link_to "Unlike this idea", idea_like_path(@idea, current_user.idea_like(@idea)), :class =&gt; "btn btn-large btn-block btn-inverse", method: :delete
  </code></pre>
  
  <p>My application.js has the follow:</p>
  
  <pre><code>jQuery.fn.ajaxFormSubmit = function() {
    this.submit(function() {
      $.post(this.action, $(this).serialize(), null, "script");
      return false;
    })
    return this;
  };
  
  $(document).ready(function() {
    $("#like_button").ajaxFormSubmit();
  })
  </code></pre>
  
  <p>the LikesController#create method:</p>
  
  <pre><code>  def create
      like = Like.new
      @idea.likes &lt;&lt; like
      current_user.likes &lt;&lt; like
  
      respond_to do |format|
        format.html { redirect_to @idea }
        format.js
      end
    end
  </code></pre>
  
  <p>and finally the create.js.erb:</p>
  
  <pre><code>$("#like_count").html("&lt;%= pluralize(@ideas.likes.count, 'Like') %&gt;");
  </code></pre>
  
  <p>With the above code, the button still refreshes the whole page. How do I make AJAX work?</p>