Question

我正在我的Rails应用程序中开发一个评论功能。我想在点击发布按钮后立即向用户显示评论。我有一个用于创建按钮的表单，我想使用JQuery_ujs显示注释。最好的方法是什么？

这是创建评论操作：

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>");
        }
      }
    });

});
 });

这是我展示评论的方式：

<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>

用于创建评论的表单：

<%= 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，则无需进行太多更改。

打电话给你现在正在做的事
使用remote: true强制执行javascript请求
将您当前的观看评论列表项目更改为从部分
确保您的控制器可以响应js
然后添加您的ujs文件，例如create.js.erb
删除您的jquery脚本

评论部分看起来更像是：

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

然后你的app/views/comments/_comment.html.erb会是这样的：

<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>

这样您的UJS文件可能如下所示：

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

使用jquery_ujs在同一页面上显示评论

1 个答案: