jQuery block UI exceptions

Question

I am using JQuery UI plugin blockUI to block UI for every ajax request. It works like a charm, however, I don't want to block the UI (Or at least not show the "Please wait" message) when I am making ajax calls to fetch autocomplete suggest items. How do I do that? I am using jquery autocomplete plugin for autocomplete functionality.

Is there a way I can tell the block UI plug-in to not block UI for autocomplete?

Ginnygino

Answer 1

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

Berthoud

Answer 2

Hm, looks to be a missing feature in jquery :) You could use a global flag to indicate if it is a autocomplete call and wrap it in a general autcompletefunction

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

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

It's not a nice solution but it should work...

Alonzoaloof

Answer 3

try using a decorator

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

or you can write your own block function that is smarter

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

Pope

This is nice however, I would want to not show the message based on certain parameters of the request, like say, the url to which is request if being made or at least the id of the element from which the request originated or the ajax object. There has to be some clue that determines whether to show the message or not. $(this) always gives the document object. Hence there is not way to know when would I want to not show the "Please wait..." message. – Ginnygino

Its not a good answer for this case (jquery UI is for not writing anything yourself, just configuring :P), but it has design patterns!!!!! :) +1 – Colon

Answer 4

You can set blockUI to work for all functions on the page by adding to a global jQuery event handler. To make sure it doesn't get called on autocomplete ajax calls we have to determine if the call is an autocomplete call or not. The problem is that these global functions don't have that much information available to them. However ajaxSend does get some information. It gets the settings object used to make the ajax call. the settings object has the data string being sent. Therefore what you can do is append to every data string in every ajax request on your page something like:

&notautocomplete=notautocomplete

For example:

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

Then we can put this code in your document ready section before anything else:

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

Of course the other better idea would be to look for something unique in the auto complete requests, like the url, but that depends on which autocomplete plug-in you are using and how you are using it.

Shooter

Answer 5

using a modal block (block UI) means blocking any inputs from user, I'd suggest plain old throbber to show 'Please wait..' and to block ( set attributes readonly="readonly" ) ur input controls till the ajax request is complete.

The above UI seems to be self conflicting!

Informal

That does not seem to the answer. I'm blocking all ajax requests using $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI); What you have suggested is simulating the same manually and excluding it for autocomplete which is not really the solution. I had hoped that the blockUI plugin can be configured for exceptions. – Ginnygino