0

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:&nbsp;

        <?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:&nbsp;
    <?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.

4

2 回答 2

0

的定义和调用homeloader不应由 ajax 加载。至于标头,第一个告诉浏览器它将加载什么,另一个负责缓存部分。

浏览器不会编译任何异步加载的 javascript。您可以使用<script>标签加载它们,或者,如果您真的需要仅在该页面/div 上加载它们,则从不同的文件加载它们并调用eval以强制浏览器编译您的代码。但是 eval可能有风险,所以我会选择第一个选项。

于 2012-04-24T16:53:34.410 回答
0

可能是您的浏览器正在本地缓存您的 .php 文件。考虑将查询字符串参数附加到您的请求中:

var randomnumber=Math.floor(Math.random()*11);

xmlHttp2.open("GET","random3.php?someVar="+randomnumber,true);

这样,它将始终是被请求的“新”文件。

编辑:确保每次您希望处理 AJAX 时都生成随机数 - 目的是创建一个“新请求”,因此每次在发出请求之前都会执行/计算随机数代码

编辑:还因为 Include 是一个服务器端指令-很可能是您的 DOM 不完整@执行时间

编辑2:试试这个

<?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);
  }

  // don't call Homeload here     
</script>

<div id='homeload2'>
    <font size='1em'>
    Random Number times 10:&nbsp;
    <?php
        include "random3.php";
    ?>
    </font>
</div>
<script>
// call it here
homeload2();

</script>
于 2012-04-24T16:35:03.650 回答