Auto refresh <DIV> using ajax

**derekbcf** · 12-25-2007 12:56 PM

I want to automatically reload a div tag every 10 seconds using ajax? how do I do this???

**Tabo** · 12-25-2007 01:09 PM

Use setTimeout, clearTimeout and ajax, want me to write it for you?

EDIT:

HTML Code:

<html>
<body>

<script type="text/javascript">
function Ajax(){
var xmlHttp;
	try{	
		xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
		    try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("No AJAX!?");
				return false;
			}
		}
	}

xmlHttp.onreadystatechange=function(){
	if(xmlHttp.readyState==4){
		document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
		setTimeout('Ajax()',10000);
	}
}
xmlHttp.open("GET","http://www.example.com/the_page_that_contains_the_div_content",true);
xmlHttp.send(null);
}

window.onload=function(){
	setTimeout('Ajax()',10000);
}
</script>

<div id="ReloadThis">Default text</div>

</body>
</html>

It should work, though I haven't tested it. You may get an out of memory error.

**derekbcf** · 12-26-2007 09:16 PM

the script doesn't work.... I've tryed it and it doesn't. if you could fix it to make it work, that'd be helpful!

Code:

<html> 
<body> 
<script type="text/javascript"> 
function Ajax(){
var xmlHttp;
 try{ xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari 
} 
catch (e){ 
try{ 
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer 
} 
catch (e){
 try{ 
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
catch (e){ 
alert("No AJAX!?"); return false; 
} 
} 
} 
xmlHttp.onreadystatechange=function(){ 
if(xmlHttp.readyState==4){ document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText; setTimeout('Ajax()',2000); 
} 
} xmlHttp.open("GET","index.php",true); xmlHttp.send(null); 
} 
window.onload=function()
{ 
setTimeout('Ajax()',2000); 
} 
</script> 
<div id="ReloadThis">Default text</div> </body> </html>

**Guezt** · 05-13-2009 05:00 AM

xmlHttp.readyState==4 isn't working (in my case), but this does:

Code:

<html>
<body>
<script type="text/javascript">
function Ajax(){
var xmlHttp;
	try{	
		xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
	}catch (e){
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}catch (e){
		    try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}catch (e){
				alert("No AJAX!?");
				return false;
			}
		}
	}
	xmlHttp.onreadystatechange=function(){
		document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
		setTimeout('Ajax()',2000);
	}
	xmlHttp.open("GET","text.txt",true);
	xmlHttp.send(null); 
}
window.onload=function(){
	setTimeout('Ajax()',2000);
}
</script>
<div id="ReloadThis">Default text</div>
</body>
</html>

**mickster04** · 01-14-2010 11:02 PM

HTML Code:

<html>
<body>
<script type="text/javascript">
function Ajax(){
var xmlHttp;
	try{	
		xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
	}catch (e){
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}catch (e){
		    try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}catch (e){
				alert("No AJAX!?");
				return false;
			}
		}
	}
	xmlHttp.onreadystatechange=function(){
		document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
		setTimeout('Ajax()',2000);
	}
	xmlHttp.open("GET","index1.php",true);
	xmlHttp.send(null); 
}
window.onload=function(){
	setTimeout('Ajax()',2000);
}
</script>
<div id = "elsewhat">shouldn't flicker</div>
<div id="ReloadThis">Current server uptime: <?php $data = shell_exec('uptime');
  $uptime = explode(' up ', $data);
  $uptime = $uptime[0]; echo ('Current server uptime: '.$uptime.'');?>)</div>
</body>
</html>

this gives me a copy of the "should flicker" text and the uptime, instead of just the up time. what am I doing wrong? when testing with a more complicated webpage, it sticks the whole webpage in the <div>?

**noufal** · 12-21-2010 04:45 AM

Originally Posted by Tabo

Use setTimeout, clearTimeout and ajax, want me to write it for you?

EDIT:

HTML Code:

<html>
<body>

<script type="text/javascript">
function Ajax(){
var xmlHttp;
	try{	
		xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
		    try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("No AJAX!?");
				return false;
			}
		}
	}

xmlHttp.onreadystatechange=function(){
	if(xmlHttp.readyState==4){
		document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
		setTimeout('Ajax()',10000);
	}
}
xmlHttp.open("GET","http://www.example.com/the_page_that_contains_the_div_content",true);
xmlHttp.send(null);
}

window.onload=function(){
	setTimeout('Ajax()',10000);
}
</script>

<div id="ReloadThis">Default text</div>

</body>
</html>

It should work, though I haven't tested it. You may get an out of memory error.

The code shown below doesn't work in IE7.please someone help me to find the answer.is there any mistakes in the code????????

**marius@msil.no** · 12-08-2011 12:05 PM

Hi

im using the the code from 007Julien and it works perfect for me. Im using the code on a livescore page, and i therefor wonder if its possible to make new entry fade in/blink/make a sound? I plan to us it when the new entry is a new goal.

Anyone who can help??

Originally Posted by noufal

The code shown below doesn't work in IE7.please someone help me to find the answer.is there any mistakes in the code????????

**noufal** · 12-21-2010 04:48 AM

Originally Posted by Tabo

Use setTimeout, clearTimeout and ajax, want me to write it for you?

EDIT:

HTML Code:

<html>
<body>

<script type="text/javascript">
function Ajax(){
var xmlHttp;
	try{	
		xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
		    try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("No AJAX!?");
				return false;
			}
		}
	}

xmlHttp.onreadystatechange=function(){
	if(xmlHttp.readyState==4){
		document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
		setTimeout('Ajax()',10000);
	}
}
xmlHttp.open("GET","http://www.example.com/the_page_that_contains_the_div_content",true);
xmlHttp.send(null);
}

window.onload=function(){
	setTimeout('Ajax()',10000);
}
</script>

<div id="ReloadThis">Default text</div>

</body>
</html>

It should work, though I haven't tested it. You may get an out of memory error.

This code doesnt work in IE7.somebody please helppppppppppppppp

**liquidesnake** · 10-04-2010 11:19 AM

Hi all. I ve tried the first code that Tabo uploaded, it works fine on Firefox, Chrome, Safari but I cant get it working on Internet Explorer...I ve been looking everywhere and I dont understand where is the problem. here is my full coding :

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>

</head>

<body>

<script type="text/javascript">

function Ajax(){
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("No AJAX!?");
return false;
}
}
}

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
setTimeout('Ajax()',10000);
}
}
xmlHttp.open("GET","ab.php",true);
xmlHttp.send(null);
}

window.onload=function(){
setTimeout('Ajax()',10000);
}

</script>

<div id="ReloadThis">

<?php
$clock = date("H:i:s");

echo $clock;

?>

</div>

</body>

</html>

Is there anyone who could tell what i m doing wrong?

**DanInMA** · 10-04-2010 02:28 PM

http://www.brightcherry.co.uk/scribb...ery-x-seconds/

**thraddash** · 12-21-2010 06:44 AM

Works in IE7, IE8, FF, Chrome, etc etc...

index.htm

HTML Code:

<!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" xml:lang="en" lang="en">
	<head>
		<title>Ajax</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<script type="text/javascript">

			function Ajax()
			{
				var
					$http,
					$self = arguments.callee;

				if (window.XMLHttpRequest) {
					$http = new XMLHttpRequest();
				} else if (window.ActiveXObject) {
					try {
						$http = new ActiveXObject('Msxml2.XMLHTTP');
					} catch(e) {
						$http = new ActiveXObject('Microsoft.XMLHTTP');
					}
				}

				if ($http) {
					$http.onreadystatechange = function()
					{
						if (/4|^complete$/.test($http.readyState)) {
							document.getElementById('ReloadThis').innerHTML = $http.responseText;
							setTimeout(function(){$self();}, 10000);
						}
					};
					$http.open('GET', 'random.php' + '?' + new Date().getTime(), true);
					$http.send(null);
				}

			}

		</script>

	</head>
	<body>

		<script type="text/javascript">
			setTimeout(function() {Ajax();}, 10000);
		</script>
		<div id="ReloadThis">Default text</div>

	</body>
</html>

random.php

PHP Code:


<?php



    echo rand();

Just change the url to a page relative to your domain.

**pankaj1989** · 09-05-2011 07:28 AM

Step 1:
Copy the following code and paste it in the head section of your webpage.

<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>

Here , above the file “reload.php” will be reloaded in every 20000ms ie 20 second . You can change the file which you have to reload and you can also change the reload time as per your requirement.
and secondly , the #loaddiv is the name of DIV which is going to be refreshed.

Step 2:
and now you need to put the div in the body section of your page

<div id="loaddiv"></div>

**staseo** · 10-21-2011 08:24 PM

Originally Posted by pankaj1989

Step 1:
Copy the following code and paste it in the head section of your webpage.

<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>

Here , above the file “reload.php” will be reloaded in every 20000ms ie 20 second . You can change the file which you have to reload and you can also change the reload time as per your requirement.
and secondly , the #loaddiv is the name of DIV which is going to be refreshed.

Step 2:
and now you need to put the div in the body section of your page

<div id="loaddiv"></div>

Good code, Pankash1989, thanks.
Another option is to disable cache (if you need to load fresh data, like XML feed):

var auto_refresh = setInterval(
function()
{
$.ajaxSetup({ cache: false });
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);

**jflash** · 11-22-2011 05:32 AM

Code:

<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>

This code refreshes correctly, but reload.php shows after 20 sec. I want when webpage is loaded my reload.php file is shown and after each 20 sec it be reloaded.

**DanInMA** · 11-22-2011 01:50 PM

Code:

<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
$(document).ready(function(){
$('#loaddiv').load('reload.php')
})
</script>

Thread: Auto refresh <DIV> using ajax

Thread Tools

Display

Hybrid View

Auto refresh <DIV> using ajax

doesn't work

i fixed it

Page refresh?

fade in/blink/play sound

How to refresh DIV using jquery

Cache

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions