Question

The JS is not being picked up by the data-remote of each link. I am trying to create one button that does voting and unvoting, like the old digg.com voting button. At this time because the JS is not being picked up I have two buttons each separate for voting and unvoting and I would like to combine the two. I am unsure why the JS is not being picked up. Any suggestions? Thank you.

Micropost Controller

class MicropostsController < ApplicationController 
  def vote_up
    @micropost = Micropost.find(params[:id])
    current_user.vote_exclusively_for(@micropost)
    respond_to do |format|
      format.html { redirect_to :back }
      format.js
      end
  end

   def unvote
    @micropost = Micropost.find(params[:id])
    current_user.vote_exclusively_against(@micropost)
    respond_to do |format|
      format.html { redirect_to :back }
      format.js
      end
  end
end

JS Files

*vote_up.js*

$("#<%=@micropost.id%>").html('<%="#{@micropost.votes_for}"%>');
$("#vote-<%=@micropost.id%>").html('<a href="/microposts/<%=@micropost.id%>/unvote" data-remote="true" class="CounterButton b2 <%=@micropost.id%>"></a>');

unvote.js

$("#<%=@micropost.id%>").html('<%="#{@micropost.votes_for}"%>');
$("#unvote-<%=@micropost.id%>").html('<a href="/microposts/<%=@micropost.id%>/vote_up" data-remote="true" class="CounterButton b2 <%=@micropost.id%>"><span class="CounterIcon <%=@micropost.id%>"></span></a>');

Micropost HTML

<div class='Counter'>
<span class='CounterNum'><span id='<%= micropost.id%>'><%=micropost.votes_for %></span></span>
<div id='vote-<%=micropost.id %>'>
<a href="/microposts/<%=micropost.id %>/vote_up" data-remote='true' class='CounterButton b2'>
<span class='CounterIcon'></span>
</a>
</div>
<div id='unvote-<%=micropost.id %>'>
<a href="/microposts/<%=micropost.id %>/unvote" data-remote='true'class='CounterButton b2'>
<span class='CounterIcon'></span>
</a>
</div>
</div>

Answer 1

Try combining all your calls to javascript_include_tag into a single call and also include jquery_ujs:

javascript_include_tag :jquery, :jquery_ujs, :modal, :basic_js, 'http://www.google.com/jsapi

Although since you’re on Rails 3.2, you should really be taking advantage of the asset pipeline which you can read more about here:

http://guides.rubyonrails.org/asset_pipeline.html

Your application.js would then look something like this:

//= require jquery
//= require jquery_ujs
//= require_tree .

And then you would simply do:

javascript_include_tag :application

But try the other method first.