Display loading div when executing ajax requests

In html add the following div right before closing body tag

<div class="ajax-loading"><div></div></div>

Add the following CSS code to stylesheet. (Download loading-bgr.gif and loading.gif)

div.ajax-loading{
                position: fixed;
                top: 0;
                left: 0;
                height:100%;
                width:100%;
                z-index: 9999999;
                background-image: url('../../images/loading-bgr.gif');
                opacity: 0.7;
                filter: alpha(opacity=70); /* ie */
                -moz-opacity: 0.7; /* mozilla */
                display:none;
            }
div.ajax-loading * {
                height:100%;
                width:100%;
                background-image: url('../../images/loading.gif');
                background-position:  center center;
                background-repeat: no-repeat;
                opacity: 1;
                filter: alpha(opacity=100); /* ie */
                -moz-opacity: 1; /* mozilla */
            }

Add a variable named "displayOverlay" as global in javascript

var displayOverlay = false;

Add the following piece of code in $(document).ready();

$('body').children().ajaxStart(function(){
    if(displayOverlay){
        $('.ajax-loading').show();
    }
});

$('body').children().ajaxStop(function(){
    displayOverlay = false;
    $('.ajax-loading').hide();
});

Right before ajax calls set displayOverlay to true

$('a.viewDetails').click(function (){
    displayOverlay = true;
    $('#viewTab').load($(this).attr('href'));
    return false;
})