jquery - 使用Rails UJS，如何从函数提交远程表单

Question

我正在使用 Rails UJS。我有一个表单设置来执行远程提交，如下所示:

<form accept-charset="UTF-8" action="/subscriptions" class="new_subscription form-horizontal" id="new_subscription" data-remote="true" data-type="json" method="POST">

我正在尝试找到一种从 JavaScript 函数提交此表单的方法。我试过:

var form$ = $("#new_subscription");
form$.get(0).submit();

但问题是它提交表单时没有远程，它发布到服务器并刷新页面。知道为什么吗？有其他方式提交远程表单吗？

谢谢

Answer 1

也许对于那些使用jquery-ujs的人来说(Rails 5.0 默认及以下)，正如 Mikhail 已经回答的那样，触发自定义 jquery 事件将起作用，即:

$("#new_subscription").trigger("submit.rails");

对于那些在 2017 年偶然发现这个问题并且正在使用 Rails 5.1 的人来说，答案会有所不同。 Rails 5.1 已下降 jquery作为依赖项，因此已替换 jquery-ujs完全重写rails-ujs 。请参阅:http://weblog.rubyonrails.org/2017/4/27/Rails-5-1-final/

因此，您必须触发正确的 CustomEvent object在 Rails-ujs 中:

目前，文档中还没有发布/推荐的方法(也称为 RailsGuides)，但您可以通过查看 Rails 的源代码来使用以下一些选项:

1. 使用Rails.fire功能:

   nativeFormEl = $("#new_subscription")[0] // you need the native DOM element
   Rails.fire(nativeFormEl, 'submit')
   

2. 您还可以通过编程方式调用 Rails.handleRemote处理程序(实际通过 XHR 使用 data-remote=true 提交表单的处理程序:

   nativeFormEl = $("#new_subscription")[0] // you need the native DOM element
   Rails.handleRemote.call(nativeFormEl, event); // unfortunately, you cannot reference the previously created submit CustomEvent object by rails-ujs.js
   //  ... or ...
   Rails.handleRemote.call(nativeFormEl) // submits via XHR successfully, but throws an error after success callback at Rails.stopPropagation
   

我更喜欢选项 1，因为它只是一个使用更新的 Web API 方法的包装器，即创建 CustomEvent并将其发送至 EventTarget通过dispatchEvent .