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
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 with data-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
.