Calling ASP.NET Webservice in javascript loop causes problems

Question

I am building a calendar in javascript / asp.net.

When I print out the calendar, I want to check for every day whether there are items (appointments) to display. Here is part of the function:

for (var i = 1; i <= monthdays[month - 1]; i++) {
        curnum++;
        td = tr.insertCell(-1);
        td.style.height = "95px";
        td.style.width = "131px";
        html = "<div id=\"divday" + year + "" + month + "" + i + "\" style=\"position:relative; left:0px; top:0px; width130px; height:95px; background-color:" + colors[i % 2] + "; cursor:pointer; \" onclick=\"openDay(" + year + "," + (month < 10 ? "0" + month : month) + "," + (i < 10 ? "0" + i : i) + ")\">";
        html += "<div class=\"blackl\" style=\"position:absolute; left:100px; top:0px; width:30px; height:20px; text-align:right; \">" + i + "</div>";
        html += "</div>";
        td.innerHTML = html;
        if (curnum == 7) {
            tr = tbl.insertRow(-1);
            curnum = 0;
        }
        if(i == 1) RCalendar.GetCalendarEvents(agentid, year, month, i, function (result) { setCalendarEvents(year, month, i, result) });

The last line should not have if (i == 1) it is just for debugging. I would want to call the webservice and write the items for evert day (i).

Here is the callback function:

function setCalendarEvents(y, m, d, result) {
    var daydiv = document.getElementById("divday" + y + m + d);
    for(var i = 0; i < result.length; i++) {
        var thiscalendaritem = result[i];
        daydiv.innerHTML += makeCalendarItem(thiscalendaritem);
    }
}

If I put a breakpoint where the webservice is called and in the callbackfunction, i and d are not the same. When it is called, i is 1 (obviously), but in setCalendarEvents when it is envoked, d is 31.

Answer 1

The problem that invocation of web method is asynchronous. So you have called the method, but did not wait for accomplishment.

Look at this article for make synchronous call http://kpumuk.info/asp-net/synchronous-page-method-call-in-asp-net-ajax-library/

Answer 2

1) If used async call in next line:

if(i == 1) RCalendar.GetCalendarEvents(agentid, year, month, i, 
                                       function (result) {
                                           setCalendarEvents(year, month, i, result)
                                       });

Try to change to like this, for example:

if(i == 1) RCalendar.GetCalendarEvents(agentid, year, month, i, 
                                       setCalendarEvents.bind(null, year, month, i));

When setCalendarEvents is called after async request is finished function setCalendarEvents receive 4 parameters (year, month, i - without changing) and result (last parameter).

2) Check yout next lines:

"<div id=\"divday" + year + "" + month + "" + i + ...

var daydiv = document.getElementById("divday" + y + m + d);

For year: 2012, month: 1, day: 12 - id is equals to divday2012112

For year: 2012, month: 11, day: 2 - id is equals to divday2012112 (same as in previous div)