Question

I need to count how many times a jQuery ajax call is successfully executed on each item in a list.

I started here, but then realized this won’t work because of the “asynchronous” part of ajax:

var numSuccessfullUpdates = 0;

$('#saveMyListItems').click(function (event) {
    event.preventDefault();

    $('ul#myList li').each(function () {
        $.ajax({
            url: '[my_url]',
            type: "POST",
            data: {
                // [data block here, not relevant to question]
            },
            success: function () {
                numSuccessfullUpdates++;
            }
        });
    });
    if (successfullUpdates > 0){
        alert(numSuccessfullUpdates);
    }
});

Any suggestions?

Answer 1

You could use the complete handler for AJAX and count the status results until the total of results equals to the total of requests. Here is example code, also available as a jsFiddle

$('#saveMyListItems').click(function (event) {
    event.preventDefault();

    var ajaxCounter = {
        goal: $('ul#myList li').length,
        total: 0,
        success: 0,
        notmodified: 0,
        error: 0,
        timeout: 0,
        abort: 0,
        parsererror: 0
    }

    $('ul#myList li').each(function () {
        $.ajax({
            url: '/echo/html',
            type: "POST",
            timeout: 1500,
            data: {
                html: "foobar",
                delay: Math.floor(Math.random() * 5)
            },
            complete: function (jqXHR, textStatus) {
                ajaxCounter.total++
                ajaxCounter[textStatus]++;
                if (ajaxCounter.total >= ajaxCounter.goal) {
                    alert(ajaxCounter.success + ' out of ' + ajaxCounter.total);
                }
            },
        });
    });
});