Web Analytics Made Easy -
StatCounter Clock with AJAX update - CodingForum

Announcement

Collapse
No announcement yet.

Clock with AJAX update

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Clock with AJAX update

    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]

  • #2
    you need to optimize your http headers.

    the simple way is to append ("?"+ +new Date) to the url each time.
    this can fill up the cahce and waste mobile battery, so polish up the headers if you can.
    Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

    Comment


    • #3
      That is a good one, thanks. I am figuring out a more sophisticated solution though.

      Comment


      • #4
        It was't that bad. All that was missing was:
        window.onload = showLocalTime;
        just before the showLocalTime() function, for fresh clock on every load. And then to add
        <meta http-equiv="Refresh" content="500; URL=http://www.xxx.org"/>
        on quite top of the <head>.

        Thank you anyway

        Comment

        Working...
        X