Trying to figure out a way to load 6 iframes on page A.php, each containing content from sub pages a1.php~a6.php. The catch is that before loading each sub page, an AJAX call needs to be made to update the database. Additionally, these sub pages must be loaded consecutively, one after the other - meaning a2.php can only load after a1.php has completely loaded. This poses timing issues especially considering the large size of each sub page. How can this functionality be achieved? Whenever a1.php isn't fully loaded, the AJAX in a2.php triggers and alters the datatable.
Any assistance would be greatly appreciated. Thank you!
JS:
function showpic(id,x,y)
{
if (id==0)
{
var oBao = CreateHTTPObject();
var url = "ajax.php";
var sendstring="x="+x;
oBao.open("POST",url,false);
oBao.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
oBao.send(sendstring);
oBao.onreadystatechange = function () { OnReadyStateChng();};
document.getElementById("iframe"+id).src="a.php?y=" +y;
}
else
{
var iid=id-1;
document.getElementById("iframe"+iid).onload=function()
{
var oBao = CreateHTTPObject();
var url = "ajax.php";
var sendstring="x="+;
oBao.open("POST",url,false);
oBao.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
oBao.send(sendstring);
oBao.onreadystatechange = function () { OnReadyStateChng();};
document.getElementById("iframe"+id).src="a.php?y=" +y;
}
}
}
PHP:
for($i=0;$i<2;$i++)
{
for($j=0;$j<3;$j++)
{
$nu=$i*3+$j;
$div="iframe".$nu;
echo "<iframe id='$div' height='400px' frameborder=0 ></iframe>";
echo "<script language='JavaScript'>showpic($nu,$x,$y) ;</script></div>";
}
}