Waiting for AJAX request response

Question

I have the following function that stores some data in ABC.PrintReport.reportData. I grab the data with AJAX requests. I then want to print the data in the new window that I open at the end of the getKeyData function.

However, by the time the window opens, the AJAX requests have not returned the data, so I get errors about undefined properties. What is the solution to this?

getKeyData: function () {
    for (var key in ABC.PrintReport.keyList) {
        k = ABC.PrintReport.keyList[key].Report_Key;
        ABC.PrintReport.reportData[k] = null;
        (function(index) {
            Ext.Ajax.request({
                url: ABC.Core.servicePath + '/task/' + ABC.PrintReport.processInstanceID + '/report/' + ABC.PrintReport.keyList[key].Report_Key + '?portalID=' + ABC.Core.portalID,
                success: function (response) {
                    ABC.PrintReport.reportData[index] = Ext.JSON.decode(response.responseText)[0];
                }
            });
        })(k);
    }
    window.open(location.pathname + 'resources/printreport.html');
},

Why not open it in the `success` function of your Ajax Request? — Gerben Jacobs, Mar 18 '14 at 15:07
there are multiple ajax requests. Could be anything between 3 to 6. The requests are in a for loop. — hermann, Mar 18 '14 at 15:08

score 1 · Answer 1 · edited May 23 '17 at 12:20

What about using deffered objects and promises? Though I don't see a method all() that should help you resolve your problem, as shown here.

I suggest using a Q library, see the Combination section.

The all function returns a promise for an array of values. When this promise is fulfilled, the array contains the fulfillment values of the original promises, in the same order as those promises.

Then you do:

Q.allSettled(promises)
.then(function (results) {
    window.open(location.pathName + 'recources/printreport.html');
});

It's more clean than using a counter of already succeeded requests.

score 0 · Accepted Answer · answered Mar 18 '14 at 15:11

Even though there are a variable number of requests going on, you can keep track of them and open the window in the success method when the last request completes.

getKeyData: function () {
    var total = ABC.PrintReport.keyList.length;
    var loaded = 0;
    for (var key in ABC.PrintReport.keyList) {
        k = ABC.PrintReport.keyList[key].Report_Key;
        ABC.PrintReport.reportData[k] = null;
        (function(index) {
            Ext.Ajax.request({
                url: ABC.Core.servicePath + '/task/' + ABC.PrintReport.processInstanceID + '/report/' + ABC.PrintReport.keyList[key].Report_Key + '?portalID=' + ABC.Core.portalID,
                success: function (response) {
                    ABC.PrintReport.reportData[index] = Ext.JSON.decode(response.responseText)[0];
                    loaded++;
                    if (loaded == total) {
                        window.open(location.pathname + 'resources/printreport.html');
                    }
                }
            });
        })(k);
    }
},

score 0 · Answer 3 · answered Mar 18 '14 at 15:13

0

Or you can use async lib, to create a parallel ajax calls and then call your callback with window.open when all AJAX request are done.

answered Mar 18 '14 at 15:13

4ega

1,992
2
12
15

Waiting for AJAX request response

3 Answers3