CODEWITHSUNDEEP
jqueryjquery-mobile
Rob
Rob

Reputation: 389

jQuery mobile and JSON post responses

What is the best practice for handling a form post that returns a json response? We are trying to reuse some code in the mobile version of our site which returns JSON and I am unsure of the best way to handle the javascript. I want to populate a dialog. Do I really have to set data-ajax to false on the form tag and call $.post instead?

Thanks, Rob

Upvotes: 1

Views: 7589

Answers (3)

Stan
Stan

Reputation: 1308

You might want to add an .error() handler to Jasper's example otherwise if there is an error in the jquery or in the server side your loading message will stay on top until the user refreshes the page which probably will cause a lot of the data he entered.

//add event handler to your form's submit event
$('form').on('submit', function (e) {
    var $this = $(this);

    //prevent the form from submitting normally
    e.preventDefault();

   //show the default loading message while the $.post request is sent
    $.mobile.showPageLoadingMsg();

    //send $.post request to server, `$this.serialize()` adds the form data to the request
    $.post($this.attr('action'), $this.serialize(), function (response) {

        //you can now access the response from the server via the `response` variable
        $.mobile.hidePageLoadingMsg();
    }, 'json') //you can set the response data-type as well
    .error(function(e) {
        $.mobile.showPageLoadingMsg();
        console.log('my_function_name, ' + e.responseText); 
    });
});

Upvotes: 1

Jasper
Jasper

Reputation: 76003

Yes, in order to handle form submission in jQuery Mobile you have to add data-ajax="false" to the form tag so the jQuery Mobile framework won't handle it for you. You can then setup your own handler for the submit event:

//add event handler to your form's submit event
$('form').on('submit', function (e) {
    var $this = $(this);

    //prevent the form from submitting normally
    e.preventDefault();

    //show the default loading message while the $.post request is sent
    $.mobile.showPageLoadingMsg();

    //send $.post request to server, `$this.serialize()` adds the form data to the request
    $.post($this.attr('action'), $this.serialize(), function (response) {

        //you can now access the response from the server via the `response` variable
        $.mobile.hidePageLoadingMsg();
    }, 'json');//you can set the response data-type as well
});

Here's the documentation for $.post(): http://api.jquery.com/jquery.post/

Note: .on() is being used in place of the depreciated .bind() function: http://api.jquery.com/on/

Upvotes: 7

GerjanOnline
GerjanOnline

Reputation: 1881

Will this post help you?

http://www.giantflyingsaucer.com/blog/?p=2574

Maybe you can explain a little bit more, what do you mean with "Do I really have to set data-ajax to false on the form tag" ? If you want to preserve the AJAX way I think you have to handle your form POST with for example $.post or $.ajax (see example)

Upvotes: 0

Related Questions