Question

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

您可以在商品页面上在线添加新评论。当你这样做时，它正在重新加载整个页面，所以我想改变它以使用Ajax并只使用jQuery来插入注释。

所以我将注释/ _form.html.erb更改为使用：remote =＆gt; 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

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

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

但是，当我提交评论时（即使表格中有：remote =＆gt; true），它会不断重新加载整个页面/忽略我的.js文件。

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

如何让它留在当前页面并使用我的create.js回复？

Answer 1

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

可能会更新，

format.js { render :nothing => true }

Answer 2

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

我有一个使用form_with创建的表单，默认情况下是remote: true，并且我正在{{1}上使用submit()函数在Stimulus.js控制器中提交该表单。 }。这没有用，但是使用HTMLFormElement按钮代替了，就像在原始问题中一样。

其背后的原因是，在JavaScript中调用<input type="submit">不会触发表单上的submit()事件，而单击onsubmit按钮会触发此事件（{{3} }）。 Rails对<input type="submit">的处理取决于触发此事件，因此行为会中断。

我使用了MDN docs中的变通方法来使用JavaScript提交表单，并且remote: true的行为现在可以正常工作了。

此外，如果您使用的是remote: true，则可以使用此包装器提交表单（this answer）：

rails-ujs

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

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

2 个答案: