阻止元素进行UI交互

Blocking the element for UI interaction

本文关键字：UI 交互 元素      更新时间：2023-09-26

我想在进行服务器端调用时阻塞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。下列代码:

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

假设

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函数

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

AJAX是异步的，所以当它与服务器交换数据时，其余的代码将运行

相关文章：