www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Auto refresh <DIV> using ajax

Hybrid View

  1. #1
    Join Date
    Dec 2007
    Posts
    3

    Auto refresh <DIV> using ajax

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

  2. #2
    Join Date
    Oct 2006
    Posts
    364
    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.
    Last edited by Tabo; 12-25-2007 at 01:15 PM.

  3. #3
    Join Date
    Dec 2007
    Posts
    3

    doesn't work

    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>

  4. #4
    Join Date
    Oct 2007
    Posts
    103

    Lightbulb i fixed it

    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>

  5. #5
    Join Date
    Jan 2010
    Posts
    1

    Page refresh?

    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>?

  6. #6
    Join Date
    Dec 2010
    Location
    dubai
    Posts
    8
    Quote Originally Posted by Tabo View Post
    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????????

  7. #7
    Join Date
    Dec 2011
    Posts
    2

    fade in/blink/play sound

    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??

    Quote Originally Posted by noufal View Post
    The code shown below doesn't work in IE7.please someone help me to find the answer.is there any mistakes in the code????????

  8. #8
    Join Date
    Dec 2010
    Location
    dubai
    Posts
    8
    Quote Originally Posted by Tabo View Post
    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

  9. #9
    Join Date
    Oct 2010
    Location
    Manchester
    Posts
    4
    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?

  10. #10
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623

  11. #11
    Join Date
    Aug 2009
    Posts
    593
    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.

  12. #12
    Join Date
    Sep 2011
    Location
    Bangalore
    Posts
    1

    How to refresh DIV using jquery

    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>

  13. #13
    Join Date
    Oct 2011
    Posts
    1

    Cache

    Quote Originally Posted by pankaj1989 View Post
    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);

  14. #14
    Join Date
    Nov 2011
    Posts
    3
    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.

  15. #15
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    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 Information

Users Browsing this Thread

There are currently 4 users browsing this thread. (0 members and 4 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles