I want to implement JQuery Datepicker. I added to my JSF code the JavaScript. This is the HTML output:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".dtd">
<html xmlns="" xml:lang="en" lang="en"><head>
<title>DX-57 History Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="resources/css/themes/nvidia/images/favicon.ico" />
<link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.8.18.custom.min.js"></script>
<link href="resources/css/jquery-ui-1.8.18.custom.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/tabs.js"></script>
<script type="text/javascript">
$(function(){
// Datepicker
$('#datepicker').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
</script><script type="text/javascript" src="/test/javax.faces.resource/jsf.js.jsf?ln=javax.faces&stage=Development"></script></head><body>
<!-- demo inset for with validator -->
<h1><img src="resources/css/images/icon.png" alt="NVIDIA" /> History Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ul class="dropdown dropdown-horizontal" style="margin: 0 auto">
<li><a href="/SR_57-1.0-SNAPSHOT/UserNav.jsf" class="dir">Home</a>
<ul>
<li><a href="Dashboard.jsf">Dashboard</a></li>
</ul>
</li>
<li><a href="Sessions.jsf" class="dir">Sessions</a>
</li>
<li><a href="Application.jsf" class="dir">Application</a>
<ul>
<li><a href="Glassfish.jsf">Glassfish</a></li>
</ul>
</li>
<li><a href="Linux.jsf" class="dir">Linux</a>
</li>
<li><a href="Database.jsf" class="dir">Database</a>
<ul>
<li><a href="History.jsf">History</a></li>
</ul>
</li>
</ul>
</div>
<div id="logodiv" style="position:relative; top:35px; left:0px;"><img src="resources/images/logo_databasez.png" alt="Demo Insert Form" style="position:relative; top:-20px; left:9px;" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMap" style="width:350px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<form id="j_idt13" name="j_idt13" method="post" action="/test/Database.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt13" value="j_idt13" />
<div id="settingsdiv" style="width:750px; height:400px; position:absolute; background-color:r; top:20px; left:1px"><table>
<tbody>
<tr>
<td>Session ID</td>
<td><input id="j_idt13:sessionid" type="text" name="j_idt13:sessionid" onblur="mojarra.ab(this,event,'blur',0,'j_idt13:sessionidMessage')" /><span id="j_idt13:sessionidMessage"></span></td>
</tr>
<tr>
<td>Date</td>
<td><input id="j_idt13:datepicker" type="text" name="j_idt13:datepicker" /></td>
</tr>
<tr>
<td>Login Time</td>
<td><input id="j_idt13:logintime" type="text" name="j_idt13:logintime" /></td>
</tr>
<tr>
<td>Last Refresh Time</td>
<td><input id="j_idt13:lastrefreshtime" type="text" name="j_idt13:lastrefreshtime" /></td>
</tr>
<tr>
<td>User IP</td>
<td><input id="j_idt13:userip" type="text" name="j_idt13:userip" /></td>
</tr>
</tbody>
</table>
</div>
<div id="settingstwodiv" style="width:150px; height:60px; position:absolute; background-color:transparent; top:380px; left:800px"><input type="submit" name="j_idt13:j_idt32" value="Create User" />
</div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7591771537138283258:6254434046150824528" autoplete="off" />
</form>
</div>
</div>
</div></body>
</html>
But when I click on the input filed nothing happens. Is there something missing? Into the example that I found the calendar was using <div id="datepicker"></div> to be displayed. I use input field in my example.
Best Wishes
EDIT
I added div to visualize only the calendar.
I added the div here:
<h:panelGrid columns="2">
<h:panelGroup>Session ID</h:panelGroup>
<h:panelGroup>
<h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}"
validator="#{ValidatorController.validatebean}">
<f:ajax event="blur" render="sessionidMessage" />
</h:inputText>
<h:message id="sessionidMessage" for="sessionid" />
</h:panelGroup>
<h:panelGroup>Date</h:panelGroup>
<h:panelGroup>
<div id="datepicker"></div>
<h:inputText id="datepicker" value="#{DatabaseController.formMap['userid']}" >
</h:inputText>
</h:panelGroup>
<h:panelGroup>Login Time</h:panelGroup>
<h:panelGroup>
<h:inputText id="logintime" value="#{DatabaseController.formMap['logintime']}" >
<f:validateLength minimum="0" maximum="35"/>
</h:inputText>
</h:panelGroup>
<h:panelGroup>Last Refresh Time</h:panelGroup>
<h:panelGroup>
<h:inputText id="lastrefreshtime" value="#{DatabaseController.formMap['lastrefreshtime']}" >
<f:validateLength minimum="0" maximum="35"/>
</h:inputText>
</h:panelGroup>
<h:panelGroup>User IP</h:panelGroup>
<h:panelGroup>
<h:inputText id="userip" value="#{DatabaseController.formMap['userip']}" >
<f:validateLength minimum="0" maximum="15"/>
</h:inputText>
</h:panelGroup>
</h:panelGrid>
I would like to open the calendar like this example here - when I click on the input field.
It seems that there is other way to call the calendar in JSF.
EDIT 2
Is this JavaScript correct?
function calendar(){
// Datepicker
datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
}
I will call it with this code:
<h:inputText onclick="calendar" value="#{DatabaseController.formMap['userid']}" >
I want to implement JQuery Datepicker. I added to my JSF code the JavaScript. This is the HTML output:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/1999/xhtml" xml:lang="en" lang="en"><head>
<title>DX-57 History Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="resources/css/themes/nvidia./images/favicon.ico" />
<link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.8.18.custom.min.js"></script>
<link href="resources/css/jquery-ui-1.8.18.custom.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/tabs.js"></script>
<script type="text/javascript">
$(function(){
// Datepicker
$('#datepicker').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
</script><script type="text/javascript" src="/test/javax.faces.resource/jsf.js.jsf?ln=javax.faces&stage=Development"></script></head><body>
<!-- demo inset for with validator -->
<h1><img src="resources/css/images/icon.png" alt="NVIDIA." /> History Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ul class="dropdown dropdown-horizontal" style="margin: 0 auto">
<li><a href="/SR_57-1.0-SNAPSHOT/UserNav.jsf" class="dir">Home</a>
<ul>
<li><a href="Dashboard.jsf">Dashboard</a></li>
</ul>
</li>
<li><a href="Sessions.jsf" class="dir">Sessions</a>
</li>
<li><a href="Application.jsf" class="dir">Application</a>
<ul>
<li><a href="Glassfish.jsf">Glassfish</a></li>
</ul>
</li>
<li><a href="Linux.jsf" class="dir">Linux</a>
</li>
<li><a href="Database.jsf" class="dir">Database</a>
<ul>
<li><a href="History.jsf">History</a></li>
</ul>
</li>
</ul>
</div>
<div id="logodiv" style="position:relative; top:35px; left:0px;"><img src="resources/images/logo_databasez.png" alt="Demo Insert Form" style="position:relative; top:-20px; left:9px;" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMap" style="width:350px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<form id="j_idt13" name="j_idt13" method="post" action="/test/Database.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt13" value="j_idt13" />
<div id="settingsdiv" style="width:750px; height:400px; position:absolute; background-color:r; top:20px; left:1px"><table>
<tbody>
<tr>
<td>Session ID</td>
<td><input id="j_idt13:sessionid" type="text" name="j_idt13:sessionid" onblur="mojarra.ab(this,event,'blur',0,'j_idt13:sessionidMessage')" /><span id="j_idt13:sessionidMessage"></span></td>
</tr>
<tr>
<td>Date</td>
<td><input id="j_idt13:datepicker" type="text" name="j_idt13:datepicker" /></td>
</tr>
<tr>
<td>Login Time</td>
<td><input id="j_idt13:logintime" type="text" name="j_idt13:logintime" /></td>
</tr>
<tr>
<td>Last Refresh Time</td>
<td><input id="j_idt13:lastrefreshtime" type="text" name="j_idt13:lastrefreshtime" /></td>
</tr>
<tr>
<td>User IP</td>
<td><input id="j_idt13:userip" type="text" name="j_idt13:userip" /></td>
</tr>
</tbody>
</table>
</div>
<div id="settingstwodiv" style="width:150px; height:60px; position:absolute; background-color:transparent; top:380px; left:800px"><input type="submit" name="j_idt13:j_idt32" value="Create User" />
</div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7591771537138283258:6254434046150824528" autoplete="off" />
</form>
</div>
</div>
</div></body>
</html>
But when I click on the input filed nothing happens. Is there something missing? Into the example that I found the calendar was using <div id="datepicker"></div> to be displayed. I use input field in my example.
Best Wishes
EDIT
I added div to visualize only the calendar.
I added the div here:
<h:panelGrid columns="2">
<h:panelGroup>Session ID</h:panelGroup>
<h:panelGroup>
<h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}"
validator="#{ValidatorController.validatebean}">
<f:ajax event="blur" render="sessionidMessage" />
</h:inputText>
<h:message id="sessionidMessage" for="sessionid" />
</h:panelGroup>
<h:panelGroup>Date</h:panelGroup>
<h:panelGroup>
<div id="datepicker"></div>
<h:inputText id="datepicker" value="#{DatabaseController.formMap['userid']}" >
</h:inputText>
</h:panelGroup>
<h:panelGroup>Login Time</h:panelGroup>
<h:panelGroup>
<h:inputText id="logintime" value="#{DatabaseController.formMap['logintime']}" >
<f:validateLength minimum="0" maximum="35"/>
</h:inputText>
</h:panelGroup>
<h:panelGroup>Last Refresh Time</h:panelGroup>
<h:panelGroup>
<h:inputText id="lastrefreshtime" value="#{DatabaseController.formMap['lastrefreshtime']}" >
<f:validateLength minimum="0" maximum="35"/>
</h:inputText>
</h:panelGroup>
<h:panelGroup>User IP</h:panelGroup>
<h:panelGroup>
<h:inputText id="userip" value="#{DatabaseController.formMap['userip']}" >
<f:validateLength minimum="0" maximum="15"/>
</h:inputText>
</h:panelGroup>
</h:panelGrid>
I would like to open the calendar like this example here - when I click on the input field.
It seems that there is other way to call the calendar in JSF.
EDIT 2
Is this JavaScript correct?
function calendar(){
// Datepicker
datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
}
I will call it with this code:
<h:inputText onclick="calendar" value="#{DatabaseController.formMap['userid']}" >
- Check the console for errors. – Rory McCrossan Commented May 16, 2012 at 9:16
- Firebug in not showing any errors. – Peter Penzov Commented May 16, 2012 at 9:18
-
I failed to find a div/input with
id="datepicker"in your code. Did you mean$("#j_idt13:datepicker").datepicker(...)? – Salman Arshad Commented May 16, 2012 at 9:18 - datepicker where is this input elemebt > – Ravi Gadag Commented May 16, 2012 at 9:18
- $('#j_idt13:datepicker').datepicker({}); try this. – Priyank Patel Commented May 16, 2012 at 9:20
6 Answers
Reset to default 3datepicker id is missed here. you are calling wrong id . try like this and you used : in your attribute, by using slash
$(function(){
$('#j_idt13\\:datepicker').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
You need to make "#datepicker" the ID of the input box.
e.g.
$(function(){
// Datepicker
$('#j_idt13:datepicker').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
I'd reend researching jquery selectors.
HIya Demo http://jsfiddle/8Hp26/
your id is different it looks like you are using some kind of template or user controller to generate the html, in the demo I have added a new class = foo or you can try and escape the : in you JQuery.
Note to use escape add \\: but adding class should do the trick like shown in demo.
hope this helps.
code
$(function(){
// Datepicker
// $('#datepicker').datepicker({
$('.foo').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
<script type="text/javascript">
$(function(){
// Datepicker
$('#j_idt13:logintime').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
</script>
Change it to this. Your selector was wrong.
The id of your input field is not datepicker but j_idt13:datepicker.
You have to use this id when calling the datepicker ponent:
$(function(){
$('#j_idt13\\:datepicker').datepicker({
inline: true,
showWeek: true,
firstDay: 1
});
});
The \\ is for escaping the : as it is otherwise used by jQuery.
However I would remend an using an id without : in it.
This is JSF specific. You have to use styleClass="datepicker" in order to call the #datepicker JS.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745238148a4618013.html
评论列表（0条）