vote counter updating with Ajax success

Question

I am creating a voting system with Ajax and the vote counter would show the result dynamically. I can create the vote and delete the vote with Ajax successfully. However, I could not update the vote counter dynamically. I did a lot of trial and error and running out of options.

<div id="counter"><%= @micropost.thumbups.count %></div> , in a div with id, counter, shows vote numbers correctly on microposts/show page.

On create.js.erb,

$("#ups_form").html("<%= escape_javascript(render('microposts/down_form')) %>")

$("#counter").html('<%= @micropost.thumbups.count %>')

The second line is supposed to make the counter to update count dynamically after Ajax has successfully updated the database. But it did not work.

I tried with the following:

1. $("#counter").html('hello') , "hello" would show. this means CSS is fine.
2. $("#counter").html('<%=escape_javascript @micropost.thumbups.count %>') did not work.
3. $("#counter").html("<%= escape_javascript(render('microposts/count')) %>") , after making a count partial of <%= @micropost.thumbups.count %>
4. ...don't know what else to try...

Answer 1

Try this code:

$("#counter").html('');
$("#counter").html('<%= j @micropost.thumbups.count %>');

Answer 2

Your association is probably already loaded in to memory. Try this:

$("#counter").html('<%= @micropost.thumbups(:reload).count %>')