Rails-如何获得我的远程表单以JS响应？

Posted 2021-04-07

我有一个列出项目的页面。在每个项目的下方，列出了对该项目的所有评论（注释是项下的嵌套资源）。

您可以在项目页面上在线添加新评论。当您这样做时，它正在重新加载整个页面，因此我想将其更改为使用Ajax，而仅使用jQuery插入注释。

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

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

我在我的comments_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

并创建了一个简单的comment / create.js.erb，将新注释插入页面：

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

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

所以我从response_to中删除了format.html（因为我不想使用该选项），但是它给了我错误在4ms内完成406不可接受（ActiveRecord：0.2ms）

如何使它停留在当前页面上并用create.js进行响应？

答案

我刚发现问题：

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

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

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

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

另一答案

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

并且可能会更新，

format.js { render :nothing => true } 

另一答案

[我在尝试使用Rails 6找出2020年类似的东西时遇到了这个问题。

我有一个使用form_with创建的表单，默认情况下为remote: true，我正在使用submit()上的HTMLFormElement函数在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');

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