Prevent $ .ajaxStart () from executing during jquery-ui autocomplete

Question

I am using jquery-ui autocomplete on the page I am creating. On the same page, I have several ajax events happening. During other ajax events, I add an overlay to my page so that all links on the website are no longer available to the user. I do not want this to happen during autocomplete.

autofill:

$(function() { $( "#search_input" ).autocomplete({ source: '/search_autocomplete/',}); }); 

Ajax:

 $.ajax({ url: "/ajax_login/", login_user: $("#login_user").val(), password: $("#login_password").val(), }); 

ajaxStart:

 $("#loading_gif").ajaxStart(function() { $("#overlay").show(); $(this).show(); }); 

To prevent the ajaxstart function from executing during ajax events where it is not needed. I add

 global:false, 

to appropriate ajax functions. How can I do something like this during autocomplete without changing the jquery-ui source?

Answer 1

To do this, you must omit the abbreviated call using source and modify the call as follows.

 $('#search_input').autocomplete({ source: function (request, response) { var DTO = { "term": request.term }; //var DTO = { "term": $('#search_input').val() }; $.ajax({ data: DTO, global: false, type: 'GET', url: '/search_autocomplete/', success: function (jobNumbers) { //var formattedNumbers = $.map(jobNumbersObject, function (item) { // return { // label: item.JobName, // value: item.JobID // } //}); return response(jobNumbers); } }); } //source: '/search_autocomplete/' }); 

The advantage of this long-term method is

• You can pass several parameters. Also, the parameter name should not be a term.
• An array of strings is expected in short notation. Here you can also return an array of objects.

Answer 2

If you want $.ajax() work in a certain way most of the time, but now all the time, you probably shouldn't change your default behavior.

I recommend creating a function that wraps an ajax request in a function that enables and disables overlay at appropriate times. Call this function in which you want to use the overlay, and use the usual $.ajax() for your autocomplete.

Answer 3

I would agree that the best solution is naveen. In my case, the large amount of code that needed to be changed was not cost-effective, since we were in the process of rewriting, and we needed a short-term solution.

You can override the ajax call in the jQuery user interface, I copied the source to call the _initSource function that processes the AJAX request. Then they simply added global: false to the $ .ajax option. The code here is based on jquery-ui 1.9.2, you may have to find the right source for your version.

 $.ui.autocomplete.prototype._initSource = function () { var array, url, that = this; if ( $.isArray(this.options.source) ) { array = this.options.source; this.source = function( request, response ) { response( $.ui.autocomplete.filter( array, request.term ) ); }; } else if ( typeof this.options.source === "string" ) { url = this.options.source; this.source = function( request, response ) { if ( that.xhr ) { that.xhr.abort(); } that.xhr = $.ajax({ url: url, data: request, dataType: "json", global: false, success: function( data ) { response( data ); }, error: function() { response( [] ); } }); }; } else { this.source = this.options.source; } };