Комментарии, основанные на AJAX, не публикуются под правильным микросообщением (Ruby on Rails)

Question

На странице пользователя есть микросообщения.У каждого из них есть форма комментария.Комментарии публикуются AJAX.После создания комментарий должен появиться под микросообщением, какая форма комментария использовалась, но по какой-то причине комментарий всегда публикуется под последним микросообщением.

В БД все в порядке - после создания комментария у меня есть следующая правильная информация: micropost_id, user_id, comment_id. Поэтому после обновления страницы все комментарии находятся в правильных местах.

Что я должен сделать, чтобы оставлять комментарии под правильным микросообщением без обновления?

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

Во-первых, не используйте идентификатор (#comments) несколько раз. Идентификатор должен быть уникальным на всей странице. Я бы попробовал изменить _micropost.html.erb на использование:

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

и затем измените create.js.erb на

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

Answer 2

Попробуйте следующий код в вашем create.js.erb файле:

$('#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>")

видите, что вы знаете, что происходит, комментарии - всего лишь идентификатор для всех комментариев для различных микросообщений

, поэтому браузерне знает, куда добавить комментарий, будь то в комментариях к первому или последнему микросообщению, поэтому вы должны создать динамический идентификатор для комментариев div.Это то, что я сделал в приведенном выше примере.

Также попробуйте запустить свой код в Firefox и проверить его с помощью firebug.

Answer 3

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

при этом нет эффекта затухания или затухания.

Answer 4

Попробуйте в create.js.erb

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

Или даже лучше, просто добавьте новый комментарий

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