AHAH Event Queueing

◑ ◔
╔═╗
║▓▒░░░░░░░░░░░░░░░░░
╚═╝

Now then, I'm using AHAH to implement a dynamic interface, but I'm having trouble with multiple AHAH calls and queuing them.

while( targetQueue.length > 0 )
{
    url = queue[ 0 ];
    target = targetQueue[ 0 ];

    if( window.XMLHttpRequest )
    {
        req = new XMLHttpRequest();
        req.onreadystatechange = function() {ahahDone(target);};
        req.open("GET", url, true);
        req.send(null);
    }else if( window.ActiveXObject )
    {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if( req )
        {
            req.onreadystatechange = function() {ahahDone(target);};
            req.open("GET", url, true);
            req.send();
        }
    }
   
    if( queue.length > 1 )
        queue.shift();
   
    targetQueue.shift();

}

queue and targetQueue are arrays of urls and HTML DIV IDs, respectively, and in this particular case targetQueue.length > queue.length so I'm trying to load the same page into multiple DIVs, but instead only the last DIV gets it's innerHTML set while the others remain the same. Example onClick code:

<input type='button' value='Loading 1 source URL into two targets' onClick="javascript:queue[ queue.length ] = 'chat.php';targetQueue[ targetQueue.length ] = 'targetDiv';targetQueue[ targetQueue.length ] = 'targetDiv2';ahah( queue, targetQueue );">

oh - and the source for ahahDone()
function ahahDone(target) {
   // only if req is "loaded"
   if (req.readyState == 4) {
       // only if "OK"
       if (req.status == 200 || req.status == 304) {
           results = req.responseText;
           document.getElementById(target).innerHTML = results;
       } else {
           document.getElementById(target).innerHTML="ahah error:\n" +
               req.statusText;
       }
   }
}

Knowing me knowing you... AHAH

Take a closer look at that while loop. You're overwriting req with each iteration, so only the XMLHttpRequest of the last iteration survives.

var i=0;

while( targetQueue.length > 0 )
{
    url = queue[ 0 ];
    target = targetQueue[ 0 ];
    req = new Array();

    if( window.XMLHttpRequest )
    {
        req[i] = new XMLHttpRequest();
        req[i].onreadystatechange = new Function('ahahDone(target,'+i+');');
        req[i].open("GET", url, true);
        req[i].send(null);
    }else if( window.ActiveXObject )
    {
        req[i] = new ActiveXObject("Microsoft.XMLHTTP");
        if( req[i] )
        {
            req[i].onreadystatechange = new Function('ahahDone(target,'+i+');');
            req[i].open("GET", url, true);
            req[i].send();
        }
    }
    ++i;
  
    if( queue.length > 1 )
        queue.shift();
  
    targetQueue.shift();

}

function ahahDone(target,n) {
   // only if req[n] is "loaded"
   if (req[n].readyState == 4) {
       // only if "OK"
       if (req[n].status == 200 || req.status == 304) {
           results = req[n].responseText;
           document.getElementById(target).innerHTML = results;
       } else {
           document.getElementById(target).innerHTML="ahah error:\n" +
               req[n].statusText;
       }
   }
}

>>5
This looks like it would help, but instead the Javascript console throws this error several times:

Error: req[n] has no properties
Error: req[n] has no properties
Error: req[n] has no properties

and then it still only loads the second DIV in the targetQueue