Question

Each time someone changes their response in a radio button it is recorded in the database. Here’s the javascript in the application.js file:

$('.submittable').live('change', function() {
    $(this).parents('form:first').submit();
    return false;
});

In the radio button HTML is:

class="submittable"

In the full site there is no change in the page because it is suppressed in the controller like so:

def update_result
   ...
   render :nothing => true
end

However, in the mobile version the page flips to a page that says undefined in the top left corner but otherwise is blank. The terminal window message:

...
Processing by AnswersController#update_result as JS
...
Rendered text template (0.0ms)
Completed 200 OK in 309ms (Views: 5.6ms | ActiveRecord: 5.1ms)

Thanks for your help.

Answer 1

When using jQuery Mobile, to submit a form by ourselves (so no page-change occurs), we have to set data-ajax="false" on the <form> tag and then setup our own AJAX function (in the submit callback for the form):

//as of jQuery 1.7 `.live()` is depreciated in favor of `.delegate()`
$(document).delegate('.submittable', 'change', function() {

    //`.closest('form')` is the same as `.parent('form:first')`, also `.submit()` is shorthand for `.trigger('submit')`, just FYI
    $(this).closest('form').trigger('submit');
    return false;
}).delegate('form', 'submit', function () {

    //cache the jQuery object of this form and use that variable to setup the AJAX request
    var $form = $(this);
    $.ajax({
        url     : $form.attr('action'),//use the form's action attribute for the URL of the request
        type    : $form.attr('method'),//use the form's method attribute to set the TYPE of the request
        data    : $form.serialize(),//add the form input data to the request
        success : function (serverResponse) {
            //the server has responded, whatever was output by the server-side script is available through the `serverResponse` variable
        },
        error   : function (jqXHR, textStatus, errorThrown) {
            //make sure to handle errors
        }
    });

    return false;
});

<form action="..." data-ajax="false" method="post">
    ...
</form>