title: Rails upvote/downvote using Ajax and acts_as_votable
body: <p>Still fairly new to Rails. I used the acts_as_votable gem to create upvote and upvote buttons to allow users to upvote/downvote jokes, but I can't make them change from upvote / downvote (and vice versa) and update the counter each time they click without refreshing the page. I tried following other kind-of-similar answers without luck. Here's what I tried to implement.</p>
  
  <p>Joke Model </p>
  
  <pre><code>acts_as_votable 
  </code></pre>
  
  <p>User Model</p>
  
  <pre><code>acts_as voter
  </code></pre>
  
  <p>Routes.rb is</p>
  
  <pre><code>resources :jokes do
  member do
    get "like" =&gt; "jokes#upvote"
    get "unlike" =&gt; "jokes#downvote"
  end
  end
  </code></pre>
  
  <p>Jokes Controller is</p>
  
  <pre><code>#upvote from user
  def upvote
      @joke = Joke.find(params[:id])
      @joke.upvote_from current_user
      respond_to do |format|
          format.html { redirect_to :back }
          format.js { render :layout =&gt; false }
      end
  end
  
  #downvote from user
  def downvote
      @joke = Joke.find(params[:id])
      @joke.downvote_from current_user
      respond_to do |format|
          format.html { redirect_to :back }
          format.js { render :layout =&gt; false }
      end
  end
  </code></pre>
  
  <p>My view:</p>
  
  <pre><code>&lt;div class="votes"&gt;
  &lt;%= link_to like_joke_path(@joke), method: :get, remote: true, class:     'like_joke' do %&gt;
      &lt;button type="button" class="btn btn-info" aria-label="Left Align"&gt;
          &lt;i class="fa fa-arrow-up"&gt;&lt;/i&gt;
          &lt;span class="badge vote_count"&gt;&lt;%= @joke.get_upvotes.size %&gt;&lt;/span&gt;
      &lt;/button&gt;
  &lt;% end %&gt;
  
  &lt;%= link_to unlike_joke_path(@joke), method: :get, remote: true, class: 'unlike_joke' do %&gt;
      &lt;button type="button" class="btn btn-info" aria-label="Left Align"&gt;
          &lt;i class="fa fa-arrow-down"&gt;&lt;/i&gt;
          &lt;span class="badge voute_count"&gt;&lt;%= @joke.get_downvotes.size %&gt;&lt;/span&gt;
      &lt;/button&gt;
  &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>like.js.erb:</p>
  
  <pre><code>$('.like_joke').bind('ajax:success', function(){
     $(this).parent().parent().find('.vote_count').html('&lt;%= escape_javascript     @joke.votes_for.size.to_s %&gt;');
     $(this).closest('.like_joke').hide();
     $(this).closest('.votes').html(' &lt;%= link_to "Unlike",  unlike_joke_path(@joke), remote: true, method: :get, class: 'unlike_joke' %&gt;');
  });
  </code></pre>
  
  <p>and finally unlike.js.erb:</p>
  
  <pre><code>$('.unlike_joke').bind('ajax:success', function(){
     $(this).parent().parent().find('.vote_count').html('&lt;%= escape_javascript @joke.votes_for.size.to_s %&gt;');
     $(this).closest('.unlike_joke').hide();
     $(this).closest('.votes').html(' &lt;%= link_to "Like", like_joke_path(@joke), remote: true, method: :get, class: 'like_joke' %&gt;');
  });
  </code></pre>
  
  <p>Here's the rendered HTML:</p>
  
  <pre><code>&lt;div class="votes"&gt;
  &lt;a class="like_joke" data-remote="true" data-method="get" href="/jokes/11-cat-joke-title/like"&gt;
      &lt;button type="button" class="btn btn-info" aria-label="Left Align"&gt;
          &lt;i class="fa fa-arrow-up"&gt;&lt;/i&gt;
          &lt;span class="badge vote_count"&gt;0&lt;/span&gt;
      &lt;/button&gt;
  &lt;/a&gt;
  &lt;a class="unlike_joke" data-remote="true" data-method="get" href="/jokes/11-cat-joke-title/unlike"&gt;
      &lt;button type="button" class="btn btn-info" aria-label="Left Align"&gt;
          &lt;i class="fa fa-arrow-down"&gt;&lt;/i&gt;
          &lt;span class="badge voute_count"&gt;1&lt;/span&gt;
       &lt;/button&gt;
  &lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When I look at the js console, I get an internal server error at jquery.js?body=1:9665 which is xhr.send( ( options.hasContent &amp;&amp; options.data ) || null );</p>
  
  <p>It seems like I'm close, but I think I've messed up something in my views and js. Can someone show me what I'm missing?</p>