jquery_ujsを使って同じページにコメントを表示

Question

私はRailsアプリケーションでコメント機能を開発しています。投稿ボタンをクリックした直後にコメントをユーザーに表示したいと思います。 ボタンを作成するためのフォームがあり、JQuery_ujsを使用してコメントを表示したいとします。それをする最善の方法は何ですか？

このコメントアクションの作成です：作成するための

<div id="comments"> 
<%@article.comments.each do |comm|%> 
<div class="well"> 
<p class="text-muted">Added by <strong><%=comm.commentor%></strong> on 
<%= l(comm.created_at, format: '%B, %d %Y %H:%M:%S') %></p> 
<blockquote> 
<p><%=comm.content%></p> 
</blockquote> 
</div> 
<%end%> 
</div> 

形式：

def create_comment 
    params.permit! 
    @article = Article.find(params[:article][:id]) 
    @comment = Comment.create(params[:comment]) 
    @comment.article_id = @article.id 

    if @comment.save 
     render :text => 'created', :status => 202 and return 
    else 
     render :text => "not created", :status => 203 and return 
    end 
end 

これはjqueryのスクリプトです：

$(document).ready(function(){ 
    $('#submit').click(function (e) { 


    e.preventDefault(); 

    var commentor =this.comment_commentor.val(); 
    var comment =this.comment_content.val(); 

    $.ajax({ 

     type: "POST", 
     url: '<%=create_comment_comment_index_path%>', 
     // send the last id to our rails app 
     data: { 
      commentor: commentor, 
      comment: content, 
     }, 

     complete: function(jqXHR, textStatus){ 
     if(jqXHR.status == "203"){ 
      //invalid 
     }else if(jqXHR.status == "202"){ 
      //valid 

      $('#comments').append("<div class='well'> 
    <p class='text-muted'>Added by <strong><%=@acomment.commentor%></strong> on <%= l(@comment.created_at, format: '%B, %d %Y %H:%M:%S') %> 
    </p> 
    <blockquote> 
    <p><%=comm.content%></p> 
    </blockquote> 
     </div>"); 
     } 
     } 
    }); 

}); 
}); 

これは私がコメントを表示する方法ですがコメント：

<%= form_for(:comment, :url => create_comment_comment_index_path) do |f| %> 
    <input type="hidden" value="<%=params[:id]%>" name="article[id]"> 
    <div class="field"> 
    <%= f.text_field :commentor,:class=>"form-control", :required=>"true"%> 
    </div> 
    <br> 
<div class="field"> 
    <%= f.text_area :content,:class=>"form-control", :required=>"true"%> 
</div> 
<br> 
<div class="actions"> 
    <%= f.submit "create",:id=>"submit",:class=>"btn btn-lg btn-primary "%> 
</div> 
<% end %> 

Answer 1

別のユーザーがコメントしたように、2つの選択肢があり、コールバックで更新したり、UJSで更新したりできます。個人的には、コールバックメソッドを使用しているときにJSONで応答する方が簡単ですが、それは単に個人的な好みです。

あなたがUJSに行くことを選択した場合は、あまり変更する必要はありません。あなたのコントローラが応答できることを確認し、部分的

からレンダリングするJavaScriptの要求に

変更現在のビューのコメント一覧項目を強制的にremote: trueを使用して、今

やっているよう

• 呼び出しが作成しますjs
• 次に、ujsファイルを追加します。 create.js.erb
• コメント欄は、より多くのようになります

あなたのjqueryのスクリプトを削除します。あなたのUJSファイルをすることができますこの方法

<div class="well"> 
    <p class="text-muted">Added by <strong><%=commment.commentor%></strong> on 
    <%= l(comment.created_at, format: '%B, %d %Y %H:%M:%S') %></p> 
    <blockquote> 
     <p><%=commment.content%></p> 
    </blockquote> 
</div> 

：

<div id="comments"> 
    <%@article.comments.each do |comm|%> 
     <%= render comm %> 
    <%end%> 
</div> 

次に、あなたのapp/views/comments/_comment.html.erbのようなものになるだろう次のようになります。

$('#comments').prepend('<%= j render("comment", comment: @comment) >'); 
$('form#new_comment').find("input[type=text], textarea").val(""); 

これにより、コメントリストの先頭に新しく作成されたコメントが追加されます。

参照サンプルアプリ：https://github.com/trh/rails_ujs_comments_example_app