Share on Google+Share on Google+

Display current time using jQuery & JSP

Advertisement
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.

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 :

Download Source Code

Advertisements

Posted on: July 24, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.