How to force a DOM refresh when running multiple Ajax tasks in a loop.

Question

I have a page that sends emails to customers. It has a send all button at the bottom of the page to provide the convenience of being able to send all the emails at once. Problem is it works badly or not at all. It either isn't redrawing the page or isn't managing to process all the Ajax calls.

Here is the JavaScript...

function ajaxemail(element,name,email,bonus)
{
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {

            document.getElementById(element).innerHTML= xmlhttp.responseText
            //document.getElementById(element).style.display = 'none'
            //document.getElementById(element).style.display = 'block'
            //alert(xmlhttp.responseText)
        }
    }
    xmlhttp.open("POST",<?php echo "\"$_SERVER[PHP_SELF]\"";?>,true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("emailto=true&name="+name+"&email="+email+"&bonus="+bonus);
}


function sendall(info)
{
    document.getElementById('sendallmails').disabled = true
    document.getElementById('sendallmails').value = 'Sending mails...'

    length = info.length

    for( i=0; i < length; i++)
    {
        ajaxemail(info[i][0],info[i][1],info[i][2],info[i][3])

    }

}

And if it helps, here is where the array info is constructed and then the function called...

echo "<script>\nvar email_info_array = new Array()\n";

    $j = 0;

    while($row = mssql_fetch_row($rs))
    {
            echo "email_info_array[$j] = new Array('sendlink$j','$row[1]','$row[2]','$row[4]')\n";

            ++$j;
    }

    echo "</script>\n\n";


    echo "<input type=\"button\" name=\"sendallmails\" id=\"sendallmails\" value=\"Send all Mails\"  onclick=\"javascript:sendall(email_info_array)\">\n";

The failure isn't in the page being called by function ajaxemail() because that works fine when called once or one at a time. It's when called by the loop that it doesn't work. It seems to do the last one or two items in the loop... or it might do some in between if I do something that forces the browser to redraw (such as resize it).

If I add an alert as a way of testing that execution of the loop is at least working it successfully runs the Ajax call on every iteration (but I have to press ok on many alerts!

I need to somehow forcibly refresh the browser DOM on every single iteration of the loop. It doesn't matter if the page becomes less responsive (but would rather it didn't become totally unresponsive)

I am testing in the latest Firefox (will test in other browsers once I have it working in FF)

Answer 1

The problem here is you are using asynchronous requests with a global variable that holds the Ajax call. You are basiclaly overwritting the previous call on each iteration of the loop. You need to use a library that does not use a global variable for the Ajax call.

Best bet is to use jQuery, Dojo, YUI, or some other JavaScript framework that supports Ajax requests.

Other option is to use an array to hold your calls. basic idea without doing it all

var ind = xmlhttp.push(new XMLHttpRequest()) - 1;

and

xmlhttp[ind].onreadystatechange ...
xmlhttp[ind].open ...