Rails spinoffs - Oct 2005 - Prototype Ajax.Request (onLoading and onSuccess) question

Hi,

I am working on a page that updates a calendar via Ajax.Request when the 
previous (''?
<http://luther.edu/new/?cur_month=2005-09>'') or next (''?
<http://luther.edu/new/?cur_month=2005-11>'') month links are
clicked .

http://luther.edu/new/

It seems to work fine if I don''t call anything onLoading. 

http://luther.edu/new/noonloading.php

When I do call something onLoading, sometimes it gets stuck and never 
makes it to the function I call onSuccess.  Any idea what I am doing 
wrong?  Could I be running up against a race condition?  I guess I am 
assuming that onLoading will always be called and finish before onSuccess.

Here is some of the relevant code:

var myxa = {
[...]
 ajaxUpdate: function(month) { 
  var url = ''/new/myxaajax.php'';
  var pars = ''cur_month='' + month;
  var myAjax = new Ajax.Request(url,
                                    {method:''get'',
                                     parameters: pars,
                                     onLoading: myxa.onLoading,       
                                                                         
     
                                     onSuccess: myxa.updateCalendar,
                                     onFailure: function(t) { 
alert(''onFailure: '' + t.statusText); myxa.removeCalendar(t);},
                                     on404: function(t) { alert(''on404:
'' + t.statusText); myxa.removeCalendar(t);}                            
         
                                    }
                                );
 },
onLoading: function() {
  var calTable =
$(''calendar'').getElementsByTagName(''table'')[0];
  var loadingDIV = myxa.getLoadingDIV(Element.getHeight(calTable));
  Element.hide(loadingDIV);
  $(''calendar'').appendChild(loadingDIV);
  Element.toggle(calTable, loadingDIV);
 },
 getLoadingDIV: function(height) {
  if (undefined == height) {
   height = 135;
  }
  var loading = document.createElement(''div'');
  loading.id = ''loadingDIV'';
  loading.style.height = height + ''px'';
  loading.style.lineHeight = height + ''px'';
  loading.innerHTML = ''Loading&#8230;'';
  return loading;
 },
 updateCalendar: function(originalRequest) {
  $(''calwrap'').innerHTML = ''<h2>Events
Calendar</h2>'' +
originalRequest.responseText;
  myxa.addListerners();
 },
 removeCalendar: function() {
  Element.remove($(''calwrap''));
 }
};

Thanks in advance,

Faust