ajaxStart cancels jQuery Autocomplete

Question

I'm Implementing the ajaxStart event to show a modal saying "loading".

But, the big problem is this modal conflicts with jQuery Autocomplete, just doesn't show the list of results on autocomplete.

My autocomplete is:

$("#txtInput").autocomplete({
    minLength: 3,
    source: "autocomplete" , 
    multiple: true,
    select: function( event, ui ) {
        $( "#cie" ).val( ui.item.label );
        $("#id").val(ui.item.id);
        $("#addItem").prop('disabled', false);
        return false;
    }
});

And I'm handling Ajax events with this:

$("#dlgWait").ajaxStart(function(){                    
    $("#dlgWait").dialog('open');    
});

$("#dlgWait").ajaxComplete(function(){
    $("#dlgWait").dialog('close');    
});

How I can disable this modal for autocomplete or somehow avoid this problem?

Answer 1

If all you are using $().dialog() to do is show a message saying "Loading" I would recommend using another approach to show that message.

The jQueryUI dialog() function is a bit overkill just to display the message "Loading" when you could do something like this:

HTML

<div class="dlgLoading" id="dlgWait">Loading...</div>

CSS

div.dlgLoading {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color:rgba(255,255,255,0.95);
    text-align: center;
    display: none;
    z-index: 100;
}

JS

$('#ajax').ajaxStart(function(){
    $('#dlgWait').show();
});
$('#ajax').ajaxComplete(function(){
    $('#dlgWait').hide();
});

Answer 2

If anyone finds this (like I did) and really wants to know why this does not work it is because the dialog box always takes focus away from the text box when you use dialog("open").