Ajax обновление всей колонки, когда необходимо обновить одну ячейку таблицы

Question

Я использую AJAX с кнопкой upvote. Когда пользователь нажимает кнопку «UpVote», форма для нее должна быть отправлена, и должна появиться кнопка «Upvoted».

В настоящий момент работа выполняется, но при ее изменении каждая кнопка «UpVote» в столбце добавляется вверх, а затем на странице перезагружается кнопки, которые не были возвращены, чтобы вернуться к кнопке «UpVote» (странно):

<% @master_songs.each do |master_song| %> 
    <td><div id="upvote-form"> 
      <% unless current_user.up_voted_song?(master_song) %> 
       <%= render 'upvote', :master_song => master_song %> 
      <% else %> 
       <%= render 'upvoted' %> 
      <% end %> 
     </div></td> 
    <% end %> 

song_up_votes.js.erb заключается в следующем:

$("div#upvote-form").html("<%= escape_javascript(render('fan_bases/upvoted')) %>") 

и должны изменить выше DIV для одной строки не весь столбца.

Как это исправить? Любые подсказки/помощь приветствуются.

Answer 1

Похоже, что все ваши div имеют одинаковый идентификатор «upvote-form». Поэтому селектор «div # upvote-form» выбирает все верхние btns для замены. Дайте каждому div уникальный идентификатор, который должен решить вашу проблему.