Rails upvote/downvote using Ajax and acts_as_votable
<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>