CODEWITHSUNDEEP
javascriptjquery
allthenutsandbolts
allthenutsandbolts

Reputation: 1523

using promise pattern in a loop

I need to loop thru div's and load them using the promise pattern but apparently only the data from the last call gets displayed.

Here is my code

$('div[class=ceTable]').each(function () {
    var position = $(this).position();
    gridID = $(this).attr('id')
    tableID = $(this).attr("data-tableid")
    docId = $(this).attr("data-docid")
    headerFound = $(this).data("headerFound")
    headerArray = $(this).data("headerArray")
    columnCount = $(this).data("columnCount")

    $.ajax({
        type: "GET",
        dataType: "json",
        url: "ajaxGetTableData",
        data: {
            'docID': docId,
            'tableID': tableID
        },

        beforeSend: function () {
            $('#' + gridID).block({
                css: {
                    border: 'none',
                    padding: '15px',
                    backgroundColor: '#36a9e1',
                        '-webkit-border-radius': '10px',
                        '-moz-border-radius': '10px',
                    opacity: 5,
                    color: '#fff'
                },
                message: 'Loading Grid'
            });
        }

    }).done(function (data) {
        console.log(data, "ajaxGetTableData")
        ceFeature.generateGridFromJSONObject({
            tabledata: data,
            columnCount: columnCount,
            gridID: gridID,
            headerArray: headerArray,
            headerFound: headerFound
        })
        $('#' + gridID).unblock();
    })

Upvotes: 0

Views: 168

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

Using a closure:

$('div[class=ceTable]').each(function () {
    var position = $(this).position();    
    gridID = $(this).attr('id')
    tableID = $(this).attr("data-tableid")
    docId = $(this).attr("data-docid")
    headerFound = $(this).data("headerFound")
    headerArray = $(this).data("headerArray")
    columnCount = $(this).data("columnCount")
    (function (columnCount, gridID, headerArray, headerFound) {    
        $.ajax().done();
    }(columnCount, gridID, headerArray, headerFound));
});

Upvotes: 2

Bergi
Bergi

Reputation: 664538

Your variables are implicitly global (as you forgot the var keyword) so each iteration will overwrite the previous values. The async callbacks will only access the last one then - the typical creating functions in a loop problem.

To fix this, make the variables local to the function (the each callback) so that it makes the success callback a closure with the respective variables in its scope:

$('div[class=ceTable]').each(function () {
    var position = $(this).position(),
        gridID = $(this).attr('id'),
        tableID = $(this).attr("data-tableid"),
        docId = $(this).attr("data-docid"),
        headerFound = $(this).data("headerFound"),
        headerArray = $(this).data("headerArray"),
        columnCount = $(this).data("columnCount");
    …

Upvotes: 3

Related Questions