问题
I'm using Rails UJS. I have a form setup to do a remote submit like so:
<form accept-charset="UTF-8" action="/subscriptions" class="new_subscription form-horizontal" id="new_subscription" data-remote="true" data-type="json" method="POST">
I'm trying to find a way to submit this form from a JavaScript function. I've tried:
var form$ = $("#new_subscription");
form$.get(0).submit();
but the problem with this is that it submits the form w/o the remote, it posts to the server and refreshes the page. Any idea why that is? Is there a different way to submit a remote form?
Thanks
回答1:
Perhaps for those using jquery-ujs
(Rails 5.0 default and below), as Mikhail as already answered, triggering the custom jquery event will work, i.e.:
$("#new_subscription").trigger("submit.rails");
For those who have stumbled upon this question in 2017 and is using Rails 5.1, the answer will be different. Rails 5.1 has dropped jquery
as a dependency and therefore has replaced jquery-ujs
with a complete rewritten rails-ujs
. See: http://weblog.rubyonrails.org/2017/4/27/Rails-5-1-final/
As such, you'll have to trigger the proper CustomEvent object in rails-ujs:
As of the moment, there's no published/recommended way of doing it in the documentation (a.k.a. RailsGuides), but here are a number of options that you could use just by looking at Rails' source code:
Use
Rails.fire
function:nativeFormEl = $("#new_subscription")[0] // you need the native DOM element Rails.fire(nativeFormEl, 'submit')
You could also programmatically call the
Rails.handleRemote
handler (the one that actually submits forms withdata-remote=true
via 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
I prefer Option 1 because it's just a wrapper that uses more recent Web API methods i.e. creating a CustomEvent
and dispatches it to the EventTarget
via dispatchEvent
.
回答2:
Try to trigger the submit.rails
event:
$("#new_subscription").trigger("submit.rails");
回答3:
Try doing an Ajax request by yourself:
$('#new_suscription').submit(function(){
/*do whatever you want here*/
$.post('/subscriptions',$(this).serialize(),function(){},'script');
}
That way, you do a POST request with the form data and execute the response as a script.
来源:https://stackoverflow.com/questions/12683524/with-rails-ujs-how-to-submit-a-remote-form-from-a-function