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

【问题标题】：With Rails UJS, how to submit a remote form from a function使用 Rails UJS，如何从函数提交远程表单
【发布时间】：2012-10-02 01:51:44
【问题描述】：

我正在使用 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();

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

谢谢

【问题讨论】：

标签： jquery ruby-on-rails ruby-on-rails-3 ujs

【解决方案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/

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

目前，文档（又名 RailsGuides）中没有发布/推荐的方法，但您可以通过查看 Rails 的源代码来使用以下选项：

使用Rails.fire函数：

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

您还可以以编程方式调用 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 并通过 dispatchEvent 将其分派到 EventTarget。

【讨论】：

选项 1 是 rails 5 的真正答案！谢谢！像魅力一样工作。
也可以确认选项 1 效果很好，但是要在使用 webpacker 时访问 Rails 对象，您需要先执行 import Rails from '@rails/ujs'; Rails.start()。见stackoverflow.com/questions/56128114/…
想补充一点，我目前在我的代码中使用以下内容：Rails.fire(nativeFormEl, 'ajax:success')——虽然这确实触发了ajax:success 事件，但它传递了 wrong/old i> Rails UJS 使用的CustomEvent 类。新的 CustomEvent 类在键 event.details 处有一个 3 项数组，但旧格式没有。这很令人困惑，我不得不编写一个愚蠢的 if-then 语句作为解决方法，以便在我的 Ajax 事件侦听器中正确处理代码

【解决方案2】：

尝试触发submit.rails事件：

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

【讨论】：

虽然这可能是几年前的正确答案，但现在不再正确了。由于 Rails 5.1 用 rails-ujs 替换了 jquery-ujs，jQuery 依赖被移除，自定义事件也发生了变化。我偶然发现了您的答案，只是为了验证这不再是答案。一旦我验证了最新的答案，将重新发布。

【解决方案3】：

尝试自己做一个 Ajax 请求：

$('#new_suscription').submit(function(){
  /*do whatever you want here*/
  $.post('/subscriptions',$(this).serialize(),function(){},'script');
}

这样，您可以使用表单数据发出 POST 请求，并将响应作为脚本执行。

【讨论】：