CODEWITHSUNDEEP
jquery-uijquery
jarred
jarred

Reputation: 755

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

I'm using jquery-ui autocomplete on a page I'm creating. On the same page I have some ajax events going on. During the other ajax events I'm adding an overlay to my page, so that all the links on the website aren't clickable anymore for the user. I don't want that to happen during the autocomplete.

autocomplete:

$(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 being executed during the ajax events where it's not necessary. I add

global:false,

to the corresponding ajaxfunctions. How can I do something similar during the autocomplete without changing the jquery-ui source?

Upvotes: 6

Views: 1173

Answers (3)

Watertower
Watertower

Reputation: 11

I would agree that naveen's answer is the best solution. In my case the vast amount of code that would require changing wasn't cost effective as we're in the process of doing a re-write and we needed a short term solution.

You can override the ajax call in jQuery UI, I copied the source for the _initSource function call that handles the AJAX request. Then simply added the global: false to the $.ajax options. The code here is based on jquery-ui 1.9.2, you may have to find the correct 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;
    }
};

Upvotes: 1

codeandcloud
codeandcloud

Reputation: 55210

For this you have to omit the shorthand call with source and change the call like this.

$('#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-hand method is

  1. You can pass more than one parameter. Also the parameter name should not have to be term.
  2. The short-hand notation expects an array of strings. Here you could return an array of objects also.

Upvotes: 6

Michael Slade
Michael Slade

Reputation: 13877

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

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

Upvotes: 1

Related Questions