Question

在我的Rails应用中，用户可以对帖子发表评论。当用户提交他们的评论时，此代码从CommentsController运行：

def create
    @comment = Comment.new(comment_params)
    @comment.user_id = current_user.id
    @matchup = Post.find(comment_params[:post_id])
    if @comment.save  
      respond_to do |format|
        format.js
      end
    end
end

我已经设置了所以当创建注释时我在comments / create.js.erb中运行这段代码

$("#comment-form-<%= @post.id %>").replaceWith("<%= j render partial: 'comments/comment_form', locals: {post: @post} %>"),
$("#new-comment-<%= @post.id %>").replaceWith("<%= j render partial: 'comments/comment', locals: {post: @post, comment: @comment} %>");

重新呈现评论表单，并在评论列表的顶部呈现用户的新评论。它适用于第一个评论。

但是，如果用户没有刷新页面并留下第二条评论，则此代码不起作用。第二个注释已创建，但仅在刷新页面时才会显示。对于JS来说，我是一个新人。我错过了什么？

Answer 1

创建新评论后，您不需要替换原始评论dom，您可能需要在新评论之前或之前/之后附加/预先评论。尝试更改：

$("#new-comment-<%= @post.id %>").replaceWith("<%= j render partial: 'comments/comment', locals: {post: @post, comment: @comment} %>"

要：

 $("#new-comment-<%= @post.id %>").before("<%= j render partial: 'comments/comment', locals: {post: @post, comment: @comment} %>"

Answer 2

编辑 - 首先排除故障

我认为你的代码看起来很好并且应该可以工作，除非你从下面遗漏了一些代码。因此，只需解决两件事情，以确保问题不是微不足道的。

如果更新视图的JavaScript代码位于函数内部，请确保format.js调用该函数不仅仅是JavaScript文件。

像这样：

respond_to do |format|
  format.js { render :js => "my_function();" }
end

查看this post以获取更详细的示例。

您也可能希望查看与您有同样问题的人发布的这些帖子，因为看看您是否遇到与他们相同的问题应该非常简单：

Post 1

Post 2

Post 3

如果上述故障排除无效，请查看以下内容。

如果您希望在后端实际发生事情（在数据库中存储注释），并在前端显示这些更改（显示新注释），而不刷新页面，则可能需要使用AJAX。 / p>

使用Rails，AJAX很简单。在许多资源中已经解释并概述了在您的Rails应用程序中使用AJAX以便不必重新加载/刷新页面的过程。我找到的最好的资源是this guide。

由于有很多简单的指南非常擅长解释这个过程，所以我不会在这里详细介绍。

看起来你已经为AJAX设置了很多，只要确保你列出了我在下面列出的所有内容。

您必须将remote: true（或早期版本:remote => true）添加到您的链接/按钮。这将允许进行AJAX调用。像这个例子：

<%= link_to 'Post Comment!', create_comments_path('params in here'), :remote => true %>

或者如果您使用的是表单，只需将远程部分添加到提交标记：

<%= form_for [@post, Comment.new], remote: true do |f| %>

当然，根据您的控制器和视图，您的确切行可能会有所不同。

下一步是向您的方法添加respond_to..format.js..块，该块处理在数据库中创建注释，或者您可能正在执行的任何其他操作。我没有列出整个块，因为你已经在代码中得到了它:)

请确保没有被调用的控制器方法的format.html行在respond_to..块中有一个正文。 format.html很好，但format.html { #anything in here }不合适。

接下来，我们需要使用make .js文件，该文件将使用新创建的注释（或其他任何内容）重新填充视图。看起来你已经有了这个文件，所以我不会谈论如何制作它。

如果您遇到任何问题，可以从这些指南获得最多帮助：

允许用户在不刷新页面的情况下留下多条评论

2 个答案:

编辑 - 首先排除故障