prototype_s – form.submit () missed Rails.js UJS Observer

:onclick => remote_function(...)

$("dummy_form").request({
 onSuccess: function(response) {eval(response)}
});

<%= javascript_tag do %>
 Event.observe(window,'load', function() {
 $('CHECK_BOX_ID').observe('click', function(event) {
 new Ajax.Request('/your/url ', {
 onSuccess: function(response) {
 // yada yada yada
 }
 })
 });
}); 

In a Rails 3 application, as long as a checkbox is toggled, I want the browser to call a remote function. In Rails 2, it is easy to do by passing

:onclick => remote_function(...)

To the checkbox helper. In Rails 3, the remote_* function is not recommended, So I tried the following solutions:

>Use form_tag …:remote => Create a form around the checkbox to really
>Submit the form by calling $("dummy_form").remit() ; From the onclick handler

The rails.js file bundled with Rails is an observer listening for submission events. However, these seem to be only available to users Triggered when the submit button is clicked, not when form.submit() is called (only tested in FF so far).

This has an undesirable effect, that is, the submission is not in the background via AJAX Finished, but the usual way, so the browser leaves the current site and displays the response from the controller.

Does anyone know a solution? Maybe a completely different way to get the same function?

You can call to submit the form:

$("dummy_form").request( {
 onSuccess: function(response) {eval(response)}
});

This will use AJAX to submit the form to the url given to form_tag and evaluate the received response, So it must use JS to respond. If you don’t want it, please change the onSuccess implementation.

If form submission is a workaround, as you said, then you can also manually handle the onSuccess Click the event instead of submitting the entire form, and send an AJAX request:

<%= javascript_tag do %>
Event.observe(window,'load', function( ) {
 $('CHECK_BOX_ID').observe('click', function(event) {
 new Ajax.Request('/your/url', {
 onSuccess: function(response ) {
 // yada yada yada
 }
 })
 });
});