jquery-ui - jQuery 阻止 UI 异常

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 调用的设置对象。设置对象具有正在发送的数据字符串。因此，您可以做的是附加到页面上每个 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）意味着阻止来自用户的任何输入，我建议普通的老 throbber 显示“请稍候..”并阻止（设置属性 readonly="readonly"）你的输入控件，直到 ajax 请求是完全的。

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