asked on

Real-time page content updates

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!

Ryan Chong

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

robertybob

ASKER

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

HonorGod

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'> </td>
</tr>
<tr>
<td>Status:</td>
<td id='status'> </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>

ASKER CERTIFIED SOLUTION

Ryan Chong

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ryan Chong

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

robertybob

ASKER

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