Home Tutorial Jquery Display current time using jQuery & JSP

 
 

Share on Google+Share on Google+
Display current time using jQuery & JSP
Posted on: July 24, 2010 at 12:00 AM
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

Advertisement

Related Tags for Display current time using jQuery & JSP :


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.

Posted on: July 24, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com