Question

I’m sure I’ve seen this before and know the answer to it but after 12 hours… my mind is complete mush.

I have a for loop in which I am trying to concatenate onto a string so that AFTER I can complete the string (thus completing a nice little table) that I had hoped to then insert into my html and show the user.

However, the things at the end of my function (after my for loop) are getting called before the for loop ever does….

function getEntries() {

$('#entryTotalsDiv').html('<img src="images/ajax-loader.gif" /> ... retrieving form totals.');

var entryTotalsTable = "<table id='entryTable' class='display' style='border:1px;'><thead><tr><th>Form Name</th><th>Hash</th><th>Entries</th></tr></thead>" +
        "<tbody>"

//Get rows ONE at a time.
var countNumber = 1;
for (var frm = 0; frm < numberOfForms; frm++) {
    $.post('ajax/getEntries.aspx',
    {
        'formNumber': frm
    },
    function (data) {
        entryTotalsTable += "<tr><td>" + data[0].formName + "</td><td>" + data[0].formHash + "</td><td>" + data[0].formEntryCount + "</td></tr>";

        //Now go and update the Form Retrieval div -- add 1 to the frm Number
        $('#formNamesDiv').html(countNumber + ' of ' + numberOfForms + ' retrieved.');
        countNumber++;            
    });
}
entryTotalsTable += "</tbody></table>";
$('#entriesDiv').html(entryTotalsTable);
//Now bind the table to the DataTables JQ script
$('#entryTable').dataTable();
$('#entryTable').show('slow');

}

If you notice, I wanted to close up the Table html at the end, but this gets called before my for loop is finished, thus screwing up my string…

?

entryTotalsTable += "</tbody></table>";
$('#entriesDiv').html(entryTotalsTable);
//Now bind the table to the DataTables JQ script
$('#entryTable').dataTable();
$('#entryTable').show('slow');

}

Answer 1

$.post is asynchronous, meaning that it’s firing off all the requests in the loop as fast as it can, and then exiting the loop. It doesn’t wait for a response. When the response comes back, your row function is then called… but by then, all the posts have been sent on their way.

See the answers to this question here…
How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

You’ll need to change from $.post to $.ajax