auto-refresh?

h4x0rmx

I need to make a simple page that pulls data from an Oracle database. Some of this data is updated every few seconds and the page needs to show the latest up-to-date information. This page will be shown on a big screen and there will be times where no one will be there to refresh it. I was thinking about having a few divs on the page and have a javaScript/AJAX function auto-refresh each div. (I don't know any AJAX by the way:queasy🙂 Some of these divs will need to be refreshed every minute or so, some others will need to be refreshed every 5-10 seconds or so.
I don't really know what would be the best approach to make this page.
Anyone has had to do something similar?
Any ideas?
Any tutorials that might help?
I will really appreciate your help!

P.S. This application will be running on an intranet with just 1-5 users, if that is relevant.

bpat1434

I would use AJAX. You can utilize almost any library you want: Dojo, Prototype, jQuery. Their ajax stuff is easy to understand. For example, jQuery uses something like:

$.ajax({
    /* Some options like url, method, etc. */
});
/** OR **/
$.get('http://www.google.com', { key: "value", key2: "value2" });

You can set up timers to loop through; however, do note that if you MUST allow for time for the server to respond. If the server doesn't respond in enough time, you run the risk of making a bunch of calls and getting nothing back and overloading your server. So be careful. I would circumvent this by actually setting a "global" variable which is a boolean of whether or not a request is finished or not. On each call of the function by the loop, it first checks that variable, and if it's "true" then don't execute the query, otherwise, continue. Something like:

var gettingData1=false;

function getData1()
{
   if(gettingData1)
     return;

  /** Do the ajax query here... */
}

Alternatively you could use the <meta> tag and refresh every 10 seconds; however, if the server starts to lag you could have multiple times when there is little or no data-change.

h4x0rmx

That's a good idea, but it just came to my mind that I could use iframes. what do you guys think?

rsmith

I avoid iframes for security reasons.

Who not just use the refresh attribute of header?

header("Refresh: 15; url=$_SERVER['PHP_SELF']");

Replace 15 with seconds interval.

h4x0rmx

The thing is that header will refresh the entire page, I need to refresh just parts of the page at different time rates.

Weedpacket

h4x0rmx wrote:
That's a good idea, but it just came to my mind that I could use iframes. what do you guys think?

Iframes are for people still stuck in 2003 🙂. AJAX interaction is lower-cost, more flexible, and provides better control.

h4x0rmx

You're right... in fact I'm stuck in '03... but here you go, I figured out. Here's the code just in case it's useful for someone else.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP + Ajax auto refresh DIV</title>
<script language="JavaScript" type="text/javascript">

var xmlhttp = false ;

if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
  try {
	xmlhttp = new XMLHttpRequest ();
  }
  catch (e) {
  xmlhttp = false}
}


function myXMLHttpRequest (){
  var xmlhttplocal;
  try {
  	xmlhttplocal = new ActiveXObject ("Msxml2.XMLHTTP")}
  catch (e) {
	try {
	xmlhttplocal = new ActiveXObject ("Microsoft.XMLHTTP")}
	catch (E) {
	  xmlhttplocal = false;
	}
  }

  if (!xmlhttplocal && typeof XMLHttpRequest != 'undefined') {
	try {
	  var xmlhttplocal = new XMLHttpRequest ();
	}
	catch (e) {
	  var xmlhttplocal = false;
	}
  }
  return (xmlhttplocal);
}

var mnmxmlhttp = Array ();
var mnmString = Array ();
var mnmPrevColor = Array ();
var responsestring = Array ();
var myxmlhttp = Array ();
var responseString = new String;

var i=0;
var ii = 0;

function ajax_update(myUrl, myDiv, rate){

target2 = document.getElementById ('content');

ii = i++;

var content = "i=" + ii ;

mnmxmlhttp = new myXMLHttpRequest ();
if (mnmxmlhttp) {
		mnmxmlhttp.open ("POST", myUrl, true);
		mnmxmlhttp.setRequestHeader ('Content-Type',
				   'application/x-www-form-urlencoded');

		mnmxmlhttp.send (content);
		errormatch = new RegExp ("^ERROR:");

		target2 = document.getElementById (myDiv);

		mnmxmlhttp.onreadystatechange = function () {
			if (mnmxmlhttp.readyState == 4) {
				mnmString = mnmxmlhttp.responseText;

				if (mnmString.match (errormatch)) {
					mnmString = mnmString.substring (6, mnmString.length);

					target = document.getElementById (myDiv);
					target2.innerHTML = mnmString;

				} else {
					target = document.getElementById (myDiv);
					target2.innerHTML = mnmString;
				}
			}
		}
	}

setTimeout('ajax_update(\'' + myUrl + '\',\'' + myDiv + '\',\'' + rate + '\');', rate);
}

</script>
</head>
<body onload="ajax_update('rand.php','content',2000);ajax_update('inner.php','content2',5000);ajax_update('print_r.php','general',11000);">
<div id="content">Loading...</div>
<div id="content2">Loading...</div>
<div>This is not a div</div>
<div id="general">General Loading...</div>
<div>After general</div>

</body>

</html>

lvcatler

hey, after looking a code for about 1week i found this useful.

<script language="JavaScript" type="text/javascript">

var xmlhttp = false ;

if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
  try {
	xmlhttp = new XMLHttpRequest ();
  }
  catch (e) {
  xmlhttp = false}
}


function myXMLHttpRequest (){
  var xmlhttplocal;
  try {
  	xmlhttplocal = new ActiveXObject ("Msxml2.XMLHTTP")}
  catch (e) {
	try {
	xmlhttplocal = new ActiveXObject ("Microsoft.XMLHTTP")}
	catch (E) {
	  xmlhttplocal = false;
	}
  }

  if (!xmlhttplocal && typeof XMLHttpRequest != 'undefined') {
	try {
	  var xmlhttplocal = new XMLHttpRequest ();
	}
	catch (e) {
	  var xmlhttplocal = false;
	}
  }
  return (xmlhttplocal);
}

var mnmxmlhttp = Array ();
var mnmString = Array ();
var mnmPrevColor = Array ();
var responsestring = Array ();
var myxmlhttp = Array ();
var responseString = new String;

var i=0;
var ii = 0;

function ajax_update(myUrl, myDiv, rate){

target2 = document.getElementById ('content');

ii = i++;

var content = "i=" + ii ;

mnmxmlhttp = new myXMLHttpRequest ();
if (mnmxmlhttp) {
		mnmxmlhttp.open ("POST", myUrl, true);
		mnmxmlhttp.setRequestHeader ('Content-Type',
				   'application/x-www-form-urlencoded');

		mnmxmlhttp.send (content);
		errormatch = new RegExp ("^ERROR:");

		target2 = document.getElementById (myDiv);

		mnmxmlhttp.onreadystatechange = function () {
			if (mnmxmlhttp.readyState == 4) {
				mnmString = mnmxmlhttp.responseText;

				if (mnmString.match (errormatch)) {
					mnmString = mnmString.substring (6, mnmString.length);

					target = document.getElementById (myDiv);
					target2.innerHTML = mnmString;

				} else {
					target = document.getElementById (myDiv);
					target2.innerHTML = mnmString;
				}
			}
		}
	}

setTimeout('ajax_update(\'' + myUrl + '\',\'' + myDiv + '\',\'' + rate + '\');', rate);
}

</script>

many thanks to all of you!!!. its working!!!
may question is, how can i integrate this to text box instead of div tag?

thanks in advance..