How to use a fallback AJAX failure mechanism

I've found using one default fallback AJAX failure mechanism to be a bit of a life saver, it would prove even more useful if you are making a lot of AJAX calls distributed across your site.

I found this approach especially helpful in controlling when the AJAX failure callback is triggered, so you don't end up in messy situaitons where your controller processes the request and the wrong view is sent back to your AJAX success callback.

An example of this being: I had some custom authentication code in the controller, if a user was not logged in the code returned the login form and an error basically. If this authentication code was processed during an AJAX request the result was passing the login form back to the AJAX success function which was confusing for the user.

Its very straight forward to take care of this using jQuery and cakePHP:

Controller takes care of the error, if the request is via AJAX return a 403 header, else display the login form with a message:

if ($this->Session->read('User.is_registrant')) {

//If request via ajax, return 403 header
if ($this->isAjax) {
    header("HTTP/1.0 403 Internal Server Error", true, 403);
    exit;
}
else {
    $this->Session->setFlash(__('Registrants do not have access to admin area.', true));
    $this->redirect(array('controller'=>'users', 'action'=>'admin_login'), null, true);
}

}

Then in jQuery you can define a single callback for AJAX failure which will check the header, if it is 403 then there has been an error with authentication and simply display a message in a floating div then reload the page, which will automatically take the user back to the login.

//Handling any ajax errors
$("#loading").ajaxError(function(event, XMLHttpRequest, ajaxOptions, thrownError){
 
 if (XMLHttpRequest.status == '403') {
 
   //Unbind ajaxStop
   $(this).unbind('ajaxStop');
 
   //Use the loading message dialog to display an error
   $('#loading-message', this).empty();
   $('#loading-message', this).append('<h2>Error!</h2>');
   $('#loading-message', this).append('<p style="text-align:left;">There has been an error with your request, it is likely your session has timed out.</p>');
   $('#loading-message', this).append('<p style="text-align:left;">This page will now be reloaded, you may be redirected to the login page if your session has expired.</p>');
 
   $("#shim").show();
   $(this).center().show(function() {
       setTimeout(function() {
           window.location.reload();
       },6000);
   });
 }
});