Tweet
Hi,
I am in a process to figure out how to add AJAX functionality in a php server clock, code seen below. The code as it is works fine when someone comes to the site first time ever. But if the browser has cached the page, will time be wrong. The point is to add AJAX functionality to reload the clock every time when a user comes to the page.
I tried every possible way to make it happen, with no clean result. One way was to call the whole clock code, clock code being in a separate file. This does not work if the clock code is not changed radically since the clock code has its parts that needs to be inside the page's body tags. If the code is changed so that those parts are gone, will it not serve the purpose.
Any ideas how to get forward with this?
Clock code:
[CODE]
<html>
<head>
<title> </title>
<script type="text/javascript">
var weekdaystxt=["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
function showLocalTime(container, offsetMinutes, displayversion){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.displayversion=displayversion
var servertimestring= '<?php print date("F d, Y H:i:s", time())?>'
this.localtime=this.serverdate=new Date(servertimestring)
this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
this.updateTime()
this.updateContainer()
}
showLocalTime.prototype.updateTime=function(){
var thisobj=this
this.localtime.setSeconds(this.localtime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}
showLocalTime.prototype.updateContainer=function(){
var thisobj=this
if (this.displayversion=="long")
this.container.innerHTML=this.localtime.toLocaleString()
else{
var hour=this.localtime.getHours()
var minutes=this.localtime.getMinutes()
var seconds=this.localtime.getSeconds()
var ampm=(hour>=12)? "PM" : "AM"
var dayofweek=weekdaystxt[this.localtime.getDay()]
this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+ampm+" ("+dayofweek+")"
}
setTimeout(function(){thisobj.updateContainer()}, 1000) //update container every second
}
function formatField(num, isHour){
if (typeof isHour!="undefined"){ //if this is the hour field
var hour=(num>12)? num-12 : num
return (hour==0)? 12 : hour
}
return (num<=9)? "0"+num : num//if this is minute or sec field
}
</script>
</head>
<body>
<h1>My Server Time + 60min</h1>
<span id="server_time"></span>
<script type="text/javascript">
new showLocalTime("server_time", 60, "short")
</script>
</body>
</html>
[CODE]
AJAX code below in a way it works alone with phpserverq.php file which has a line <?php echo date('F d, Y H:i:s') ?> inside body tags.
[CODE]
<html>
<head>
<title></title>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","phpserverq.php",true);
xmlhttp.send();
}
</script>
</head>
<body onload="loadXMLDoc()">
<p>Time: </p>
<div id="myDiv"></div>
</body>
</html>
[CODE]
I am in a process to figure out how to add AJAX functionality in a php server clock, code seen below. The code as it is works fine when someone comes to the site first time ever. But if the browser has cached the page, will time be wrong. The point is to add AJAX functionality to reload the clock every time when a user comes to the page.
I tried every possible way to make it happen, with no clean result. One way was to call the whole clock code, clock code being in a separate file. This does not work if the clock code is not changed radically since the clock code has its parts that needs to be inside the page's body tags. If the code is changed so that those parts are gone, will it not serve the purpose.
Any ideas how to get forward with this?
Clock code:
[CODE]
<html>
<head>
<title> </title>
<script type="text/javascript">
var weekdaystxt=["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
function showLocalTime(container, offsetMinutes, displayversion){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.displayversion=displayversion
var servertimestring= '<?php print date("F d, Y H:i:s", time())?>'
this.localtime=this.serverdate=new Date(servertimestring)
this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
this.updateTime()
this.updateContainer()
}
showLocalTime.prototype.updateTime=function(){
var thisobj=this
this.localtime.setSeconds(this.localtime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}
showLocalTime.prototype.updateContainer=function(){
var thisobj=this
if (this.displayversion=="long")
this.container.innerHTML=this.localtime.toLocaleString()
else{
var hour=this.localtime.getHours()
var minutes=this.localtime.getMinutes()
var seconds=this.localtime.getSeconds()
var ampm=(hour>=12)? "PM" : "AM"
var dayofweek=weekdaystxt[this.localtime.getDay()]
this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+ampm+" ("+dayofweek+")"
}
setTimeout(function(){thisobj.updateContainer()}, 1000) //update container every second
}
function formatField(num, isHour){
if (typeof isHour!="undefined"){ //if this is the hour field
var hour=(num>12)? num-12 : num
return (hour==0)? 12 : hour
}
return (num<=9)? "0"+num : num//if this is minute or sec field
}
</script>
</head>
<body>
<h1>My Server Time + 60min</h1>
<span id="server_time"></span>
<script type="text/javascript">
new showLocalTime("server_time", 60, "short")
</script>
</body>
</html>
[CODE]
AJAX code below in a way it works alone with phpserverq.php file which has a line <?php echo date('F d, Y H:i:s') ?> inside body tags.
[CODE]
<html>
<head>
<title></title>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","phpserverq.php",true);
xmlhttp.send();
}
</script>
</head>
<body onload="loadXMLDoc()">
<p>Time: </p>
<div id="myDiv"></div>
</body>
</html>
[CODE]
Comment