asked on 7/21/2008

refresh the content of <div> every 5 seconds

I have mysql records displayed in 2 divs in a page. I have a refresh button to refresh the entire page. Now i want to refresh the <div> content alone for every 5 seconds. I used PeriodicalUpdater and in IE it just gets refreshed once. but in firefox for every refresh the <div> shrinks its size and finally disappears. i need a solution for this as early as possible

PHP AJAX JavaScript

Last Comment

figureseven

7/22/2008

Morcalavin

7/21/2008

The below worked for me in a very simple test. 5 seconds is kind of a short polling cycle. You may want to lengthen it to 15 or 20 seconds to be on the safe side. This is assuming you are doing a 'GET' on the data.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<script type="text/javascript">
	/*<![CDATA[*/
if(!window.XMLHttpRequest)
{
	var reqObj = 
	[
		function() {return new ActiveXObject("Msxml2.XMLHTTP");},
		function() {return new ActiveXObject("Microsoft.XMLHTTP");},
		function() {return window.createRequest();}
	];
	for(a = 0, z = reqObj.length; a < z; a++)
	{
		try
		{
			window.XMLHttpRequest = reqObj[a];
			break;
		}
		catch(e)
		{
			window.XMLHttpRequest = null;
		}
	}
}
 
var req = new XMLHttpRequest();
 
window.onload = function()
{
	if(req == null)
	{
		alert('Your browser currently does not support the XMLHttpRequest object');
		return;
	}
	getData();
	window.setInterval('getData()', 5000);
}
 
function getData()
{
	req.abort();
	req.open('GET', 'someurl.php?cache=' + Math.random());
	req.onreadystatechange = function()
	{
		if(req.readyState != 4)
		{
			return;
		}
		if(req.status == 200)
		{
			document.getElementById('id').innerHTML += req.responseText;
		}
		else
		{
			//error.  do something error like
		}
	}
	req.send(null);	
}
	/*]]>*/
	</script>
	<title>Test</title>
</head>
<body>
<div id="id"></div>
</body>
</html>

Open in new window

Morcalavin

7/21/2008

Oops. change:
document.getElementById('id').innerHTML += req.responseText;

to

document.getElementById('id').innerHTML = req.responseText;

Albert Van Halen

7/21/2008

I dont' know waht you mean with PeriodicalUpdater , but you can use javascript for this
window.setInterval
IE window.setInterval(yourfunction, 5000)

Every 5 seconds javascript executes yourfunction

figureseven

7/22/2008

Are you using PeriodicalUpdater in Prototype.js? If so you may be calling the script incorrectly. Can you post your code?

cutevb

7/22/2008

ASKER

i have a js file with this function
function autoreload(){
//location.href='index.php?module=home&page=lpmmanager';

      var params1 = 'action=lpm';
new Ajax.PeriodicalUpdater('detailspane1','index.php?module=home&page=action',{method:'post',parameters:params1, frequency: 5, asynchronous:false});
      var params2 = 'action=lpm2';
      new Ajax.PeriodicalUpdater('detailspane2','index.php?module=home&page=action',{method:'post',parameters:params2, frequency: 5, asynchronous:false});
i call this function on body onload
I have a smarty template file which has this named detailspane1 and detailspane2 these 2 s have contents displayed from mysql tables
i am refreshing these s using this function
IN IE the refreshes once but in firefox it refreshes and shrinks in size

cutevb

7/22/2008

ASKER

i have a js file with this function
function autoreload(){
var params1 = 'action=lpm';
new Ajax.PeriodicalUpdater('detailspane1','index.php?module=home&page=action',{method:'post',parameters:params1, frequency: 5, asynchronous:false});
var params2 = 'action=lpm2';
new Ajax.PeriodicalUpdater('detailspane2','index.php?module=home&page=action',{method:'post',parameters:params2, frequency: 5, asynchronous:false});
i call this function on body onload
I have a smarty template file which has this div named detailspane1 and detailspane2 these 2 divs have contents displayed from mysql tables
i am refreshing these divss using this function
IN IE the
refreshes once but in firefox it refreshes and shrinks in size
The main page 1.php calls the main template file 1.tpl
1.tpl in turn calls 1a.tpl which has detailspane1 div and 1b.tpl which has detailspane2 div
these 2 divs need to be refreshed every 5 seconds

ASKER CERTIFIED SOLUTION

figureseven

7/22/2008

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

refresh the content of &lt;div&gt; every 5 seconds

refresh the content of <div> every 5 seconds