Solved

Real-time page content updates

Posted on 2006-10-21
6
166 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 50

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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 50

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 50

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Swiper slider stops between pages 11 51
Adjust the position 3 65
React or Angular? 6 80
Show tab when enter div and change underline color 3 63
When you work with shopping cart / ecommerce relates web sites, you need to pass the certain form post details to the payment gateway process page with required details for the products items you give to order. Also you may need to track the ordered…
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

856 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