ajaxStart cancels jQuery Autocomplete

javascript, jquery, jquery-ui

Solution

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();
});

Problem

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?

Original source