Question

I’m iterating through a group of html elements using a jquery each. On each iteration I invoke a get. I want to keep track of the successful gets and output a count at the end.

var numSuccessful = 0;
$('.mySelector').each(function(){
    $.get('/myCfc.cfc?method=doSomething&id=' + $(this).attr('id'), 
        function(data){
            numSuccessful++;
    });
});
alert(numSuccessful + ' successful');

The problem with this code is that the each method starts off all the get calls and then continues to the alert before completing the gets – and before the numSuccessful variable is updated. On a test run, I ended up with “0 successful” instead of “4 successful” because the alert executed too quickly. How can I get the code to wait till all the gets complete before continuing? Is there a success callback for the entire “each” statement?

Answer 1

Just replace $.get with $.ajax and set async setting to false.

$.ajax({
    url : '/myCfc.cfc',
    data : { 'method' : 'doSomething' , 'id' : $(this).attr('id') },
    async : false,
    success : function(data){
       numSuccessful++;
    }
});

By doing this script will wait until it will get response.