Display current time using jQuery & JSP

Home Tutorial Jquery Display current time using jQuery & JSP

Display current time using jQuery & JSP
Posted on: July 24, 2010 at 12:00 AM

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

Related Tags for Display current time using jQuery & JSP :

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics