Kill an ajax process

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?

Possibly a duplicate of http://stackoverflow.com/questions/446594/kill-ajax-requests-using-javascript-using-jquery. Have a look there. — Tariqulazam, Mar 29 '12 at 10:55
I've tried that and it's giving me an Method=Post, Status=(canceled) error message if I go to fast when deleting. If I delete 1 character at a time and allow each process to finish, I don't get the error message. Please see the updated code above. — oshirowanen, Mar 29 '12 at 11:09
Would you please give us a glimpse at your `get_data` function? — vzwick, Mar 29 '12 at 11:29
@vzwick, I spoke to soon, I am getting lots of errors with this method. If the phrase = john then then as soon as I finish typing it, if I click backspace 4 times to delete the characters john, it will give me 5 POST (canceled) errors in the console. — oshirowanen, Mar 29 '12 at 12:56
Why is this almost exactly the same question as [this one](http://stackoverflow.com/questions/9923905/kill-an-ajax-process)? — halfpastfour.am, Apr 05 '12 at 14:04
possible duplicate of [Method POST, Status (canceled) error message](http://stackoverflow.com/questions/9928580/method-post-status-canceled-error-message) — anubhava, Apr 05 '12 at 20:08

score 1 · Accepted Answer · answered Mar 29 '12 at 11:40

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.

answered Mar 29 '12 at 11:40

vzwick

11,008
5
43
63

I spoke to soon, I am getting lots of errors with this method. If the `phrase = john` then then as soon as I finish typing it, if I click backspace 4 times to delete the characters `john`, it will give me `5` `POST` `(canceled)` errors in the console. – oshirowanen Mar 29 '12 at 12:56

score 0 · Answer 2 · answered Mar 29 '12 at 10:54

0

Place a time delay before you execute your ajax request.

function pausecomp(ms) {
    ms += new Date().getTime();
    while (new Date() < ms){}
}

answered Mar 29 '12 at 10:54

T9b

3,312
5
31
50

Kill an ajax process

2 Answers2