0

JqueryとAjaxを使用して「更新ページコメントなし」を作成しています。

投稿内/show.html.erb

<%= @post.title %>
<%= @post.body %>
<%= render 'comment %>

posts/_comment.html.erb

<%= link_to "Add Comment", new_post_comment_path(@post), id: "new_comment", remote: true %>

<div id="comments">
    <%= nested_comments @post.comments.arrange(:order => "created_at DESC") %>
</div>

コメント.controller.rb

 def create
    @comment = @post.comments.new(comment_params)
    @comment.user = current_user
    @comment.save
    respond_to do |format|
      if @comment.save
        format.html { redirect_to :back }
        format.js
      else
        format.html { render action: "new" }
        format.js
      end
    end
  end

コメント/_form.html.erb

<div id="comment_form">
    <%= simple_form_for [@post, @comment], remote: true do |f| %>
        <%= f.hidden_field :parent_id %>
        <%= f.text_area :body %>
        <br>
        <%= f.submit "Confirm"  %>
    <% end %>
</div>

コメント/new.js.erb

$('#new_comment').hide().after('<%= j render("form") %>');

コメント/create.js.erb

$('#comment_form').remove();
$('#new_comment').show();
$('#comments').append('<%= j render(@comment) %>');

すべてがうまくいきます。コメントは、ページを更新する必要なく表示されました。

新しいコメントを投稿するたびに、コメントはコメントリストの一番下に移動しました（DESCで作成してコメントを注文します）。すべてのコメントが正しく表示されるようにするには、ページを更新する必要があります。新しいコメントを投稿するたびに、それがコメント リストの一番上にあればいいのにと思います。それを実現する方法は？どうもありがとうございます..

これは、create.js 内に (.append) を含むイメージです。

これは create.js 内に (.prepend) を含むイメージです

4

1 に答える 1

0 
$('#comments').prepend('<%= j render(@comment) %>');

これで問題が解決すると思います。

この.prepend()メソッドは、指定されたコンテンツを jQuery コレクション内の各要素の最初の子として挿入します (最後の子として挿入するには、 を使用します.append())。

于 2018-07-17T07:26:30.377 に答える