Auto Refresh a div in PHP and AJAX

I’m stuck with my auto refresh function in my web course assignment. I always put my code like this :

navigation.php :

<html>
   <head>
     .... ALL STYLE AND JS .....
   </head>
   <body>
      <div class="menu">
          ...... ALL MY WEB MENU .......
      </div>

JavaScript
​x
 
<html>   <head>     .... ALL STYLE AND JS .....   </head>   <body>      <div class="menu">          ...... ALL MY WEB MENU .......      </div>​

index.php :

<?php
  include "navigation.php";
  function A(){
    global $variable_functionA;
    .... FUNCTION TO CALL API X BY cURL .....
  }
  function B(){
    global $variable_functionB;
    .... FUNCTION TO CALL API Y BY cURL .....
  }
?>
<div class="container">
    ...... MY WEB CONTAINER ........
    <div class="auto_refresh">
       <?php
           include "auto_refresh_data.php"; //Success when first load, failed to load style, js, etc at the second load
       ?>
    </div>
</div>
<?php
  include "footer.php";
?>

JavaScript
 
<?php  include "navigation.php";  function A(){    global $variable_functionA;    .... FUNCTION TO CALL API X BY cURL .....  }  function B(){    global $variable_functionB;    .... FUNCTION TO CALL API Y BY cURL .....  }?><div class="container">    ...... MY WEB CONTAINER ........    <div class="auto_refresh">       <?php           include "auto_refresh_data.php"; //Success when first load, failed to load style, js, etc at the second load       ?>    </div></div><?php  include "footer.php";?>​

footer.php :

     </body>
 </html>
 <scrpt>..... ALL MY JS SCRIPT.....</script>

JavaScript
 
     </body> </html> <scrpt>..... ALL MY JS SCRIPT.....</script>​

My ajax code :

<script>
setInterval(function(){
    $.ajax({
        url:'auto_refresh_data.php'
    }).done(
        function(data){
            $('.auto_refresh').html(data);
        });
},5000);
</script>

JavaScript
 
<script>setInterval(function(){    $.ajax({        url:'auto_refresh_data.php'    }).done(        function(data){            $('.auto_refresh').html(data);        });},5000);</script>​

auto_refresh_data.php :

<div class="style">
  <?php
   function A($variable1);
   function B($variable2);

  ... OPERATION FOR GLOBAL VARIBLE RESULT FROM function A and function B ....
  ?>
</div>

JavaScript
 
<div class="style">  <?php   function A($variable1);   function B($variable2);​  ... OPERATION FOR GLOBAL VARIBLE RESULT FROM function A and function B ....  ?></div>​

I want to make an auto refresh data in the middle of my container. Then I made it in ajax like this : How do i auto refresh my div class content? . It failed because of some php variable, style, js, function, etc placed before the auto refresh div element. So the question is how to make it my data become auto refresh if my code design is like that?

Thankyou

Answer

I think there are a couple things you should be doing to fix this, but the main problem are your functions:

1) Move your functions somewhere else, like into their own files:

/functions.php

<?php
function A()
{
    global $variable_functionA;
    .... FUNCTION TO CALL API X BY cURL .....
}

function B()
{
    global $variable_functionB;
    .... FUNCTION TO CALL API Y BY cURL .....
}

JavaScript
 
<?phpfunction A(){    global $variable_functionA;    .... FUNCTION TO CALL API X BY cURL .....}​function B(){    global $variable_functionB;    .... FUNCTION TO CALL API Y BY cURL .....}​

2) Include the functions in the main file where it’s used on load:

/index.php

<?php
include("functions.php");
include("navigation.php");
?>
<div class="container">
    ...... MY WEB CONTAINER ........
    <div class="auto_refresh">
       <?php include("auto_refresh_data.php") ?>
    </div>
</div>
<?php include("footer.php") ?>

JavaScript
 
<?phpinclude("functions.php");include("navigation.php");?><div class="container">    ...... MY WEB CONTAINER ........    <div class="auto_refresh">       <?php include("auto_refresh_data.php") ?>    </div></div><?php include("footer.php") ?>​

3) On the auto_refresh_data.php page, you need to include the functions again, but use include_once instead of include so you don’t get a declaration error:

<?php include_once("functions.php") ?>

<div class="style">
  <?php
  # Presumably you want to run these functions?
  A();
  B();

  ... OPERATION FOR GLOBAL VARIBLE RESULT FROM function A and function B ....
  ?>
</div>

JavaScript
 
<?php include_once("functions.php") ?>​<div class="style">  <?php  # Presumably you want to run these functions?  A();  B();​  ... OPERATION FOR GLOBAL VARIBLE RESULT FROM function A and function B ....  ?></div>​

4) Since you aren’t really doing anything special with the ajax, I would just use .load():

<script>
$(function() {
    setInterval(function(){
        $('.auto_refresh').load('auto_refresh_data.php');
    },5000);
});
</script>

JavaScript
 
<script>$(function() {    setInterval(function(){        $('.auto_refresh').load('auto_refresh_data.php');    },5000);});</script>​

Further to this, I would probably look at using setTimeout() recursively vs setInterval() just because if you get a delay in response, you may get those responses out of time. Using setTimeout will fire after the response is returned as opposed to every 5 seconds whether the response has come back yet or not.

Advertisement

Answer