AjaxStart cancels jQuery autocomplete

Question

I am implementing the ajaxStart event to show the modal expression "loading".

But the big problem is that these are modal conflicts with jQuery Autocomplete, it just does not display a list of autocomplete results.

My autocomplete:

 $("#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 handle the Ajax events as follows:

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

How can I turn off this modal autofill or somehow avoid this problem?

Answer 1

If all you use $().dialog() to do is display a “Download” message. I would recommend using a different approach to show this post.

The jQueryUI dialog () function went a bit too far to display the “Download” message 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 someone finds this (like me) and really wants to know why this does not work, this is because the dialog always distracts attention from the text field when using the dialog ("open").