[an error occurred while processing this directive]

jQuery to Retrieve Server's Current Time

                         

In this first jQuery tutorial we will develop a simple program that retrieves the current time from server and displays on the user browser. In this example we will be calling a server side PHP script to get the current server time. You can easily replace PHP with JSP, or ASP program.

Steps to develop the Current Server Time program

Step 1:

 

 

 

Create php file to that prints the current server data. Here is the code of PHP script (time.php).

<?
$time_now=mktime(date('h')+5,date('i')+30,date('s'));

print $time_now=date('l M dS, Y, h:i:s A',$time_now);
?>

Step 2:

Write HTML page to call the time.php. Create a new file (currentservertime.html) and add the following code into it:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>

    <title>Current Date and Time</title>

    <script type="text/javascript" src="jquery-1.2.6.js"></script>

       <script type="text/javascript"> 

      function  timeExam()

      {

$.ajax({

url : "time.php",

success : function (data) {

$("#contentArea").html(data);

}

});

setTimeout("timeExam()", 1000);

      }


   </script> 

      </head>

      <body onload="timeExam();">

       <table width="100%">
       <tr><td  width="100%" align="center">
         <div id="contentArea" style="color:blue;font:bold 14px arial;padding-top:140px;"> 
         </div> 
       </td>
      </tr>
       </table>
    </body>
   </html>

Program explanation:

The following code includes the jQuery JavaScript library file:

<script type="text/javascript" src="jquery-1.2.6.js"></script>

On body load timeExam() funcation is called:

<body onload="timeExam();">

The code

$.ajax({

url : "time.php",
...

makes ajax call to time.php file.

Following code intercepts the ajax call success and then sets the data into "contextArea" div:

success : function (data) {

$("#contentArea").html(data);

}

});

When you run the program in browser it will look like following screen shot:

 

Check online demo of the application

Learn from experts! Attend jQuery Training classes.

                         

[an error occurred while processing this directive]