Real-time page content updates

robertybob
robertybob used Ask the Experts™
on
Hi.

I would like data on a webpage to update to the latest info in real time without refreshing the page - like a data feed but just display info.

I am able to write an admin centre in PHP that will write contents to a file on the server.

But i cant work out the best way to have the webpage check for new data. I was going to use a loop that checks the last modified time of the source data file but this creates stack overflow errors. Basically all i need is for a page to check for a modified file then refresh itself if found - only needs to update if it finds the data is out of date so most checks will result in no change.

Anyone know how to do this efficiently?

Many thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Ryan ChongSoftware Team Lead

Commented:
try use AJAX technology, more info:
http://www.w3schools.com/ajax/

Author

Commented:
ok thx - looks promising but have to read thru to see if i can utilise it. have decided that might be best to store a simle timestamp in a file and get ajax to continuously loop to retrieve that and check against the last imestamp stored - if different then refresh the page.......

sure this must be easy but need to find out how to get ajax to loop and retrieve forever without timing out or clogging up.

will let you know if ajax seems like the solution - if you have readily available code to do what i need that would be much appreciated

many thanks
HonorGodSoftware Engineer

Commented:
One think you might want to consider is the user of a timer interval - have JavaScript invoke a funciton of your choice, whenever the interval timer pops.

<html>
<head>
<title> window.setInterval() </title>
<script type='text/javascript' src='../objDisplay.js'></script>
<script type='text/javascript'>
  var count   = 0;
  var timerID = null;

  function update( id ) {
    document.getElementById( id ).innerHTML = ++count;
  }

  function doTimer() {
    if ( !document.getElementById ) return false;
    var status = document.getElementById( 'status' );
    var button = document.getElementById( 'StopStart' );
    if ( timerID ) {
      timerID = window.clearInterval( timerID );
      status.innerHTML = 'Stopped';
      button.value = 'Start';
    } else {
      timerID = window.setInterval( 'update("count")', 2500 );
      status.innerHTML = 'Running';
      button.value = 'Stop';
    }
  }

  function ResetTimer() {
    count = 0;
    document.getElementById( 'count' ).innerHTML  =  count;
    document.getElementById( 'status' ).innerHTML = 'Reset';
  }
</script>
</head>
<body onload='doTimer()'>

<table border='1'>
  <tr>
    <td>Count:</td>
    <td id='count' align='center'>&nbsp;</td>
  </tr>
  <tr>
    <td>Status:</td>
    <td id='status'>&nbsp;</td>
  </tr>
  <tr>
    <td align='center'>
      <input id='StopStart' type='button' value='Stop'  onclick='doTimer()' />
    </td>
    <td align='center'>
      <input id='Reset'     type='button' value='Reset' onclick='ResetTimer()'>
    </td>
  </tr>
</table>

</body>
</html>
Software Team Lead
Commented:
You may try something like this:

test.php:

<html>
<head>
</head>
<script language="javascript">
      var refreshInterval = 5000; //5 seconds
      var roomArray = new Array();
      
      var timeinfo = "";
      function loadStatus(url) {
            window.status = "loading status.."
            xmlhttp=null
            if (window.XMLHttpRequest) {
                  xmlhttp=new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp!=null) {
                  xmlhttp.onreadystatechange=state_Change
                  xmlhttp.open("GET",url,true)
                  xmlhttp.send(null)
            } else {
                  //alert("Your browser does not support XMLHTTP.")
            }
      }
      function state_Change() {
            if (xmlhttp.readyState==4) {
                  if (xmlhttp.status==200) {
                        try {
                              rtntext=xmlhttp.responseText;
                              writeStatus(rtntext);                              
                              window.status = "";
                        } catch(e) { window.status = ""; }
                  }
            }
      }
      
      function writeStatus(v) {
            document.getElementById("rtn").innerHTML = v;            
      }
      
      rnd.today=new Date();
      rnd.seed=rnd.today.getTime();
      
      function rnd() {
            rnd.seed = (rnd.seed*9301+49297) % 233280;
            return rnd.seed/(233280.0);
      }
      
      function rand(number) {
            return Math.ceil(rnd()*number);
      }


      function getProgressUpdate() {
            rkey = rand(999999999999);
            
            loadStatus('test2.php?rkey='+rkey);
            setTimeout("getProgressUpdate()",refreshInterval);
      }
      
</script>
<body onLoad="getProgressUpdate()">
Returned value:
<div id="rtn"></div>
<p><a href="#" onClick="rkey = rand(999999999999);loadStatus('test2.asp?rkey='+rkey);return false;">Refresh now</a></p>
</body>
</html>

test2.php:

<?php

echo date('l dS \of F Y h:i:s A');

?>


Hope this helps
Ryan ChongSoftware Team Lead

Commented:
ah.. try change lines:

<a href="#" onClick="rkey = rand(999999999999);loadStatus('test2.asp?rkey='+rkey);return false;">Refresh now</a>

to:

<a href="#" onClick="rkey = rand(999999999999);loadStatus('test2.php?rkey='+rkey);return false;">Refresh now</a>

for above sample, and try customized accordingly. cheers

Author

Commented:
thx ryan - had to adjust a few things to tie in exactly but this code does indeed work well

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial