Question

我希望在进行服务器端调用时阻止用于UI交互的div，并在程序流返回到客户端时取消阻止它。

如果我不包含unblock语句，它会在从服务器端进程返回后进入阻塞状态。似乎一旦点击功能结束，UI阻止就会激活。所以当我在同一个函数中发出block和unblock语句时，它会忽略阻塞。如果是这样的话？那我怎么能产生预期的结果呢？（即在调用某个进程之前阻塞屏幕/元素并在流返回时取消阻塞）

以下是我的示例代码：

$("#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();
});

其他信息：

DoSomeServerSideProcessing() uses XmlHttpRequest()访问服务器端。我不想改为jQuery ajax调用，因为它经过测试和成熟的代码块，并且正在从代码中的各个点重用。

示例代码：

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

更新

我尝试将XmlHttpRequest（）转换为$ .ajax（）。仍然没有阻止UI。代码如下：

（使用和不使用beforeSend / complete处理程序尝试。

//$.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")

Answer 1

您需要将unBlock方法放在DoSomeServerSideProcessing ajax调用的成功回调中。

AJAX是异步的，因此在与服务器交换数据时，其余代码将运行

Answer 2

假设

DoSomeServerSideProcessing()

是一个带回调的AJAX调用，而.blockUI和.unblockUI函数已在其他地方定义，我这样做：

    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){

        });

    });

因为您希望在返回数据后调用UnblockUI函数。

阻止用于UI交互的元素

其他信息：

更新

2 个答案: