retry jquery ajax on failure

Question

I have a jquery-ajax call to an action in the controller. Sometimes the call is failing so I would like to retry again.

jQuery-ajax:

return ajax({
    url: getRootDir() + urlDoTask, // urlDoTask is something like "/Action/"
    data: { param: someParam },
    type: 'POST',
    dataType: 'json',
    tryCount: 0,
    retryLimit: 3
}).then(function (data) {
    // Do some stuff
    return ....
}, function (xhr, textStatus, errorThrown) {

    if (textStatus == 'timeout' || (xhr.responseText == "" && textStatus == 'error')) {
        this.tryCount++; // this is always 1
        if (this.tryCount <= this.retryLimit) {
            //try again
            $.ajax(this);
            return;
        }
        return; // this point is never reached
    }
    if (xhr.status == 404) {
        // Do some stuff
    }

    return ... // I want to reach it after this.tryCount > this.retryLimit
});

function getRootDir() {
    var loc = window.location.pathname;
    var dir = loc.substring(0, loc.lastIndexOf('/'));

    return dir;
}

Above code is not working, tryCount is always 1 each time ajax-call fails. Also, once this.tryCount is greater than this.retryLimit, last return is never reached.

Ideas?

Answer 1

There are few things I see. The arguments passed in are not actually members of the object. Its just a JSON map of key/pair. So things like "this.tryCount" will not exist in the function. What you can do is put alerts in your function (or debug) and see what the values are. Probably they are undefined or 0.