Multi-Array of XML Requests

Question

OMG, I am in need of a way to set up arrays of XML Requests based on the idShout - 1.

So it would be something like this...

var req = new Array();
req[idShout - 1] = ALL XML Data...

Here's what I got so far but it's not working at all :(

var idShout;
var req = new Array();

function htmlRequest(url, params, method)
{
    req[req.push] = ajax_function();
    for (i=0;i<req.length;i++)
    {
        (function (i) {
            if (req[i])
            {
                if (method == "GET")
                {
                    req[i].onreadystatechange = function()
                    {
                        if (req[i].readyState != 4)
                            return;
                        if (req[i].responseText !== null && req[i].status == 200)
                        {
                            document.getElementById("shoutbox_area" + idShout).innerHTML = req[i].responseText;
                        }
                    }
                }
                req[i].open(method,url,true);
                if (method == "POST")
                    req[i].setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                if (params == "")
                    req[i].send(null);
                else
                    req[i].send(params);

                return req[i];
            }
            else
                return null;
        })(i);
    } 
}



function ajax_function()
{
    var ajax_request = null;

    try
    {
        // Opera 8.0+, Firefox, Safari
        ajax_request = new XMLHttpRequest();
    } 
    catch (e)
    {
        // IE Browsers
        try
        {
            ajax_request = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                ajax_request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                //No browser support, rare case
                return null;
            }
        }
    }
    return ajax_request;
}

function send(which)
{
    var send_data = "shoutmessage=" + document.getElementById("shout_message" + which).value;
    var url = smf_prepareScriptUrl(smf_scripturl) + "action=dreamaction;sa=shoutbox;xml;send_shout="+ which;

    htmlRequest(url, send_data, "POST");

    document.getElementById("shout_message" + which).value = "";
    document.getElementById("shout_message" + which).focus();
    return true;
}

function startShouts(refreshRate, shoutCount)
{
    clearInterval(Timer[shoutCount-1]);
    idShout = shoutCount;
    show_shouts();
    Timer[shoutCount - 1] = setInterval("show_shouts()", refreshRate);

    return;
}

function show_shouts()
{
    var url = smf_prepareScriptUrl(smf_scripturl) + "action=dreamaction;sa=shoutbox;xml;get_shouts=" + idShout;
    htmlRequest(url, "", "GET");
}

Any help at all on this would be greatly appreciated... Basically, I'm setting the Timer Arrays in a different function before this, and I call startShouts which is supposed to show all of the information, but startShouts gets called more than once, which is why I have idShout set to equal shoutCount. So it will go something like this: shoutCount = 1, shoutCount = 2, shoutCount = 3, everytime it is being called. So I set the req[idShout - 1] array and it should return the result right??

Well, I get no errors in Firefox in the error console with this code above, but it doesn't work... Any ideas anyone?? As it needs to output into more than 1 area... argg.

Thanks for any help you can offer here :)

Thanks guys :)

Also, a little more info on this... Basically there is 1 or more Shoutboxes on any given page (Don't ask why?), I need to be able to grab the info of this and put it into the document.getElementById("shoutbox_area" + idShout), since the idShout for each element changes incrementing by 1 for each Shoutbox that is on that page. The values for the Shoutbox can be different, example the refreshRate can be different. 1 Shoutbox can have a refresh rate of like 2000 milliseconds, while the other can have a rate of 250 milliseconds, they need to be different and refresh at the times that are defined for them, so this is why I decided to make a Timer array, though not sure I have setup the Timer array the way it is meant to be setup for the setInterval function. Here is the way it get's done in a different javascript function that runs just before startShouts gets called...

This part is outside of the function and within the document itself:

var Timer = new Array();

And this part is in the function...

Timer[shoutCount - 1] = "";

So not sure if this is correctly setup for Timers...?

Answer 1

Since XHRs are asynchronous, by the time the readystatechange callback function fires the value of i has changed. You need to create a separate closure for the i variable during your loop. The easiest way to do this is wrap an anonymous function around the code block and call it with i passed as the first argument:

for (i=0;i<req.length;i++)
{
    (function (i) {
        if (req[i])
        {
            if (HttpMethod == "GET")
            {
                req[i].onreadystatechange = function()
                {
                    if (req[i].readyState != 4)
                        return;
                    if (req[i].responseText !== null && req[i].status == 200)
                    {
                        document.getElementById("shoutbox_area" + idShout).innerHTML = req[i].responseText;
                    }
                }
            }
            req[i].open(HttpMethod,url,true);
            if (HttpMethod == "POST")
                req[i].setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            if (params == "")
                req[i].send(null);
            else
                req[i].send(params);

            return req[i];
        }
        else
            return null;
    })(i);
}