In reference with this question
We have a header with a date picked component (Jquery and css). Date picker works fine when header alone is present. When I try to include another page as a body with this header, date picker is not working.
We are using the date picker mentioned in this link
When we include another page to the above mentioned code, date picked is not working.
Include command that I use. <%@ include file="enterClarity.jsp" %>
There are some form validation java scripts which are present in enterCalrity.jsp page
Edit:
With header alone
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/calendar.css" type="text/css" />
<link rel="stylesheet" href="../css/datepicker_comp_1.css" type="text/css"/>
<link rel="stylesheet" href="../css/datepicker_comp_2.css" type="text/css"/>
<script type="text/javascript" src="../js/datepickr.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function(){
jQuery("#datepicker").datepicker();
});
</script>
<title>Clarity</title>
</head>
<body>
<form id="clarityaction" name="tstest" onsubmit="return true;" action="/metrix/clarityaction.action" method="post"><table class="wwFormTable">
<table width="100%" border="0" style="height: 616px; width: 1260px;"
cellpadding="0" cellspacing="0">
<tr class="header">
<td align="right" valign="bottom">
<B>Welcome Karthik Prabhu D </B>
</td>
</tr>
<tr class="header">
<td align="right" valign="top">your last login was : 2012-06-16 15:33:51.0
</td>
</tr>
<tr align="left" valign="bottom"><td>
<input type="text" id="datepicker" class="haspicker" /></td></tr>
<tr>
<td bgcolor="#FFFFFF" height="70%" width="100%">
<table width="60%" border="0" style="height: 430px; width: 1206px;"
cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0"style="vertical-align: top" cellpadding="0" cellspacing="0">
<tr>
<td>
</td>
</tr>
</table></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td class="footer"></td>
</tr>
</table>
</table></form>
</body>
</html>
After inclusion of the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/calendar.css" type="text/css" />
<link rel="stylesheet" href="../css/datepicker_comp_1.css" type="text/css"/>
<link rel="stylesheet" href="../css/datepicker_comp_2.css" type="text/css"/>
<script type="text/javascript" src="../js/datepickr.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function(){
jQuery("#datepicker").datepicker();
});
</script>
<title>Clarity</title>
</head>
<body>
<form id="clarityaction" name="tstest" onsubmit="return true;" action="/metrix/clarityaction.action" method="post"><table class="wwFormTable">
<table width="100%" border="0" style="height: 616px; width: 1260px;"
cellpadding="0" cellspacing="0">
<tr class="header">
<td align="right" valign="bottom">
<B>Welcome Karthik Prabhu D </B>
</td>
</tr>
<tr class="header">
<td align="right" valign="top">your last login was : 2012-06-16 15:36:10.0
</td>
</tr>
<tr align="left" valign="bottom"><td>
<input type="text" id="datepicker" class="haspicker" /></td></tr>
<tr>
<td bgcolor="#FFFFFF" height="70%" width="100%">
<table width="60%" border="0" style="height: 430px; width: 1206px;"
cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0"style="vertical-align: top" cellpadding="0" cellspacing="0">
<tr>
<td>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/tabing.js"></script>
<script type="text/javascript" src="../js/tabjs.js"></script>
<script type="text/javascript" src="../js/validaionjs.js"></script>
<link rel="stylesheet" href="../css/tabStyle.css" type="text/css" />
</head>
<body>
<-- Other page contents -->
</body>
</html>
According to the code you posted a second complete html file is injected into another one. You have one html page inside the other… definitely no good 😉