Best way to obtain jqXHR status using $.post in jQuery

Question

I found this topic (How to get response status code from jQuery.ajax?) in which it explain how to obtain the return the status, but I'm using $.post which makes it a little different.

I have the following code:

$(function() {
$('#update_marker').submit( function(e) {
e.preventDefault();
$.post($("#update_marker").attr("action"), $("#update_marker").serialize(), function(data) {
    if( $.trim(data).indexOf('<')==0 ) {
        new Messi( lang['dist_general_error'], {title: 'Ops...', titleClass: 'anim error', buttons: [{id: 0, label: 'Fechar', val: 'X'}]});
    } else {
        var json = $.parseJSON( data );
        if( json.status=="success" ) {
            new Messi( json.msg );
        } else {
            new Messi( json.msg, {title: 'Ops..', titleClass: 'anim error', buttons: [{id: 0, label: 'Fechar', val: 'X'}]});
        }
    }
});
return false;
});
});

So I thought I'd change the $.post call to something like

$.post($("#update_marker").attr("action"), $("#update_marker").serialize(), function(data, textStatus, jqXHR) {

and it DOES work if I get jqXHR.status code = 200. But when the status = 500 I get nothing.

I'm trying to achieve this with minimal code changes as I have a lot of functions like this one, and I need to be able to capture the 500 code and treat in all of them.

Any ideas?

Please note that you can also listen to the Ajax events globally, http://api.jquery.com/Ajax_Events/ — Ram, Dec 04 '13 at 11:56

Johanna Larsson · Accepted Answer · 2013-12-04T12:03:19.557

jQuery post only takes success as a parameter. The success handler is only called on successful ajax requests. If the request returns 500, the success handler, your callback, is never executed.

To attach an error handler, you can chain .fail after .post or switch to the broader $.ajax.

The first option means you modify your code by adding .fail like this

$(function() {
  $('#update_marker').submit( function(e) {
    e.preventDefault();
    $.post($("#update_marker").attr("action"), $("#update_marker").serialize(), function(data) {
        if( $.trim(data).indexOf('<')==0 ) {
            new Messi( lang['dist_general_error'], {title: 'Ops...', titleClass: 'anim error', buttons: [{id: 0, label: 'Fechar', val: 'X'}]});
        } else {
            var json = $.parseJSON( data );
            if( json.status=="success" ) {
                new Messi( json.msg );
            } else {
                new Messi( json.msg, {title: 'Ops..', titleClass: 'anim error', buttons: [{id: 0, label: 'Fechar', val: 'X'}]});
            }
        }
    }).fail(function () { console.log("I errored!"); });
    return false;
  });
});

I would recommend getting accustomed to $.ajax though, it is not difficult to get a hang of and it is much more extensible.

Yes, since `$.post()` returns a deferred object, `.error()` method is chainable here. — Ram, Dec 04 '13 at 11:59
.error() is deprecated, use .fail() instead or .then(success,error) — A. Wolff, Dec 04 '13 at 12:01
Ok, I did and it worked. But there is something weird, when I simulate a return code 500 it works fine and calls `.fail()`. But when I simulate a PHP error like calling an invalid object, the return code is 200 and it ALSO calls `fail`. Why? — Christian Dechery, Dec 04 '13 at 12:35

Best way to obtain jqXHR status using $.post in jQuery

1 Answers1