How to update table rows with javascript in rails partial

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?

Sergio Tulentsev · Accepted Answer · 2012-01-30 20:47:07Z

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

answered Jan 30, 2012 at 20:47

Sergio Tulentsev

231k43 gold badges381 silver badges373 bronze badges

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

Collectives™ on Stack Overflow

How to update table rows with javascript in rails partial

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related