Question

I am creating an upvote/downvote functionality on an app I am building. When a user hits the upvote or downvote button, an ajax request is submitted to a controller which updates a vote count in the database and then runs a javascript file that uses jquery to update the displayed votes count and disable the button pressed. Here is the jquery to update the display:

$('#post-action-<%= "#{@post.id}" %>').html("
                <i class=\"icon-arrow-up arrow-voted\"></i>
                <p class=\"votes_difference\" ><%= (post.upvotes - post.downvotes) %></p>
            <%= link_to raw(\"<i class=\"icon-arrow-down\"></i>\"), post_downvote_path(post.id), method: :put, remote: true %>
                <p class=\"votes_sum\" ><%= (post.upvotes + post.downvotes) %> votes</p>
");

Everything works, except for updating the vote display and changing the upvote button (in other words, the above code is not being run. The database is updated, so I know the conroller is run successfully.). I also know that the problem is with the jquery above becuase it was working when I was rendering a much less html. Here is the simplier code that I previously had working:

$('#post-action-<%= "#{@post.id}" %>').html("<%= @post.upvotes - @post.downvotes %>")

I am postive that I am grabbing the correct element. The html element content I am replacing is:

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

...some embedded ruby and other html

</div>

I assuming there is some jquery syntax error, but I simply cannot find it. I am at my wits end here. Any and all input on this matter would be appreciated.

EDIT

As referenced in the comments of Trip’s answer, I was able to print foobar by changing this:

$('#post-action-<%= "#{ @post.id }" %>').html("fooooooobar!")

to this:

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

However, when I then replace foobar with the more complex code:

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

                <i class='icon-arrow-up arrow-voted'></i>
                <p class='votes_difference' >
                  <%= (@post.upvotes - @post.downvotes) %>
                </p>
            <%= link_to raw('<i class=\"icon-arrow-down\"></i>'), post_downvote_path(@post.id), method: :put, remote: true %>
                <p class='votes_sum' ><%= (@post.upvotes + @post.downvotes) %> votes</p>

");

The problem returns. The user display does not update. However, this time around, the console has a jquery error:

PUT http://localhost:3000/course/1/upvote_post 500 (Internal Server Error) jquery.js:8241
jQuery.ajaxTransport.send jquery.js:8241
jQuery.extend.ajax jquery.js:7720
$.rails.rails.ajax jquery_ujs.js:99
$.rails.rails.handleRemote jquery_ujs.js:158
(anonymous function) jquery_ujs.js:309
jQuery.event.dispatch jquery.js:3333
jQuery.event.add.elemData.handle.eventHandle

EDIT 2

After playing around with the jquery code, I have noticed a couple of things. Firstly, I have to minify the code. If I do not, the jQuery does not fire. For example, I should do this:

$('#post-action-<%= "#{ @post.id }" %>').html("fooooooobar!")

instead of this:

$('#post-action-<%= "#{ @post.id }" %>').html("
              fooooooobar!
")

Secondly, after entering each line back into the html method, I have identified the line that causes a problem. This line:

<%= link_to raw(\"<i class=\"icon-arrow-down\"></i>\"), post_downvote_path(post.id), method: :put, remote: true %>

Causes the jquery to fail. I tried the line without the ‘raw’:

 <%= link_to "<i class='icon-arrow-down'></i>", post_downvote_path(post.id), method: :put, remote: true %>

But still nothing.

SOLUTION – AH YEA

In order to get the link line to work, I had to escape it like so:

<%= escape_javascript(link_to raw("<i class='icon-arrow-down'></i>"), post_downvote_path(@post.id), method: :put, remote: true) %>

Finally! Free at last.

Answer 1

I think it’s this line :

<%= link_to raw(\"<i class=\"icon-arrow-down\"></i>\"),

So do this :

$('#post-action-<%= "#{@post.id}" %>').html("
                <i class='icon-arrow-up arrow-voted'></i>
                <p class='votes_difference' >
                  <%= (post.upvotes - post.downvotes) %>
                </p>
            <%= link_to raw('<i class=\"icon-arrow-down\"></i>'), post_downvote_path(post.id), method: :put, remote: true %>
                <p class='votes_sum' ><%= (post.upvotes + post.downvotes) %> votes</p>
");

Update

The reason this line fails :

\"<i class=\"icon-arrow-down\"></i>\"),

Is because you are using /" to enclose another /" so the app is thinking that there are two parts here :

\"<i class=\"

and

\"></i>\"

You need to differentiate them. You are already using " for your html() method so use '

So it would look like this :

'<i class=\"icon-arrow-down\"></i>'),

Secondly, escape_javascript the link:

<%= escape_javascript(link_to raw("<i class='icon-arrow-down'></i>"), post_downvote_path(@post.id), method: :put, remote: true) %>