JS/Ajax Woes

[permafrost91]

The function below should return (to another function drawing the calendar) how many events are in the calendar for the given date. Right now, I have the problem that num_events does not get changed inside the onreadystatechange function(). I arbitrarily initialized num_events to 10 and said to set num_events to 0 inside function() but get_calendar_events() always returns 10. If you uncomment the alert() inside the function(), it displays "0". Nevermind the URL, I left that out because it's too long and that part of the script works (I can alert(calendar_ajax.responseText) and it shows the correct number of events).

Where am I going wrong here? Why can I not reassign num_events from inside function()?

I also tried defining num_events outside get_calendar_events() to make it global but function() still can't change its value.

Thank you for your help, it is greatly appreciated!

function get_calendar_events(day, month, year)
{
     // arbitrarily set to 10 while debugging this script
     var num_events = 10;
     var calendar_ajax = new_ajax_object();
     if( calendar_ajax )
     {
          calendar_ajax.onreadystatechange = function(){
               if( calendar_ajax.readyState == 4 )
               {
                    // should be set to 0 for all dates right now
                    num_events = 0;
                    // alert(num_events);
               }
          }
          var URL = '';
          calendar_ajax.open('GET', URL, true);
          calendar_ajax.send(null);
     }
     else
     {
          alert("Unable to retrieve calendar data.");
     }
     // num_events = 10 (but should be 0!!)
     return num_events;
}
 

[pbmods]

Heya, permafrost91. Welcome to TSDN!

The first 'A' in AJAX stands for 'Asynchronous', which means that your script won't wait for the AJAX request to return before going on to the next statement in your code.

Your code will send off the AJAX request, and then immediately go on to return num_events, which is still 10 at that point.

If you were to try to access the value of num_events, say, 10 seconds later, the value should be set back to 0.

The only reliable solution would be to force your script to 'wait' for the AJAX call to return. The easiest way to do that would be to append the code you want to execute as a callback function:

function get_calendar_events(day, month, year, callback) {
.
.
.
 if( calendar_ajax )
     {
          calendar_ajax.onreadystatechange = function() {
               if( calendar_ajax.readyState == 4 )
               {
                    // should be set to 0 for all dates right now
                    num_events = 0;
                    // alert(num_events);
 
                    if(callback && (callback.constructor == Function))
                        callback(num_events);
               }
          }
          var URL = '';
          calendar_ajax.open('GET', URL, true);
          calendar_ajax.send(null);
     }
.
.
.
}
 
get_calendar_events(month, day, year, function(eventCount) {
    alert(eventCount);
});    // Alerts '0' after a slight delay.
 

[permafrost91]

Thanks for your help! The only problem is that the current design of the site won't allow this: get_calendar_events() is already the callback function. Any other ideas?

[pbmods]

Heya, permafrost91.

Hm. That's going to be tricky. Adding a callback to get_calendar_events is probably the only really good way to do it (note that with the code I posted, you could also *not* specify a value for callback, and you would not get an error).

If you're calling get_calendar_events as a callback function already, you could instead pass an anonymous function.

As an example, if you are already doing this:

var id = 6, name = 'Events';
call_some_other_function(id, name, get_calendar_events);

Try doing this instead:

var id = 6, name = 'Events';
call_some_other_function(id, name, function(day, month, year) {
    get_calendar_events(day, month, year, function() {
        alert(num_events);
    });
});

In this case, instead of passing get_calendar_events as the callback, you're passing an anonymous function that calls get_calendar_events with the extra callback argument.