Question

I am implementing an up-voting system on an app I am building very similar to the one here on stackoverflow. When a user clicks upvote or downvote, an ajax request is sent to one of my controllers which them updates a couple of tables. Once that is done, I use the respond_to to routes to a js.erb file that executes jquery to update the user display. However, the jquery is not being executed. When I lick upvote/downvote, the controller code executes properly (I can see it in the rails console), but the user display is not updated. Upon refresh the user display is updated, however, not asynchronously. I know the jquery is not being executed b/c in the fire bug console I can see my jquery code – it just is not being applied. Here is my upvote controller code:

def upvote
        @post = Post.find(params[:id])

        @user_vote = current_user.votes.where(post_id: @post.id).first
        if @user_vote.blank?
            Vote.create(user_id: current_user.id, post_id: @post.id, vote: 1)
            @post.upvotes += 1
        elsif @user_vote.vote.to_i == 0
            @user_vote.vote = 1
            @post.upvotes += 1
        elsif @user_vote.vote.to_i == 1
            return redirect_to :back, :alert => 'You have already upvoted the post'
        elsif @user_vote.vote.to_i == 2
            @user_vote.vote = 1
            @post.downvotes -= 1
            @post.upvotes += 1
        end

        respond_to do |format|
            if @post.save and @user_vote.save
                format.js { }
            else 
                format.html { redirect_to :back, :alert => 'There was an error in upvoting the post' }
            end
        end

    end 

This is my upvote.js.erb file:

$('#post-action-<%= @post.id %>').html("upvote");
// this normally renders a partial (below), but I am rendering "upvote" until I can fix this
// escape_javascript(<%= render :partial => 'post_voting', :locals => { post: @post, user_vote: @user_vote } %>) 

Here is my html:

         <div class="post_actions" id='post-action-<%= "#{post.id}" %>' >

            <%= render :partial => 'post_voting', :locals => { post: post, user_vote: current_user.votes.where( post_id: post.id ).first } %>

        </div>

Here is my firebug console output: https://i.stack.imgur.com/ntXeM.png

EDIT

I noticed I am getting an error in on my server:

Started GET "/assets/bootstrap.js?body=1" for 127.0.0.1 at 2012-08-09 06:33:42 -0700
Served asset /bootstrap.js - 304 Not Modified (0ms)

Answer 1

After messing around with the jquery, I noticed some things. Firstly, I needed to minify my code (taking out all comments and unused spaces). I took this:

$('#post-action-<%= @post.id %>').html("upvote");
// this normally renders a partial (below), but I am rendering "upvote" until I can fix this
// escape_javascript(<%= render :partial => 'post_voting', :locals => { post: @post, user_vote: @user_vote } %>) 

and changed it to this:

$('#post-action-<%= @post.id %>').html("upvote");

The code was then working and the user display was updating to show “upvote.” Perfect. So then I replaced the above code with this:

$('#post-action-<%= "#{@post.id}" %>').html("<%= escape_javascript(render :partial => 'post_voting', :locals => { :post => @post, :user_vote => @user_vote }) %>");

and KAPOW! It works. So happy to have solved this! MINIFY YOUR JQUERY PEOPLE!