Question

我正在使用JQuery UI插件blockUI来阻止每个ajax请求的UI。它就像一个魅力，但是，当我正在进行ajax调用以获取自动完成建议项时，我不想阻止UI（或者至少不显示“请稍候”消息）。我怎么做？我正在使用jquery自动完成插件来实现自动完成功能。

有没有办法告诉阻止UI插件不阻止自动填充功能的UI？

Answer 1

$('#myWidget').autocomplete({
    source: function(data, callback) {
        $.ajax({
            global: false,  // <-- this is the key!
            url: 'http:...',
            dataType: 'json',
            data: data,
            success: callback
        });
    }
});

Answer 2

嗯，看起来是jquery中缺少的功能:) 您可以使用全局标志来指示它是否是自动完成调用并将其包装在常规自动完成函数中

    var isAutoComplete  = false;
    function autoComplete(autocomplete){
    isAutoComplete = true;
    if($(autocomplete).isfunction())
       autocomplete();
    }

        $(document).ajaxStart(function(){if(!isAutoComplete)$.blockUI();}).ajaxStop(function(){isAutoComplete = false;$.unblockUI();});

这不是一个好的解决方案，但它应该有用......

Answer 3

尝试使用装饰器

$.blockUI = function() {
    if (condition_you_dont_want_to_block) {
        return;
    }
    return $.blockUI.apply(this, arguments);
}

或者您可以编写更智能的块功能

function my_blockUI() {
    if (condition_you_dont_want_to_block) {
        return;
    }
    $.blockUI();
}
$(document).ajaxStart(my_blockUI).ajaxStop($.unblockUI);

Answer 4

您可以通过添加到全局jQuery事件处理程序来将blockUI设置为适用于页面上的所有函数。为了确保在自动完成ajax调用时不调用它，我们必须确定该调用是否是自动完成调用。问题是这些全局函数没有那么多可用的信息。但是ajaxSend确实得到了一些信息。它获取用于进行ajax调用的设置对象。 settings对象具有要发送的数据字符串。因此，您可以执行的操作是附加到页面上每个ajax请求中的每个数据字符串，如：

&notautocomplete=notautocomplete

例如：

$.ajax({data:"bar=1&foo=2&notautocomplete=notautocomplete"})

然后我们可以将此代码放在您的文档就绪部分之前：

$(document).ajaxSend(
    function (event, xhr, ajaxOptions){
     if(ajaxOptions.data.indexOf("notautocomplete") !== -1){
         $.blockUI;
     }
});
$(document).ajaxStop($.unblockUI);

当然，另一个更好的想法是在自动完成请求中查找唯一的内容，例如url，但这取决于您使用的自动完成插件以及如何使用它。

Answer 5

使用模态块（块UI）意味着阻止来自用户的任何输入，我建议普通的老悸动者显示'请等待......'并阻止（设置属性readonly =“readonly”）你的输入控件直到ajax请求已完成。

上面的UI似乎是自相矛盾的！

jQuery阻止UI异常

5 个答案: