CODEWITHSUNDEEP
phpjqueryajax
Dave Kiss
Dave Kiss

Reputation: 10487

jQuery AJAX error handling

I've searched the questions on here, but I don't have a good understanding of how to use the error handling in jQuery's AJAX (im a noob, so it just really doesn't make sense.)

Can anybody describe this to a beginner? I'm currently posting information to a PHP script via AJAX, but want to allow jQuery to recognize if the returned data from the script is an error or success.

Thanks! Dave

Upvotes: 6

Views: 11380

Answers (4)

Supergibbs
Supergibbs

Reputation: 1470

Even though it's not your problem, I'll post here since it's related.

With the recent JQuery v1.4 release, JSON responses are now validated. It broke my app because I returned: 

 {success:true}

and now it's required to be

 {"success":true} // HAS to be double quotes, single won't do it

If incorrect, it calls the error handler. Easy fix but took a bit to figure out.

Upvotes: 2

Philip Schlump
Philip Schlump

Reputation: 3144

This is only 1 approach. I am building an application that returns all of its data in JSON. If there is an error then the JSON message is changed to reflect this. Every return object has a "status" of either "success" or "error". If it is an error then there is an "error_message" part of the JSON that describes the error.

I hope that helps.

Upvotes: 2

Bill
Bill

Reputation: 2633

The error return from the ajax call is returning the results from a page load that was not successful. It may be that your php page returns a valid page, but with results that are not what you want. This is handled withing the success return. Hopefully the following code snippit will help illustrate...

$.ajax({
    type: "POST",
    url: "login.php",
    data: "action=login&user=" + user + "&pass=" + pass,
    success: function(xhr){
        if ((xhr == "Invalid Login") 
                || (xhr == "Invalid charaters in username.") 
                || (xhr == "Missing username or password.")
                || (xhr == "Unknown Error")) {
            $("#loginMessageContent").html(xhr);
        }
        else {
            simplemodalClose (dialog);
        }
   }, 
   error: function(xhr) {
       alert ("Oopsie: " + xhr.statusText);
   }
});

Upvotes: 20

Doug Neiner
Doug Neiner

Reputation: 66191

The jQuery AJAX error handling is implemented to handle if the HTTP Request has an error not if your script is returning "error" or "success". If the server throws an error (404 Not Found or 500 Server Error as an example) then it will trigger the error functions of jQuery. It can be handled a few ways, but one nice way is to show a div letting the user know there was an error.

HTML

<div id="error" style="display: none">There was an error processing your last request</div>

jQuery

$(function(){
   $("#error").ajaxError(function(){
      var $error = $(this);
      $error.slideDown(500, function(){
          window.setTimeout(function(){
              $error.slideUp(500);
          }, 2000);
      }); 
   });
});

If an error occurs, none of your "success" methods will fire, and that div will slide down, wait 2 seconds, then slide back up.

Testing your script for errors

As I mentioned what you described sounds like your server script is sending "error" or "success" or something similar back to the client.

If you are using a $.post, for example, your error handling code might look like this:

$.post('/your/url', { save_me: true }, function( data ){
   if(data == "error"){ 
      // handle error
   } else {
      // handle success
   }
}

Upvotes: 2

Related Questions