19

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

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

谢谢

4

3 回答 3

42

也许对于那些使用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. 您还可以以编程方式调用处理程序（通过 XHRRails.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 方法的包装器，即创建 aCustomEvent并将其分派到EventTargetvia dispatchEvent。

于 2017-07-10T01:36:31.967 回答
15

尝试触发submit.rails事件：

$("#new_subscription").trigger("submit.rails");
于 2012-10-02T06:11:06.130 回答
-1

尝试自己做一个 Ajax 请求：

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

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

于 2012-10-14T23:43:52.377 回答