Hi, I have made a script for live updates from a file using Ajax, only problem is in IE, it does not update after the first loop through the 2 functions, and in Opera there is a successful ajax update very occasionally. Works well in FF, Safari and Chrome
The page is for my weather website for the local area and is at http://howick.localweatherview.com/newlive.php
The realtime file is at http://howick.localweatherview.com/realtime.txt
Maybe something is wrong with my variable types. I couldn't figure it out on the first go.
Any help will be greatly appreciated!
Code below (
Notes:
I have used <body onload="startUpdates()"> to begin the updates.
rawdata=data[0] returns a date such as "07/12/10" and time=data[1] returns something like "23:25:45"
function startUpdates(mstime) {
var startdate = (new Date(2010,11,07,23,18,15,0)).getTime();
var wait=10000;
var tp = 480000; // time out period - how long should data update for. e.g. 300000 = 300 seconds.
if (mstime==null) {
mstime=startdate;
wait=0;
}
if (parseInt(mstime,10) - startdate < tp) {
setTimeout("updateData()",wait);
}
else {
var z = document.getElementById('timeout');
z.innerHTML="<span id=\"message\">Updates paused - reload the page to start live updates again</span><br />";
}
}
function updateData() {
var params=["date","time","temp","hum","dew","wspeed","wgust","wnow","htemp","ltemp","rrate","rain","baro","avdir","hrrain","hspeed","hgust","hbaro","lbaro"];
var n=params.length;
var count=0;
var dataspans=[], index, i, j, m, xmlhttp, data, mstime, element;
var tempunit="°C", windunit="km/h", rainunit="mm", barounit="hPa";
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
data=xmlhttp.responseText.split(" ");
var rawdate=data[0];
var monthnames=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var date=parseInt(rawdate.substring(0,2),10)+" "+monthnames[-1+parseInt(rawdate.substring(3,5),10)]+" 20"+parseInt(rawdate.substring(6,,10);
var time=data[1], temp=data[2]+" "+tempunit, hum=data[3]+"%", dew=data[4]+" "+tempunit;
var wspeed=data[5]+" "+windunit, wgust=data[40]+" "+windunit, wnow=data[6]+" "+windunit, htemp=data[26]+" "+tempunit, ltemp=data[28]+" "+tempunit;
var rrate=data[8]+" "+rainunit+"/hr", rain=data[9]+" "+rainunit, baro=data[10]+" "+barounit, avdir=data[51], hrrain=data[47]+" "+rainunit;
var hspeed=data[30]+" "+windunit, hgust=data[32]+" "+windunit, hbaro=data[34]+" "+barounit, lbaro=data[36]+" "+barounit;
// get milliseconds date
var ty="20"+rawdate.substring(6);
var tmo=parseInt(rawdate.substring(3,5),10)-1;
var td=rawdate.substring(0,2);
var th=time.substring(0,2);
var tmi=time.substring(3,5);
var ts=time.substring(6);
mstime=(new Date(ty,tmo,td,th,tmi,ts,0)).getTime();
element=document.getElementById('timeout');
element.setAttribute("name",mstime); // only way I could think to be able to access mstime from a different function!!
var spanarray=document.getElementsByTagName('span');
var num=spanarray.length;
for (i=0;i<num;i++) {
x=spanarray[i];
if (x.getAttribute('class')=="ajax") {
for (j=0;j<n;j++) {
if (params[j]==x.getAttribute('id')) {
var s=params[j];
if (x.innerHTML!=eval(s)) {
dataspans[count]=i;
count=count+1;
x.innerHTML=eval(s);
x.style.color="#0025d9";
}
}
}
}
}
var k=dataspans.length;
setTimeout(function() {
for (m=0;m<k;m++) {
index=dataspans[m];
spanarray[index].style.color="#00058c";
}
},1500);
}
}
xmlhttp.open("GET","realtime.txt",true);
xmlhttp.send();
var ms=document.getElementById('timeout').getAttribute('name');
startUpdates(ms);
}