I am currently facing an issue with dynamically populating a website. The code works perfectly when I step through it, but it fails to work as intended on page load. Here is the relevant code snippet:
<body onload="populate_all(string)";>
function populate_all(string)
{
var split = string.split(" ");
for(i = 0; i < split.length; i++)
{
populate(split[i], 'main');
}
}
function populate(string, location)
{
if (string.length==0)
{
document.getElementById(location).innerHTML="";
return;
}
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)
{
var divTag = document.createElement("div");
divTag.className ="info";
divTag.innerHTML = xmlhttp.responseText;
document.getElementById(location).appendChild(divTag);
}
}
xmlhttp.open("GET","populate.php?string="+string,true);
xmlhttp.send();
}
After researching the issue, I believe the problem does not lie within the php code. Essentially, my JavaScript function using AJAX runs multiple times in a loop and only functions properly when debugging. Any assistance would be greatly appreciated. Thank you!