Question

I have the following code to ping a list of computers with Jquery and asp.net.

function ping() {
    $('#progress').css("display", "");
    $('.comp').each(function () {
        var $computer = $(this);            
        $.getJSON('pingcomputer.aspx', { computer: $(this).attr("rel") }, function (data) {
            if (data.Status == '1') {
                $($computer).attr("src", "ok.png");
            }
            else {
                $($computer).attr("src", "nok.png");
            }
        })
    })
    $('#progress').css("display", "none");
}

The pinging works fine.
Before the ping start I want to make #progress visible (an image)
After all computers are pinged I want to hide it again.

The problem is that the #progress image is immediately hidden when the function is called.
How can I detect when all “pingcomputer.aspx” pages have finished loading?

Answer 1

Add a counter which checks that as many requests have been completed as there was started:

function ping() {
    $('#progress').css("display", "");
    var count = 0,
        total = $(".comp").length;
    $('.comp').each(function () {
        var $computer = $(this);     

        $.getJSON('pingcomputer.aspx', { computer: $(this).attr("rel") }, function (data) {
            count++;     
            if (data.Status == '1') {
                $($computer).attr("src", "ok.png");
            }
            else {
                $($computer).attr("src", "nok.png");
            }
            if (count==total) $('#progress').css("display", "none");
        })
    })

}