PDA

View Full Version : Dynamic Ajax Content not refreshing in IE



jeff
03-08-2006, 09:36 PM
Dynamic Ajax Content:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Ok I have a site that's using Dynamic Ajax Content to reload a php file into a div with a reloading timer. It works in Firefox perfectly, but in IE it does not get new content (doesn't really refresh the php file into the div).

Here's the link to the site:
http://www.albumflip.com/newtest2.php

Here's the code for the newtest2.php:

<html>
<head>
<title>test</title>
<META name="description" content="test">
<META name="keywords" content="test">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #555555;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/bg2.png);
}
-->
</style>
<link href="newstyle.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
A:link {color:#568DB8;text-decoration:none}
A:visited {color:#568DB8;text-decoration:none}
A:hover {color:#888888;text-decoration:none}
body,td,th {
color: #CCCCCC;
}
.style1 {color: #C987F5}
.style3 {color: #CC3333}
.style4 {color: #FFCC66}
.style5 {color: #99CC33}
.style6 {color: #FF6600}
.style7 {color: #FF6699}
.style10 {color: #6A9BFF}
.style12 {color: #568DB8}
.style20 {color: #468C8C}
.style21 {color: #CCCCCC}
-->
</style>

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}


function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>
<!--end test ajax script-->

</head>
<body>
<br>
<table width="622" height="462" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td><table width="620" height="460" border="0" align="center" cellpadding="8" cellspacing="0" bgcolor="#333333">
<tr class="tahoma11">
<td width="384" rowspan="2" valign="top">

<div id="setlistajax"><img src="/images/indicator.gif"></div></td>
<td colspan="2" valign="top" bgcolor="#333333">
<strong><br />

<script language="JavaScript">
var countDownInterval=30;
var countDownTime=countDownInterval+1;
function countDown(){
countDownTime--;
if (countDownTime <=0){
countDownTime=countDownInterval;
clearTimeout(counter);
ajaxpage('loadsetlistnew.php', 'setlistajax')
countDown()
return
}
if (document.all) //if IE 4+
document.all.countDownText.innerText = countDownTime+" ";
else if (document.getElementById) //else if NS6+
document.getElementById("countDownText").innerHTML=countDownTime+" "
else if (document.layers){ //CHANGE TEXT BELOW TO YOUR OWN
document.c_reload.document.c_reload2.document.write('Next reload is in <b id="countDownText">'+countDownTime+' </b> seconds')
document.c_reload.document.c_reload2.document.close()
}
counter=setTimeout("countDown()", 1000);
}




function startit(){
if (document.all||document.getElementById) //CHANGE TEXT BELOW TO YOUR OWN
document.write('Next reload is in <b id="countDownText">'+countDownTime+' </b> seconds')
countDown()
}

if (document.all||document.getElementById)
startit()
else
window.onload=startit

</script>
</strong></td>
</tr>
<tr class="tahoma11">

</tr>
</table></td>
</tr>
</table>
<div align="center"> <br>
<br>
<br>
</div>
</body>
</html>
<script type="text/javascript">
ajaxpage('loadsetlistnew.php', 'setlistajax')
</script>

Here's the code for the loadsetlistnew.php:

<?php



function countdiff($y, $mo, $d, $h, $m)
{
$cdate = mktime($h, $m, 0, $mo, $d, $y, -1);
$today = time();
$difference = $cdate - $today;
if ($difference < 0) { $difference = 0; }
$dleft = floor($difference/60/60/24);
$hleft = floor(($difference - $dleft*60*60*24)/60/60);
$mleft = floor(($difference - $dleft*60*60*24 - $hleft*60*60)/60);
$countdowndate = date("F j, Y, g:i a",$cdate);
echo "<br><br><b>The next event occurs in <br><font color=\"#6A9BFF\">$dleft days, $hleft hours, and $mleft minutes.</font><br> <br>This event is scheduled for $countdowndate.</b>";
}



$month = date("m");
$day = date("d");
$year = date("y");
$hourminute = date("Hi");

$cdyear = 2006;
$cdmonth = 05;
$cdday = 30;
$cdhour = 19;
$cdminute = 00;


if ($month<="05" && $day<="29" && $year=="06")
{if (!$year) { die; }
countdiff($cdyear,$cdmonth,$cdday,$cdhour,$cdminute);}




?>

If you load the link into Internet Explorer, you will see that the statement that says "The next event occurs in
83 days, 2 hours, and 28 minutes." never changes. The minutes should go down every minute.

If you load the link into Firefox, the minutes countdown every minute without ever having to manually refresh the browser which is the way it should work.

Any help would be greatly appreciated.

Jeff

ddadmin
03-08-2006, 10:38 PM
inside the Ajax JavaScript, find the line:


page_request.open('GET', url, true)

and change that to:


page_request.open('GET', url+'?bustcache='+new Date().getTime(), true)

That should bust caching of the fetched file in IE.

jeff
03-08-2006, 11:26 PM
absolutely perfect. thank you so much!

jeff