Solved

Real-time page content updates

Posted on 2006-10-21
6
163 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 49

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 49

Accepted Solution

by:
Ryan Chong earned 500 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 49

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

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…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

911 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now