基於AJAX的評論不會發布正確的微博（Ruby on Rails）

Question

在用戶的頁面上有微博。 他們每個人都有評論表。 評論由AJAX發布。 創建后，評論必須出現在使用評論表格的微博下，但由於某種原因，評論總是在最后一個微博下發布。

在DB中有一切正常 - 在創建評論后，我有下一個正確的信息： 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

首先，不要多次使用ID（ #comments ）。 ID應該在整個頁面上是唯一的。 我嘗試更改_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>")

看到你知道發生了什么，評論只是對不同微博的所有評論的ID

因此瀏覽器不知道在第一個微博或最后一個評論中添加評論的位置，因此您必須為div評論創建動態ID。 這就是我在上面的例子中所做的。

另外，嘗試在firefox中運行代碼並使用firebug進行檢查。

Answer 3

嘗試使用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) %>");

Answer 4

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

當你這樣做時，沒有褪色或淡出效果。