使用Rails UJS,如何从功能提交远程表单(With Rails UJS, how to sub

2019-08-01 02:30发布

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

但这样做的问题是,它提交表单W / O远程,它发布到服务器,并刷新页面。 任何想法,这是为什么? 是否有不同的方式提交远程形式?

谢谢

Answer 1:

也许对于那些使用jquery-ujs (Rails的5.0默认及以下),如米哈伊尔作为已经回答,引发了自定义的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/

因此,你必须触发适当的自定义事件对象在轨-UJS:

由于一时的,还有的文档(又名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 ,并分发到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请求并执行响应为脚本。



文章来源: With Rails UJS, how to submit a remote form from a function