Rails - 如何让我的远程表单用 JS 响应？

Question

我有一个列出项目的页面。在每个项目下方，它列出了该项目的所有 cmets （cmets 是 items 下的嵌套资源）。

您可以在项目页面上添加新的内嵌评论。当你这样做时，它正在重新加载整个页面，所以我想将其更改为使用 Ajax 并仅使用 jQuery 插入评论。

所以我将我的 cmets/_form.html.erb 更改为使用 :remote=>true

<%= form_for([@item,@comment], :remote=>true) do |f| %>

我在我的 cmets_controller 中添加了一个 format.js：

def create
  @comment = Comment.new(params[:comment])
  @comment.save

  respond_to do |format|
    format.js
    format.html { redirect_to items_path}
  end
end

并创建了一个简单的 cmets/create.js.erb 来将新评论插入页面：

$("#comments").append("<%= j(render(@comment)) %>");

但是，当我提交评论时（即使在表单上使用 :remote=>true），它也会不断重新加载整个页面/忽略我的 .js 文件。

所以我从 respond_to 中删除了 format.html（因为我不想使用该选项），但是它给了我错误 Completed 406 Not Acceptable in 4ms (ActiveRecord: 0.2ms)

我怎样才能让它留在当前页面上并用我的 create.js 响应？

Answer 1

我刚刚发现了问题：

我正在使用 javascript：this.form.submit() 提交我的 cmets 表单。当我不使用:remote=>true 时，效果很好。但是由于某种原因，当我填写:remote=>true 时会中断。

如果我使用实际的提交按钮，我的问题中的代码可以正常工作。

或者，如果我将我的 JavaScript 从 this.form.submit() 更改为使用 jQuery 通过 id 选择表单并提交，那也可以：

$("#new_comment_<%= @item.id %>").submit();

Answer 2

我在 2020 年尝试使用 Rails 6 解决类似问题时遇到了这个问题。

我有一个使用form_with 创建的表单，默认情况下是remote: true，我使用HTMLFormElement 上的submit() 函数在Stimulus.js 控制器中提交它。这不起作用，但使用 <input type="submit"> 按钮代替了工作，就像在原始问题中一样。

这背后的原因是在 JavaScript 中调用 submit() 不会触发表单上的 onsubmit 事件，而单击 <input type="submit"> 按钮会触发此事件 (MDN docs)。 Rails 对remote: true 的处理取决于触发此事件，因此行为中断。

我使用this answer 中的解决方法在 JavaScript 中提交我的表单，remote: true 行为现在按预期工作。

另外，如果您使用rails-ujs，您可以使用此包装器提交表单 (source)：

form = document.querySelector('form');
Rails.fire(form, 'submit');

我希望这对其他人有帮助！

Answer 3

您应该将:format => :js 添加到您的form_for

并且可能会更新，

format.js { render :nothing => true }