jQuery html method not working

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.

flyingarmadillo · Accepted Answer · 2012-08-08 10:13:39Z

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) %>

edited Aug 8, 2012 at 10:13

flyingarmadillo

2,1395 gold badges21 silver badges38 bronze badges

answered Aug 8, 2012 at 7:32

Trip

27.2k48 gold badges164 silver badges282 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Trip Over a year ago

Hmm.. have you tried removing it line by line until you have a working html() jquery Method? Start with this : $('#post-action-<%= "#{@post.id}" %>').html("fooooooobar!")

Trip Over a year ago

Also are any errors popping up in your console.. are we sure this is exclusively a jQuery error? I'm still pretty sure its that line i mentioned above ;)

flyingarmadillo Over a year ago

Its strange. I can't even get the foobar line to work now: $('#post-action-<%= "#{ @post.id }" %>').html("fooooooobar!"); There are no errors in the console. I have to believe its a jquery error though b/c the controller is being run successfully and the 'id' is named correctly, and the like.

Trip Over a year ago

Interesting. And does your original "working" answer still work? Can you post your controller code? I'm curious if its responding appropriately with the right infos..

flyingarmadillo Over a year ago

Ok, I found the solution. After making sure your edits were included within the 'link_to', I had to escape the link with 'escape_javascript'. Thanks for all your help man :)

|

ddb · Accepted Answer · 2012-08-08 07:31:17Z

0

It looks like you have missed @post inside the html and just have it as post. Try this.

By the way, you should use firebug or chrome inspect element to figure any script errors. They even point out the ajax related script errors when they happen.

$('#post-action-<%= "#{@post.id}" %>').html(" <%= (@post.upvotes - @post.downvotes) %>
<%= link_to raw(\"\"), post_downvote_path(@post.id), method: :put, remote: true %> <%= (@post.upvotes + @post.downvotes) %> votes
");

answered Aug 8, 2012 at 7:31

ddb

1,40611 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery html method not working

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related