?
Solved

Real-time page content updates

Posted on 2006-10-21
6
Medium Priority
?
171 Views
Last Modified: 2010-04-06
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!
0
Comment
Question by:robertybob
  • 3
  • 2
6 Comments
 
LVL 54

Expert Comment

by:Ryan Chong
ID: 17780132
try use AJAX technology, more info:
http://www.w3schools.com/ajax/
0
 

Author Comment

by:robertybob
ID: 17781649
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
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 17782350
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>
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 54

Accepted Solution

by:
Ryan Chong earned 2000 total points
ID: 17782840
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
0
 
LVL 54

Expert Comment

by:Ryan Chong
ID: 17782843
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
0
 

Author Comment

by:robertybob
ID: 17784083
thx ryan - had to adjust a few things to tie in exactly but this code does indeed work well
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question