Question

I have a table:

<table class="articles"> 
      <%= render :partial => 'articles/article' , :collection => @articles  %> 
</table>

and the following partial:

<tr> 
  <td>
    <div id="vote_form"> 
     <% form_tag url_for(article_votes_path(article)), :remote => true  do %> 
      <%= image_submit_tag("vote-arrow-up.png", :alt => "Vote-up", :id => "voteup_button") %>
     <% end %>
    </div>
    <div id="vote_score">
      <% form_tag url_for(article_votes_path(article)), :remote => true  do %>  
         <%= image_submit_tag("vote-arrow-down.png", :alt => "Vote-down", :id => "votedown_button") %> 
      <% end %>
    </div> 
    <div id="vote_score">
    Votes: <%= article.votes.count %>
    </div>
 </td>
</tr>

The Javascript that I am using to update the vote score asynchronously is:

    $("vote_score").update('<%= "Votes: #{@article.votes.count}" %>')

The code works and updates the articles’ corresponding counts correctly but does so only in the first table row. For instance, if I vote on an article in the third row with 5 votes, the score updates asynchronously and 6 is displayed in the first row. And if I vote on an article in the fifth row with 100 votes, the score in the first row will display 101. When the page is reloaded, each article has the correct vote count. How can I modify this javascript to update the count in the vote button’s respective table row?

Answer 1

Element ids are supposed to be unique across the document. That’s why only the first element gets updated.

You should assign ids that are actually unique. For example, use article id:

    <div id="vote_score_<%= article.id %>">