Thursday, July 7, 2011

jQuery general ajax error

Over the years I've collected many code snippets to make programming easier, here's a small one that handles general ajax errors and shows them in a window, you'll need to design your own CSS for this to show properly.


 
//Attach global juery ajaxerror
$(window).ready(function ()
{
    $(document).ajaxError(function (e, jqxhr, settings, exception)
    {
        showError("Ajax Error - " + exception.toString(), jqxhr.responseText);
    });
});
 
//Hides the error window
function hideError()
{
    $('#mask').hide();
    $('#errorWindow').hide();
}
 
//Shows the error window.
function showError(strTitle, strMessage)
{
    //avoid showing an empty ajax message
    if ((strTitle == "Ajax Error - ") && (strMessage == ""))
    {
        return;
    }
 

    var mask = $('#mask');
 
    if (mask.length == 0) {
        mask = $('<div id="mask" class="windowMask"></div>');
        $("body").prepend(mask);
    }
 
    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
 
    //Set height and width to mask to fill up the whole screen
    mask.css({ 'width': maskWidth, 'height': maskHeight });
 
    //transition effect  
    mask.fadeIn(1000);
    mask.fadeTo("slow", 0.8);
 
    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();
 
    var errorWindow = $('#errorWindow');
    if (errorWindow.length == 0) {
        errorWindow = $('<div id="errorWindow" class="windowError"></div>');
        $("body").prepend(errorWindow);
    }
 

    errorWindow.html('<div class="windowHeader">' + strTitle + '</div><div class="windowClose" onclick="hideError();">Close</div>' + '<div class="windowContent">' + strMessage + '</div>');
 
    //Set the popup window to center
    $(errorWindow).css('top', winH / 2 - $(errorWindow).height() / 2);
    $(errorWindow).css('left', winW / 2 - $(errorWindow).width() / 2);
 
    //transition effect
    $(errorWindow).fadeIn(2000);
}
 
 

No comments:

Post a Comment