Question

GET_DATA()

GET_DATA() contains this:

    var xhr;
    ...
    function get_data( phrase ) {
        xhr = function get_data( phrase ) {
        $.ajax({
            type: 'POST',
            url: 'http://intranet/webservice.asmx/GetData',
            data: '{phrase: "' + phrase + '"}',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function( results ) {
                $("#div1").empty();

                if( results.d[0] ) {
                    $.each( results.d, function( index, data ) {
                        $("#div1").append( data.Group + ':' + data.Count + '<br />' );
                    });
                } else {
                    alert( "results.d does not exist..." );
                }
            },
            error: function(xhr, status, error) {
                $('#spanLoading').empty();

                 var err = eval("(" + xhr.responseText + ")");
                 alert(err.Message) ;
            }
        });
    }

    function get_default() {
        $('#div1').empty().append("default stuff goes here");
    }

---

UPDATE 2 CODE

I’ve also tried this, which doesn’t work either, no error messages, just returns the results of when the textbox had 2 characters when it finishes processing even if I delete everything before the process has finished:

$('#TextBox1').keyup( function() {
    if(xhr && xhr.readystate != 4){
        xhr.abort();
    }

    if ($("#TextBox1").val().length >= 2) {
        get_data( $("#TextBox1").val() );
    } else {
        get_default();
    }
});

---

UPDATE 1 CODE:

$('#TextBox1').keyup( function() {
    if ($("#TextBox1").val().length >= 2) {
        get_data( $("#TextBox1").val() );
    } else {
        if(xhr)
        {
            xhr.abort();
        }

        get_default();
    }
});

---

ORIGINAL QUESTION:

I have the following code:

$('#TextBox1').keyup( function() {
    if ($("#TextBox1").val().length >= 2) {
        get_data( $("#TextBox1").val() );
    } else {
        get_default();
    }
});

This has a slight glitch where if I type something really fast and then I delete it equaly fast, I see the data from get_default() flash on the screen, then it gets replaced by a previous ajax request where the value in the textbox was 2 which had not finished processing.

So basically, what I think is happening is that when the textbox has 2 characters in it, the ajax request starts which takes a second or 2. While this is happening, if I delete the 2 characters, I see the get_default() being successful, but it seems to replace it with the ajax data when the ajax data finishes.

How do I stop this from happening?

Answer 1

Thank you for posting get_data.

The reason why your AJAX call is not getting aborted is that xhr is not defined in the appropriate (window) scope; therefor, xhr.abort() doesn’t do anything (and quite probably throws an error if you take a look at your console).

Please try the following:

var xhr = false;

function get_data( phrase ) {
    xhr = $.ajax({ /* ... etc */
}

The rest should work as is.