Jquery Ajax post success/error function

Question

I have a post function that is not being caught on error.

Here's the value being returned from postride.php.

if ($group_id==0) {
echo 'No group selected';
return false;
exit;
}

Here's the jquery code:

$(document).ready(function(){
$('#postride').submit(function(event) {
     event.preventDefault();
     dataString = $("#postride").serialize();
     $.ajax({
        type: "post",
        url: "postride.php",
        data:dataString,
        error: function(returnval) {
            $(".message").text(returnval + " failure");
            $(".message").fadeIn("slow");
            $(".message").delay(2000).fadeOut(1000);
        },
        success: function (returnval) {
            $(".message").text(returnval + " success");
            $(".message").fadeIn("slow");
            $(".message").delay(2000).fadeOut(1000);    
            //setTimeout( function() { top.location.href="view.php" }, 3000 );  
        }
    })
    return false;
});

});

The post function returns false, but the error function does not fire, only the success function. It will post "No group selected success".

Thanks for any help!

score 28 · Accepted Answer · edited Jul 10 '14 at 10:25

The error option in jQuery ajax methods is for errors caused by a bad connection, timeout, invalid url, things of that nature. It's not the kind of error that you're thinking.

What most people do is something like this...

php

if ($group_id == 0) {
echo json_encode(array(
    'status' => 'error',
    'message'=> 'error message'
));
}
else
{
echo json_encode(array(
    'status' => 'success',
    'message'=> 'success message'
));
}

javascript

$(document).ready(function(){
$('#postride').submit(function(event) {
     event.preventDefault();
     dataString = $("#postride").serialize();
     $.ajax({
        type: "post",
        url: "postride.php",
        dataType:"json",
        data: dataString,
        success: function (response) {
            if(response.status === "success") {
                // do something with response.message or whatever other data on success
            } else if(response.status === "error") {
                // do something with response.message or whatever other data on error
            }
        }
    })
    return false;
});

Nice, @AnthonyJack! But I think you mean `dataType : 'json'` in the javascript code... — Simon, Nov 09 '11 at 17:31
Sure. One last thing: I think "json" has to be in quotation marks ;-) — Simon, Nov 12 '11 at 10:03

score 3 · Answer 2 · answered Sep 16 '11 at 03:00

wsanville is correct: "success" or "failure" refers to the success/failure of the ajax request.

Rather than changing up the HTTP header, though, I find it useful to return information in a json response. So for instance, I would have postride.php respond like so:

$error = false;
if ($group_id==0) {
    $error = 'No group selected';
}
$response = array('error'=>$error);
echo json_encode($response);

Then in the "success" callback of the JS, I would do this:

success: function (returnval) {
    if (returnval.error) {
      $(".message").text(returnval + " failure")
        .fadeIn("slow",function(){
            $(this).delay(2000).fadeOut(1000);
        });
    } else {
      //do whatever user should see for succcess
    }

Anthony Jack posted pretty much what I was going to say first - if you upvote my answer, you should upvote his, and accept his rather than mine. — Philip Schweiger, Sep 16 '11 at 03:02

score 0 · Answer 3 · answered Aug 13 '21 at 15:23

You can also use like that. success if server is ok(200) and fail if any server-error(500) occur.

$.ajax({
    url: "postride.php",
    type: 'POST',
    data: dataString,
    datatype: 'json',
    success: function (data) { 
        successFunction(data); 
    },
    error: function (jqXHR, textStatus, errorThrown) { 
        errorFunction(); 
    }
});

score 0 · Answer 4 · answered Sep 16 '11 at 02:49

The error method of jQuery's ajax function will only get called when the page requested returns an error status code. Your example will probably return HTTP 200, which is why success gets called; jQuery does not interrogate the contents of a response to determine whether or not it was successful.

You should set a 4xx status code when $group_id is 0, by replacing your echo call with a call to header.

Jquery Ajax post success/error function

4 Answers4

Linked