代码之家  ›  专栏  ›  技术社区  ›  Chirantan

jquery块UI异常

  •  9
  • Chirantan  · 技术社区  · 15 年前

    我正在使用jquery用户界面插件 blockUI 为每个Ajax请求阻塞UI。但是,当我调用Ajax来获取自动完成的建议项时,它就像一个魅力,我不想阻塞UI(或者至少不显示“请等待”消息)。我该怎么做?我正在使用jquery autocomplete插件实现自动完成功能。

    有没有一种方法可以告诉block-ui插件不要自动完成block-ui?

    5 回复  |  直到 15 年前
        1
  •  21
  •   malsup    15 年前
    $('#myWidget').autocomplete({
        source: function(data, callback) {
            $.ajax({
                global: false,  // <-- this is the key!
                url: 'http:...',
                dataType: 'json',
                data: data,
                success: callback
            });
        }
    });
    
        2
  •  2
  •   CodeWeasel    15 年前

    嗯,似乎是jquery中缺少的一个功能:) 您可以使用一个全局标志来指示它是否是一个自动完成调用,并将其包装在一个通用的autcomplete函数中。

        var isAutoComplete  = false;
        function autoComplete(autocomplete){
        isAutoComplete = true;
        if($(autocomplete).isfunction())
           autocomplete();
        }
    
            $(document).ajaxStart(function(){if(!isAutoComplete)$.blockUI();}).ajaxStop(function(){isAutoComplete = false;$.unblockUI();});
    

    这不是一个很好的解决方案,但它应该是有效的…

        3
  •  1
  •   Jiaaro    15 年前

    尝试使用装饰器

    $.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);
    
        4
  •  1
  •   Adam    15 年前

    通过添加到全局jquery事件处理程序,可以将blockui设置为适用于页面上的所有函数。为了确保它不会在autocomplete-ajax调用中被调用,我们必须确定调用是否是autocomplete调用。问题是这些全局函数没有那么多可用信息。然而,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
  •  0
  •   ruturaj    15 年前

    使用模式块(block-ui)意味着阻止用户的任何输入,我建议使用普通的旧throber来显示“请等待…”,并阻止(设置属性readonly=“readonly”)您的输入控件,直到Ajax请求完成。

    上面的用户界面似乎是自相矛盾的!