Display current time using jQuery & JSP


 

Display current time using jQuery & JSP

In this Tutorial we will develop a Html page which displays current date and time using jQuery and JSP

In this Tutorial we will develop a Html page which displays current date and time using jQuery and JSP

Display current time using jQuery & JSP

In this Tutorial we will develop a Html page which displays current date and time using jQuery and JSP. This Html page contains jQuery which calls JSP page to add date in the web page.

In this example I am explaining about the use of jQuery in JSP page for getting the server data and displaying on the client side. This program uses the jQuery to pool the data from server and display on the client side.

We have used the following method of jQuery for making a server call asynchronously:

 $.ajax({
url : "Mydate.jsp",
success : function (data) {
$("#content").html(data);
}
});

The above code gets the data from server and displays on the HTML page. In our example it is displaying the current date and time from server. You can find the details to run and test the program on Eclipse IDE in the following video tutorial.

Here is the video of “How to get data from server in jQuery?”:

jQdate.html :

<head>
<title>Current Date and Time</title>
<script type="text/javascript" 
 src="jquery-1.4.2.js"></script>
<script type="text/javascript"> 
function  displayTime()
{
$.ajax({
url : "Mydate.jsp",
success : function (data) {
$("#content").html(data);
}
});
setTimeout("timeExam()", 1000);
 }
</script> 
</head>

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

jQdate.jsp

<%@ page contentType="text/html" import="java.util.*" %>
<html>
<body>
<p>&nbsp;</p>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing ="0" width="460"
 bgcolor="#EEFFCA">
<tr>
<td width="100%">
<font size="6" color ="blue">&nbsp;Displaying current Date
</font></td>
</tr>
<tr>
<td width="100%"><b>&nbsp;Current Date and Time is:&nbsp;
<font color="#FF0000">
<%= new java.util.Date() %>
</font></b></td>
</tr>
</table>
</center>
</div>
</body>
</html>

Description of the program :

Following code line include jQuery JavaScript library in the html file :

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

During loading of the body "displayTime()" method loads automatically by using the following code line :

<body onload="displayTime()>;

The following code makes ajax call to 'jQdate.jsp' :

$.ajax({
url : "jQdate.jsp",

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

success : function (data) {
$("#content").html(data);
}

Following code executes code/method after a specified time-interval :

setTimeout("timeExam()", 1000);

OUTPUT :

Click Download Source Code

Download Source Code

Ads