jquery ajax - second array push not working

Question

i have this code that needs to populate an array that will be used on some diagramming tools. so there's a button that will show the results and a checkbox that enables the user to add another set of rows to the array. i use .push() for the array and it works. now, the problem is that the second push on my second ajax calls did not add the data to the array. here's my code:

$.ajax({
    type: "POST",
    url: "Default.aspx/GetSubCategorySalesPerTerritory",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {        
        $.each(response.d, function (i, val) {            
            var values = new Array(val.From, val.To, val.Thickness);            
            rows.push(values); //this one works
        });        

        if ($('#chkPromotion').is(":checked")) {            
            $.ajax({
                type: "POST",
                url: "Default.aspx/AddPromotion",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {                    
                    $.each(data.d, function (i, val) {                        
                        var values = new Array(val.From, val.To, val.Thickness);                        
                        rows.push(values); //this one fails                        
                        alert("pushed");
                    });                    
                },
                failure: function (data) {
                    alert(data.d);
                }
            });            
            drawChart(rows);
        } else {            
            drawChart(rows);
        }        
    },
    failure: function (response) {
        alert(response.d);
    }
});

i really don't know why it fails. what happens is that even if the condition is satisfied and the second ajax call succeeds, the contents of the array rows is still the first array push. what's the problem with the code?

Open the developer tool and check the response in netowrk section. from that you can make sure backend called and get the right data. It can be a cache issue. add cache: false, to ajax request and check. — Seminda, Aug 28 '14 at 07:26
i think it is called successfully. i've tried putting the concatenated values of the response on an alert box and it is showed. i also tried putting it in another array, but still not successful. — DustineTheGreat, Aug 28 '14 at 07:31
Is this is what you expected out put http://jsfiddle.net/e8Nj3/25/ — Seminda, Aug 28 '14 at 07:43
Why do you have a POST request and `contentType: "application/json; charset=utf-8"` when you aren't sending any data to the server? — Quentin, Aug 28 '14 at 08:33
i am sending data on the server, i just removed it for the purpose of posting it here. sorry. — DustineTheGreat, Aug 28 '14 at 08:59

score 0 · Accepted Answer · answered Aug 28 '14 at 08:31

the result you are getting is actually expected because of async nature of ajax

you should call the method within the success callback of the second ajax call like this

$.ajax({
    type: "POST",
    url: "Default.aspx/GetSubCategorySalesPerTerritory",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {        
        $.each(response.d, function (i, val) {            
            var values = new Array(val.From, val.To, val.Thickness);            
            rows.push(values); //this one works
        });        

        if ($('#chkPromotion').is(":checked")) {            
            $.ajax({
                type: "POST",
                url: "Default.aspx/AddPromotion",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {                    
                    $.each(data.d, function (i, val) {                        
                        var values = new Array(val.From, val.To, val.Thickness);                        
                        rows.push(values);
                    }); 
                    drawChart(rows); // here
                },
                failure: function (data) {
                    alert(data.d);
                }
            });            
        } else {            
            drawChart(rows);
        }        
    },
    failure: function (response) {
        alert(response.d);
    }
});

this actually answers my question. thank you! but i don't understand this 'async nature' of ajax though. — DustineTheGreat, Aug 28 '14 at 09:01
@DustineTheGreat hope this would give you the idea of async nature of ajax http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — code-jaff, Aug 28 '14 at 09:05

jquery ajax - second array push not working

1 Answers1