Auto refresh <DIV> using ajax

**jflash** · 11-28-2011 05:40 AM

OK, i figured out myself. Not very beautiful code but works

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>

<?php
$ua = $_SERVER["HTTP_USER_AGENT"];
$msie_6 = strpos($ua, 'MSIE 6.0') ? true : false;
$msie_7 = strpos($ua, 'MSIE 7.0') ? true : false;
$msie_8 = strpos($ua, 'MSIE 8.0') ? true : false;
if ($msie_7) {
include 'reload.php';
}
elseif ($msie_6) { 
include 'reload.php';
}
elseif ($msie_8) {
include 'reload.php';
}
else {
  echo '<div id="loaddiv"></div>';
  }
?>

**007Julien** · 11-28-2011 07:15 AM

A variant without jQuery and without Ajax (total weigth 1.457 Ko) !

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Random Values</title>
<style type="text/css">
body {margin:0;padding:0;font-family:Georgia;text-align:center;}
#pge {display:block;width:500px;margin:3px auto;}
.big{font-size:96px;font-weight:bold;}
</style>
</head>
<body>
	<div id="pge">
	<div id="rsp" class="big"></div>
</div>
<script type="text/javascript">
(function (){var cmp=0;
	function snd(){var s;
	// Remove preceding script
	  s=document.getElementsByTagName("script");
	  for (i=0;i<s.length;i++)
			if (s[i] && s[i].getAttribute("src")!=null && s[i].getAttribute("src").indexOf('scriptWork.php')!=-1)
	    	s[i].parentNode.removeChild(s[i]);
		s=document.createElement('script');
		s.type = 'text/javascript';
		s.src = 'scriptWork.php?cmp='+cmp;
		document.getElementsByTagName("head")[0].appendChild(s);
		cmp++;
		setTimeout(snd,1000);
	}
snd();	
})();
</script>
</body>
</html>

We only load dynamically a javascript (scriptWork.php) buid with php

PHP Code:


<?php

header("Cache-Control: no-cache, must-revalidate");

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

header("Content-Type:text/javascript;charset=utf-8");

 

    if (!empty($_GET)) {

        $cmp=$_GET["cmp"];

    //    choose the text, images... content with cmp  

    } 

        exit("document.getElementById('rsp').innerHTML=".$cmp.";");

?>

A call to a callback function, in this last script, would be better no to mix the roles...

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

**vel_9787** · 02-02-2012 12:41 AM

please send script for auto refresh parent page after execting ajax script ??

**workhard10** · 03-08-2013 07:05 AM

I have used your codes ro retrieve the data from a txt file. but I still have a problem. The follow is the homepage html codes:

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>
        <link rel="stylesheet" type="text/css" href="index_styling.css" />
		<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)) {

		                    var JSONObject = JSON.parse($http.responseText);

		                    document.getElementById('T1').innerHTML = "T1: " + JSONObject.T1;
		                    document.getElementById('T2').innerHTML = "T2: " + JSONObject.T2;
		                    document.getElementById('T3').innerHTML = "T3: " + JSONObject.T3;
		                    document.getElementById('T4').innerHTML = "T4: " + JSONObject.T4;
		                    document.getElementById('T5').innerHTML = "T5: " + JSONObject.T5;
		                    document.getElementById('T6').innerHTML = "T6: " + JSONObject.T6;
		                    document.getElementById('T7').innerHTML = "T7: " + JSONObject.T7;
		                    document.getElementById('T8').innerHTML = "T8: " + JSONObject.T8;
		                    document.getElementById('T9').innerHTML = "T9: " + JSONObject.T9;
		                    document.getElementById('T10').innerHTML = "T10: " + JSONObject.T10;
		                    document.getElementById('T11').innerHTML = "T11: " + JSONObject.T11;
		                    document.getElementById('T12').innerHTML = "T12: " + JSONObject.T12;
		                    document.getElementById('T13').innerHTML = "T13: " + JSONObject.T13;
		                    document.getElementById('T14').innerHTML = "T14: " + JSONObject.T14;
		                    document.getElementById('T15').innerHTML = "T15: " + JSONObject.T15;
		                    document.getElementById('T16').innerHTML = "T16: " + JSONObject.T16;

		                    setTimeout(function () { $self(); }, 5000);
		                }
		            };
		            $http.open('GET', 'data.txt', true);
		            $http.send(null);
		        }

		    }

		</script>

	</head>
	<body>

		<script type="text/javascript">
		    setTimeout(function () { Ajax(); }, 5000);
		</script>
<div style="background:url(TYP400101_PNG.dat) no-repeat;width:1512px;height:794px">
		<div id="T1"></div>
        <div id="T2"></div>
        <div id="T3"></div>
        <div id="T4"></div>
        <div id="T5"></div>
        <div id="T6"></div>
        <div id="T7"></div>
        <div id="T8"></div>
        <div id="T9"></div>
        <div id="T10"></div>
        <div id="T11"></div>
        <div id="T12"></div>
        <div id="T13"></div>
        <div id="T14"></div>
        <div id="T15"></div>
        <div id="T16"></div>
</div>
	</body>
</html>

the data.txt is as follow:

Code:

{ "T1": "P1_", "T2": "P2_", "T3": "P3_", "T4": "P4_", "T5": "P5_", "T6": "P6_", "T7": "P7_", "T8": "P8_",
  "T9": "P9_", "T10": "P10_", "T11": "P11_", "T12": "P12_", "T13": "P13_", "T14": "P14_", "T15": "P15_", "T16": "P16_" }

I use Win7.
The above codes can only run in firefox and google chrome, the 16 temperature value will be refreshed every 5 second(see picture, it is running in firefox). but the codes can't in IE9 and it stops in IE9. I have also tried the codes in IE8(Computer is Vistasystem), but it stops, doesn't refresh.

I checked the codes and tried many times, I find that:

if I chang the

Code:

$http.open('GET', 'data.txt', true);

like this:

Code:

$http.open('GET', 'data.txt' + '?' + new Date().getTime(), true);

After adding the

Code:

+ new Date().getTime()

, the webpage can run in firefox, google chrome and IE9 three webbrowser now, but I don't understand why I need the

Code:

+ '?' + new Date().getTime()

for IE9, why?

**workhard10** · 03-08-2013 09:09 AM

Originally Posted by thraddash

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.

Hello thraddash, I want to ask you a question, please see my post in #20, thank you.

Thread: Auto refresh <DIV> using ajax

Thread Tools

Display

fade in/blink/play sound

auto refresh parent page after execting ajax script

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions