I am having difficulty explaining my problem so I will just show the step by step. Please forgive me if I am unclear.
Problem: I am trying to refresh a div that is in an included file:
I have an index.php page with a div id='home' (all the appropriate jquery files are called in the head section of index.php. On the index.php page is the following javascript trigger:
<a href="javascript: MyAjaxRequest('home','random2.php')">Random Number times 10</a>
which triggers a reload of div id='home'. div id='home' is given below (i don't know what the headers are for - i tried with and without them):
<div id='home'>
<?php
header("Content-Type: text/html; charset=ISO-8859-15");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>
<script type="text/javascript">
function homeloader(){
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("No AJAX");
return false;
}
}
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById('homeload').innerHTML=xmlHttp.responseText;
setTimeout('homeloader()',10000); // JavaScript function calls AutoRefresh() every 10 seconds
}
}
xmlHttp.open("GET","random.php",true);
xmlHttp.send(null);
}
homeloader();
</script>
<div id='homeload'>
<font size='1em'>
Random Number:
<?php
include "random.php";
?>
</font>
</div>
</div>
The ajax is supposed to refresh the content in sub div id='homeload' with the results of random.php ( a simple random number generator given at the bottom of this post) which it does.
Now the trouble starts.
When the above href='javascript... is fired it should load random2.php into div id='home' (which includes random3.php and another ajax function - the same function with key words changed (i tried leaving the catch (e) and changing it to catch (f) as below). It includes random3.php fine. However the ajax in random2.php should also refresh the sub div id='homeload2' with the results of random3.php (which it doesn't). random3.php is included but is not refreshed.
Here is random2.php (Again, i don't know what the headers are for - they came with the ajax - I tried with and without them):
<?php
header("Content-Type: text/html; charset=ISO-8859-15");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>
<script type="text/javascript">
function homeload2(){
var xmlHttp2;
try{
xmlHttp2=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
}
catch (f){
try{
xmlHttp2=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (f){
try{
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (f){
alert("No AJAX");
return false;
}
}
}
xmlHttp2.onreadystatechange=function(){
if(xmlHttp2.readyState==4){
document.getElementById('homeload2').innerHTML=xmlHttp2.responseText;
setTimeout('homeload2()',10000); // JavaScript function calls AutoRefresh() every 10 seconds
}
}
xmlHttp2.open("GET","random3.php",true);
xmlHttp2.send(null);
}
homeload2();
</script>
<div id='homeload2'>
<font size='1em'>
Random Number times 10:
<?php
include "random3.php";
?>
</font>
</div>
Here, finally, is the simple code for random.php:
<?php
$c = rand(1,10);
echo $c;
?>
and random3.php:
<?php
$c2 = rand(1,10);
$c3 = $c2*10;
echo $c3;
?>
So the problem is that random2.php is supposed to include random2.php into the div id='home'. It does. But the ajax in random2.php should refresh the sub div id='homeload2' with the results of random3.php. It does not.
random3.php is included but the div id='homeload2' is not refreshed.
I have tested random2.php on its own (just by loading the file in the browser) and it refreshes fine. I also tried it on my testing server and the deployment server. On both, when the file is loaded solo it refreshes, but when it is loaded in the context of the above (as an included file), is loaded as an include but does not refresh.
I am new to ajax and I pulled this code off a tutorial (I have seen the same code in several places). I also tried other ajax techniques (other formulations for the same objective) with the same result - the include loads but does not refresh. Although I did not figure it would make a difference, I tried also using require - to no avail. I have also tried inserting the library calls ( src=...jquery... ) into random2.php, but that did not help.
I have tried to disect and inspect the pages extensively, so barring some typo (which my testing suggests is not the case, I imagine there is some fundamental rule I am breaking by trying to do the second refresh, but I just can't see that being the problem. Why would it prevent the second function? Is there something about the function not actually loading when it is included via a javascript href? Something about headers or something?
The script also includes some php header commands (given above), which I don't understand, but tried deleting them to see if that was the problem. No difference.
I can only conclude that the ajax function in random2,php is broken somehow by its being placed in an included file (random2.php). I am sure my deduction has taken a wrong turn somewhere but where?
I have done a substantial amount of research for a solution, but my problem is that I don't really know how to formulate the google search query to get more information, so I just keep getting solutions to refresh a div, but not relating to my specific puzzle. "How to refresh a div two includes down the line" ?
So I am posting here.
I am sure there is something fundamental I am missing.
If anyone can help, I would appreciate it. Thank you in advance.
