Work with AJAX errors that are not logged in, etc. - thoughts on this method?

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
)

:

// setup the cl4 object and the debug flag
// these are typically else where and cl4 has other stuff in it
var cl4 = {};
var cl4_in_debug = TRUE; // probably default to false, but for this makes it easier to test

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.';

/**
* attach an AJAX error hander to the ajax_error element
*/
$('#ajax_errors').ajaxError(function() {
    cl4.add_ajax_error(cl4.default_error_msg);
});

/**
* Call within a ajax success function to deal with the response of an ajax call
*/
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'/* && return_data.debug_msg != ''*/) {
        cl4.add_ajax_error(return_data.debug_msg);
    }

    // check to see if we've received the status, because we need it for the rest
    if (typeof return_data.status == 'undefined') {
        return;
    }

    switch (return_data.status) {
        // successful
        case 1 :
            return true;
            break;
        // not logged in
        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;
        // timed out
        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;
        // not allowed (permissions)
        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;
        // unknown error
        case 0 :
        default :
            cl4.add_default_ajax_error(return_data);
            return false;
    }
};

/**
* ajax error function, will show a red div at the top of the page if there is a problem with any of the ajax on the page
*/
cl4.add_ajax_error = function(error) {
    $('#ajax_errors').append('<div>' + error + '</div>');
    $('#ajax_errors div').click(function() {
        $(this).slideUp(function() {
            $(this).remove();
        });
    }).slideDown();
};

/**
* Adds a default message if there is no error_msg in the return_data object
*/
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. ( , , , .)

... , ,

, , - .

+3
1

, , , , - :

$.getJSON('/path/to/page?c_ajax=1', function(return_data) {
    if(!cl4.process_ajax(return_data)) return;
    $('#div').html(return_data.html);
});

, div if, , , ( , , ).

+1

All Articles