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--;
}

3 comments:

  1. CSS3 is amazing... I've got all the time in the world to learn it and it's only because of that service right here - https://jetwriting.com/college-paper-writer/ I can do literally whatever I want - because all of my essays and papers are done by real professionals. I'm not an aspiring writer, but a programmer and a coder, so it's a real win-win for me. Not convinced? Go use it, then! It will answer your questions.

    ReplyDelete
  2. I love this. It is soo informative. Are you also searching for cheap assignment help we are the best solution for you. We are best known for delivering the best services to students without having to break the bank

    ReplyDelete
  3. Your blogs are great.Are you also searching for nursing pico writing help? we are the best solution for you. We are best known for delivering nursing writing services to students without having to break the bank.

    ReplyDelete

Blogroll

Popular Posts