Question

i am working on a page wherein i have 2 nested loops, my problem is… Say for Example the current value for outer loop is 1 and shall execute 1times. and inner loop shall execute 2times. now when i alerts the value of outer loop in the inner loop, it throws me 2, on first attempt.. i dont understand how it gets 2, as my intial value is 1 and condition is <=1. and when i try to print the value of inner loop, it returns 1 on first and 0 second time… this is crazy behaviour… i am totally stuck here… below is my code.

for (i = 1; i <= _leftSectionCount; i++) //_leftSectionCount is 1{
                    $("#tdSection" + i + "Image").html("<img width='500' height='35' src='/newsletterimage/section" + i + ".gif'>");
                    var rows = $("#divLeft" + i + "tbody1 td:nth-child(1)"); // has 2 rows
                    if (rows.length > 0) {
                        $("#tdSection" + i + "Data").append("<table id='tblSection" + i + "Data'></table>");
                        $("#tblSection" + i + "Data").html("");
                    }
                    rows.each(function (index) {
                        $.ajax({
                            type: "POST",
                            url: "AjaxMethods.aspx/GetArticleDetails",
                            data: "{'articleId':'" + $(this).text() + "'}",
                            dataType: "json",
                            contentType: "application/json",
                            success: function (data) {
                                var results = data.d;
                                alert("$(#tblSection" + i + "Data')"); // this returns me 2.
                                 alert("$(#tblSection" + index + "Data')"); // this returns me 1 and 0.
                                $("#tblSection" + i + "Data").append("<tr><td>" + results[0].Title + "</td></tr>");
                            },
                            error: function (data) { alert(data.responseText); }
                        });
                    })

                    WriteToFile();
                }

Anyone please help me i am totally stuck here.

Answer 1

Your responses are coming back async, so i will be whatever it is, when it returns, change to async=false to keep i and index in sync(no pun):

rows.each(function (index) {
    $.ajax({
    type: "POST",
    url: "AjaxMethods.aspx/GetArticleDetails",
    data: "{'articleId':'" + $(this).text() + "'}",
    dataType: "json",
    async: false, //HERE
    contentType: "application/json",
    success: function (data) {
        var results = data.d;
        alert("$(#tblSection" + i + "Data')"); // this returns me 2.
         alert("$(#tblSection" + index + "Data')"); // this returns me 1 and 0.
        $("#tblSection" + i + "Data").append("<tr><td>" + results[0].Title + "</td></tr>");
    },
    error: function (data) { alert(data.responseText); }
    });
})