使用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/

因此,您必须在rails-ujs中触发正确的CustomEvent对象:

目前,在文档(也就是RailsGuides)中没有发布/推荐的方法,但是这里有许多选项,你可以通过查看Rails的源代码来使用它们:

1. 使用Rails.fire功能:

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

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

   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并将其发送到EventTargetvia dispatchEvent.

Answer 2

尝试触发submit.rails事件:

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