CODEWITHSUNDEEP
javascriptjqueryblockuijquery-blockui
Khadim Ali
Khadim Ali

Reputation: 2598

Blocking the element for UI interaction

I wanted to block the div for UI interaction while making a server side call and unblock it once the program flow returns to the client side.

If I don't include the unblock statement it goes into blocking after returning from server side process. Seems that UI blocking activates once the click function ends. So it ignores the blocking when I issue both block and unblock statements in the same function. If this is the case? Then how could I produce the desired result. (i.e. blocking the screen/element before calling some process and unblock on the flow returns)

Following is my sample code:

$("#button").click(function () {

        //$("#sidebar").block({
        //    message: '<h1>1Processing</h1>',
        //    css: { border: '3px solid #a00' }
        //});

        $.blockUI({
            message: '<h1>2Processing</h1>',
            css: { border: '3px solid #a00' }
        });

        var result = DoSomeServerSideProcessing();

        //$("#sidebar").unblock();
        $.unblockUI();
});


Additional Information:

The DoSomeServerSideProcessing() uses XmlHttpRequest() to access server side. That I would not like to change to jQuery ajax call as it is tested and matured code block and is being re-used from various points in the code.

Example code:

function DoSomeServerSideProcessing()
{
    var dllUrl=" ... "
    var result = httpGet(dllUrl);
}

function httpGet(theUrl) {
    var xmlHttp = null;

    xmlHttp = new XMLHttpRequest();
    xmlHttp.open('GET', theUrl, false);
    xmlHttp.setRequestHeader('Content-Type', 'text/xml');
    xmlHttp.send(null);
    var strHtml = xmlHttp.responseText;
    xmlHttp = null;

    return strHtml;
}


Update:

I tried converting the XmlHttpRequest() to $.ajax(). Still it is not blocking the UI. Code below:

(Tried both with and without beforeSend/complete handlers.

//$.blockUI();

//alert("before ajax call")

$.ajax({
    url: theUrl,
    type: "GET",
    dataType: "text",
    async: false,
    beforeSend: function () {
        $.blockUI();
    },
    complete: function () {
        $.unblockUI();
    },
    success: function (result) {
        strHtml = result;
        //$.unblockUI();
    }
});

//alert("after ajax call")

Upvotes: 1

Views: 1634

Answers (2)

WICS2 SRC
WICS2 SRC

Reputation: 216

Assuming 

DoSomeServerSideProcessing()

is an AJAX call with a callback, and the .blockUI and .unblockUI functions are already defined somewhere else, I'd do this:

    function DoSomeServerSideProcessing(url,callback){
        $.post(url,function(data){
            $.unblockUI();
            callback(data);
        })
    }

    $("#button").click(function () {

        $.blockUI({
            message: '<h1>2Processing</h1>',
            css: { border: '3px solid #a00' }
        });

        var result = DoSomeServerSideProcessing(url,function(data){

        });

    });

Because you'd want the UnblockUI function to be called after the data is returned.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

You will need to put the unBlock method inside the success callback of your DoSomeServerSideProcessing ajax call.

AJAX is asynchronous so while it is exchanging data with server the remainder of your code will run

Upvotes: 1

Related Questions