我如何让我的远程表单响应与JS

Question

我有一个列出项目的页面。在每个项目下面，它列出了对该项目的任何评论(comments是嵌套在items下的资源)。

您可以在items页面上添加一个新的内联评论。当你这样做的时候，它会重新加载整个页面，所以我想把它改成使用Ajax，只使用jQuery来插入评论。

所以我改变了我的comments/_form.html。动词使用: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

并创建了一个简单的comments/create.js。在页面上插入新评论的动词:

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

然而，当我提交评论时(即使表单上有:remote=>true)，它会一直重新加载整个页面/忽略我的.js文件。

所以我从respond_to中删除了format.html(因为我不想使用该选项)，但随后它给了我错误完成406不可接受在4ms (ActiveRecord: 0.2ms)

我怎么能让它留在当前页面上，并与我的create.js响应?

Answer 1

我刚刚发现了问题:

我用javascript: this.form.submit()提交我的评论表单。当我不使用: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文档)。Rails对remote: true的处理取决于该事件是否被触发，因此该行为会中断。

我从这个答案中使用了解决方案来提交我的JavaScript表单，并且remote: true行为现在按预期工作。

同样，如果您使用rails-ujs，您可以使用这个包装器来提交表单(源):

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

我希望这有助于别人!

Answer 3

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

和可能的更新

format.js { render :nothing => true }