It's not the image that's undefined, rather outMsg2 - in the code here:
Code:
function useResponse()
{
if(req2.readyState == 4 && req2.status == 200)
{
var outMsg2 = req2.responseText;
}
else
{
document.getElementById('updateArea2').innerHTML = '<img src=ajaxloader.gif>';
}
document.getElementById("updateArea2").innerHTML = outMsg2;
}
Regardless of whether or not the request is completed and successful, the last thing the function does is fill updateArea2 with outMsg2. Unless the request is completed and successful, outMsg2 is 'undefined'. Rewrite the function like so:
Code:
function useResponse()
{
var outMsg2 = '<img src=ajaxloader.gif>';
if(req2.readyState == 4 && req2.status == 200)
{
var outMsg2 = req2.responseText;
}
document.getElementById("updateArea2").innerHTML = outMsg2;
}
Now the output will always be the loading image, unless the request is completed and successful. Then it will be the contents of the request's response.
Note: The useResponse() function could/should be augmented to deal with other req2.readyState s and other req2.status es. But like I've just made it, should be fine in most cases.
Bookmarks