Rails 4 Ajax call only works once

Question

I have an app where you can post Links . Each Link has_many Comments

I've set up ajax where a user can upvote a particular comment. Currently, a user can successfully upvote a comment via ajax the first time, but if the user then attempts to upvote a different comment on the same page then the ajax breaks and the value doesn't get updated until the page is refreshed.

comments_controller.rb:

def comment_upvote
  @comment = Comment.find(params[:id])
  @link = Link.where(id: @comment.link_id)
  @comment.upvote_by current_user
  respond_to do |format|
    format.html {redirect_to link_path(@link)}
    format.js {}
  end
end  

views/comments/_comment.html.erb:

<div class="well">
  <h2><%= comment.title %></h2>
  <p class="text-muted">Added by <strong><%= comment.author %> <%= comment.author_last_name %></strong> on
  <%= l(comment.created_at, format: '%B, %d %Y %H:%M:%S') %></p>
  <blockquote>
    <p><%= comment.body %></p>
  </blockquote>
  <p><%= link_to 'reply', new_comment_path(parent_id: comment.id, link_id: @link.id)  %></p>

  <%= link_to pointup_comment_path(comment.id), method: :put, remote: true do %>
    +
  <% end %>
  <div id="comment-votes">
    Votes: <%= comment.get_upvotes.size %>
  </div>

views/comments/comment_upvote.js.erb:

$('#comment-votes').html("<%= j render "upvotes", locals: { @comment => @comment } %>")

views/comments/_upvotes.html.erb:

Votes: <%= @comment.get_upvotes.size %>

Is there an easy way to fix this? Let me know if you need extra detail.

Answer 1

The problem here is that there are many divs with id comment-votes . When you try to get the element by id , it always get the same div.

To solve this problem you need to make the id unique per comment.

views/comments/_comment.html.erb:

<div id="comment-votes-<%= comment.id %>">
  Votes: <%= comment.get_upvotes.size %>
</div>

After setting the unique comment ids. You just need to change the ajax call.

views/comments/comment_upvote.js.erb:

 $("#comment-votes-<%= @comment.id %>").html("<%= j render "upvotes", locals: { @comment => @comment } %>")