jQuery 阻止 UI 异常答案

【问题标题】：jQuery block UI exceptionsjQuery 阻止 UI 异常
【发布时间】：2011-02-07 18:18:39
【问题描述】：

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

有没有办法让阻止 UI 插件不阻止 UI 进行自动完成？

【问题讨论】：

标签： jquery-ui jquery blockui

【解决方案1】：

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

【讨论】：

【解决方案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();});

这不是一个很好的解决方案，但它应该可以工作......

【讨论】：

【解决方案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);

【讨论】：

这很好，但是，我不想根据请求的某些参数显示消息，例如，如果发出请求，则请求的 url 或至少来自元素的 id请求来自哪个或 ajax 对象。必须有一些线索来确定是否显示消息。 $(this) 总是给出 document 对象。因此，无法知道我何时不想显示“请稍候...”消息。
对于这种情况，这不是一个好的答案（jquery UI 是为了不自己写任何东西，只是配置：P），but it has design patterns!!!!! :) +1

【解决方案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，但这取决于您使用的自动完成插件以及您使用它的方式。

【讨论】：

【解决方案5】：

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

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

【讨论】：

这似乎不是答案。我正在使用 $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI); 阻止所有 ajax 请求您所建议的是手动模拟相同的内容并将其排除在自动完成之外，这并不是真正的解决方案。我曾希望 blockUI 插件可以针对异常进行配置。