Sometimes we need to block website UI while loading data in Ajax. For this purpose you might have prefer some plugins, but its easy to create this functionality with jQuery and CSS3. Here we are going  to implement this

Align loading style div or GIF to the middle of page

Make this div as absolute in position. 
Left position : calc (50% - (width of loading div/2))
Right position : calc (50vh - (height of loading div/2))
It should be displayed on top of all elements, So give maximum possible z-index.

Observe below CSS
#blockUiDiv {
    background-color: transparant;
    width:194px;
    height:194px;
    position:absolute;
    left:calc(50% - 97px);
    top:calc(50vh - 97px);
    display:none;
    z-index: 20001;
}

#blockUiDiv img {
    width:194px;
    height:194px;
}

The above loading div covers only small amount of area. But we have to block entire screen. So we need backdrop for this div. This backdrop should cover entire screen, So make this as fixed at (0,0)  with 100% width and 100vh height. z-index of this backdrop must be less than above loading div

Observe below CSS
#blockUiBackdrop {
    height: 100vh;
    width: 100%;
    z-index: 20000;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.5;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    display:none;
}

Block UI and unBlock UI

The below functions represent block and unblock UI functionalities
function blockUi() {
    $("#blockUiDiv").show();
    $("#blockUiBackdrop").show();
}

function unBlockUi() {
    $("#blockUiDiv").hide();
    $("#blockUiBackdrop").hide();
}

Trigger ajax call

This below function blocks UI before it trigger AJAX call and unblock ui after completing ajax call
// this function is for trigger ajax call
// it will block the UI at starting of ajax call and unblock UI at end of ajax call
function triggerAjaxFunction(milliSeconds) {
    blockUi();
    $.ajax({
        type: "GET",
        url: '/GetDelayedText?milliSeconds='+milliSeconds,
        success: function(data) {
            // success response
            alert(data);
        },
        error: function(data) {
            // error response
            alert(data);
        },
        complete: function(data) {
            // end of ajax call
            unBlockUi(); 
        }
    });
}

Handling multiple ajax calls

If we trigger multiple calls at a time, then it should not unblock UI for other ajax call. Take one global variable and increment it when ajax call triggered, decrement it when ajax call end. Find below for code
var blockUiVar = 0;

function blockUi() {
    if(blockUiVar == 0) {
        $("#blockUiDiv").show();
        $("#blockUiBackdrop").show();   
    }
    blockUiVar++;
}

function unBlockUi() {
    if(blockUiVar == 1) {
        $("#blockUiDiv").hide();
        $("#blockUiBackdrop").hide();
    }
    blockUiVar--;
}

0 comments:

Blogroll

Follow this blog by Email

Popular Posts