AJAX based comments don't post under correct micropost (Ruby on Rails)

Question

On the user's page there are microposts. Each of them have comment form. Comments are posting by AJAX. After creating, comment must appear under micropost which comment form was used, but for some reason comment always posts under the last micropost.

In DB there is all OK - after creating comment i have there next correct information: micropost_id, user_id, comment_id. So after refreshing page all comments are on the correct places.

What should i do to have comments posted under correct micropost without refreshing?

comment.rb

class Comment < ActiveRecord::Base
  attr_accessible :comment_content
  belongs_to :user
  belongs_to :micropost
end

comments_controller.rb

class CommentsController < ApplicationController
  before_filter :signed_in_user, only: [:create, :destroy]

   def create
    @micropost = Micropost.find(params[:micropost_id])
    @comment = Comment.new(params[:comment])
    @comment.micropost = @micropost
    @comment.user = current_user
      respond_to do |format|
      @comment.save
           format.html { redirect_to current_user }
           format.js
      end
   end 
end

_micropost.html.erb

<tr>
  <td class="micropost">
    <span class="content"><%= wrap(micropost.content) %></span>
    <span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
    </span>
    <%= render 'shared/comment_form', micropost: micropost %>
   <div id="comments">
     <%= render micropost.comments %>
   </div>
  </td>
</tr>

_comment_form.html.erb

<%= form_for ([micropost, @comment]), :remote => true do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.text_area :comment_content, :size => "40x2" %>
  <button class="btn" type="submit">
    Comment
  </button>
<% end %>

_comment.html.erb

<span style="width: 100%; background:#dff0d8"><%= wrap(comment.comment_content) %></span>
<span class="timestamp">
 Posted by <%= comment.user.name %> <%= time_ago_in_words(comment.created_at) %> ago.
</span>

create.js.erb

$('#comments').html("<%= escape_javascript(render(:partial => @micropost.comments)) %>");

Answer 1

First off, don't use an ID ( #comments ) multiple times. An ID is supposed to be unique on the entire page. I'd try changing _micropost.html.erb to use:

<div id="<%= dom_id(micropost) %>">
  <%= render micropost.comments %>
</div>

and then change create.js.erb to

$('#<%= dom_id(@micropost) %>').html("<%= escape_javascript(render(:partial => @micropost.comments)) %>");

Answer 2

Try the following code in your create.js.erb file:

$('#comments_<%=@micropost.id%>:last').append("<div><span style='width: 100%; background:#dff0d8; font-size: 12pt' ><%= wrap(@comment.comment_content) %></span><br> <span class='timestamp' style='width: 100%; background:#dff0d8; font-size: 10pt'> Posted by<%= @comment.user.name %> <%= time_ago_in_words(@comment.created_at) %> ago.</span> </div>")

see you know what is happening , comments is nothing but an id for all comments for different microposts

so browser does not know where to add comment whether in comments of first micropost or last so you have to create dynamic id for div comments. That is what I have done in the above example.

Also, try running your code in firefox and inspect it using firebug.

Answer 3

Try in create.js.erb

$(this).parent().find('#comments').html("<%= escape_javascript(render(:partial => @micropost.comments)) %>");

Or even better, just prepend the new comment

$(this).parent().find('#comments').prepend("<%= escape_javascript(render 'comments/comment', :comment => @comment) %>");

Answer 4

$(this).parent().find('#comments').prepend("<%= escape_javascript(render 'comments/comment', :comment => @comment) %>");

当你这样做时，没有褪色或淡出效果。