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 object：

目前，在文档（a.k.a. RailsGuides）中没有已发布/推荐的方法，但是这里有许多选项，只需查看Rails的源代码就可以使用：

使用Rails.fire功能：

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

您还可以通过XHR以编程方式调用Rails.handleRemote处理程序（实际使用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。

Answer 2

尝试触发submit.rails事件：

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

Answer 3

尝试自己做一个Ajax请求：

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

这样，您使用表单数据执行POST请求并以脚本形式执行响应。

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

3 个答案: