I am trying to set up a common AJAX error / error handler with jQuery, which I can use for several projects. My reasoning for this is related to a number of possible βerrorsβ that may occur during an AJAX request. Here are the ones I've processed so far, and the status number:
- 0: Unknown error
- 1: Successfully
- 2: Not authorized
- 3: time completed
- 4: forbidden (based on permissions)
- Error 404
For the first 5 errors, I had to handle them manually. For this, the only way I could find is to run the method cl4.process_ajaxinside the success function of the AJAX call using the status / property key in the JSON data to determine the state. For 404 or some other AJAX error (i.e. Unparsable JSON), I used the global event handler ajaxError()in jQuery.
The main idea is that the error will be displayed at the top of the screen inside #ajax_errorswhen there is an error sliding down to make it βbeautifulβ. You can click on each error to hide them.
Here is an example of how I used it. cl4.process_ajaxcan also be placed in the if clause, only allowing the execution of the code if it was successful.
$.getJSON('/path/to/page?c_ajax=1', function(return_data) {
cl4.process_ajax(return_data);
if (return_data !== null && typeof return_data == 'object' && typeof return_data.html != 'undefined') {
$('#div').html(return_data.html);
} else {
$('#div').html('');
}
});
c_ajax , JSON , .
, / error_msg. , , . , , ( ).
, JSON, :
array(
status => the status using the constants in AJAX
error_msg => message to be displayed the user at the top of the page
debug_msg => message to be displayed in debug mode
html => the html to display
... any other data for that request
)
:
var cl4 = {};
var cl4_in_debug = TRUE;
cl4.default_error_msg = 'There was a error loading some of the content on this page.<br>Try reloading the page or contacting an administrator.';
$('#ajax_errors').ajaxError(function() {
cl4.add_ajax_error(cl4.default_error_msg);
});
cl4.process_ajax = function(return_data) {
if (typeof return_data != 'object' || return_data === null) {
cl4.add_default_ajax_error(return_data);
return false;
}
if (cl4.in_debug && typeof return_data.debug_msg != 'undefined') {
cl4.add_ajax_error(return_data.debug_msg);
}
if (typeof return_data.status == 'undefined') {
return;
}
switch (return_data.status) {
case 1 :
return true;
break;
case 2 :
cl4.add_default_ajax_error(return_data, 'You are no longer logged in. <a href="/login">Click here to login.</a>');
return false;
break;
case 3 :
cl4.add_default_ajax_error(return_data, 'Your login has timed out. To continue using your current login, <a href="/login/timedout">click here to enter your password.</a>');
return false;
break;
case 4 :
cl4.add_default_ajax_error(return_data, 'You do not have the necessary permissions to access some of the functionality on this page.');
return false;
break;
case 0 :
default :
cl4.add_default_ajax_error(return_data);
return false;
}
};
cl4.add_ajax_error = function(error) {
$('#ajax_errors').append('<div>' + error + '</div>');
$('#ajax_errors div').click(function() {
$(this).slideUp(function() {
$(this).remove();
});
}).slideDown();
};
cl4.add_default_ajax_error = function(return_data, default_msg) {
if (arguments.length == 1) {
default_msg = cl4.default_error_msg;
}
if (return_data !== null && typeof return_data == 'object' && typeof return_data.error_msg != 'undefined' && return_data.error_msg != '') {
cl4.add_ajax_error(return_data.error_msg);
} else {
cl4.add_ajax_error(default_msg);
}
};
? ? AJAX "", , 404 ( ) . , jQuery. ( , , , .)
... , ,
, , - .