Question

我正在尝试使用ajax而不是页面重新加载来更新新注释。我需要按F5，我看到一个新的评论。但是ajax不起作用。请问有什么想法吗？

Started POST "/posts/3/comments" for 127.0.0.1 at 2017-10-28 01:37:19
+0300 Processing by CommentsController#create as JS Parameters: {"utf8"=>"✓", "comment"=>{"commenter"=>"Test", "body"=>"test"},
"commit"=>"Create Comment", "post_id"=>"3"} Post Load (0.6ms)  SELECT 
"posts".* FROM "posts" WHERE "posts"."id" = $1 LIMIT $2  [["id", 3],
["LIMIT", 1]] (0.4ms)  BEGIN SQL (14.9ms)  INSERT INTO "comments"
("commenter", "body", "post_id", "created_at", "updated_at") VALUES
($1, $2, $3, $4, $5) RETURNING "id"  [["commenter", "Test"], ["body",
"test"], ["post_id", 3], ["created_at", "2017-10-27 22:37:19.855603"],
["updated_at", "2017-10-27 22:37:19.855603"]] (28.1ms)  COMMIT
Rendering comments/create.js.coffee Rendered
comments/_comment.html.erb (1.7ms) Rendered comments/create.js.coffee
(470.8ms) Completed 200 OK in 542ms (Views: 479.4ms | ActiveRecord:
44.0ms)

comments_controller.rb

class CommentsController < ApplicationController

  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.create(comment_params)

    respond_to do |format|
      format.html { redirect_to post_path(@post) }
      format.js
    end
  end

  def destroy
    @post = Post.find(params[:post_id])
    @comment = @post.comments.find(params[:id])
    @comment.destroy
    redirect_to post_path(@post)
  end

  private

    def comment_params
      params.require(:comment).permit(:commenter, :body)
    end

end

_comments_html.erb

<p>
  <strong>Commenter:</strong>
  <%= comment.commenter %>
</p>

<p>
  <strong>Comment:</strong>
  <%= comment.body %>
</p>

<p>
  <% if admin_signed_in? %>
    <%= link_to 'Destroy Comment', 
                [comment.post, comment],
                method: :delete,
                data: { confirm: 'Are you sure?' } %>
  <% end %>
</p>

_form.html.erb

<%= form_for([@post, @post.comments.build], remote: true) do |f| %>
  <p>
    <%= f.label :commenter %><br>
    <%= f.text_field :commenter %>
  </p>
  <p>
    <%= f.label :body %><br>
    <%= f.text_area :body %>
  </p>

  <p>
    <%= f.submit %>
  </p>
<% end %>

create.js.coffee

$('.comment:last').after '<%= j render @comment %>'

Answer 1

这里有很多不妥之处。

首先，您需要为表单分配应用程序范围的唯一ID。你稍后会用到它。也许，有点像：

<%= form_for([@post, @post.comments.build], remote: true, id: 'new-post-comment-form') do |f| %>
  <p>
    <%= f.label :commenter %><br>
    <%= f.text_field :commenter %>
  </p>
  <p>
    <%= f.label :body %><br>
    <%= f.text_area :body %>
  </p>

  <p>
    <%= f.submit %>
  </p>
<% end %>

然后，在show.js.coffee（对于您的帖子），您将需要一些处理此表单成功提交的JavaScript。类似的东西：

$('#new-post-comment-form').on 'ajax:success', (e, data, status, xhr) =>
  $('.comment:last').after(data)

当然，你正在做$(document).ready或者相当的turbolinks（我忘记了turbolinks版本是如何进行的，因为我在所有应用程序中关闭了turbolinks），以便加载上面的javascript。

现在，在您的CommentsController中，您需要对format.js实际执行某些操作。特别是，您需要渲染一些html，以便数据（上面）包含一个html blob：

class CommentsController < ApplicationController

  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.create(comment_params)

    respond_to do |format|
      format.html { redirect_to post_path(@post) }
      format.js { render @comment }
    end
  end

  def destroy
    @post = Post.find(params[:post_id])
    @comment = @post.comments.find(params[:id])
    @comment.destroy
    redirect_to post_path(@post)
  end

  private

    def comment_params
      params.require(:comment).permit(:commenter, :body)
    end

end

你可能需要摆弄render @comment，我不确定。

这可能不完整。而且，我没有做任何测试。但是，希望这会让你朝着正确的方向前进。

在评论中不起作用Ajax

1 个答案: