jQuery clock not working in jsf 1.2
Question
I am implementing jQuery clock in my application. This clock is working fine in HTML/JSP page but not working in jsf 1.2.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<f:view>
<f:verbatim>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>JSF</title >
<link rel="stylesheet" href="WEB-INF/clock/include/ui-1.10.0/ui- lightness/jquery-ui-1.10.0.custom.min.css" type="text/css" />
<script type="text/javascript" src="WEB-INF/clock/include/jquery-1.9.0.min.js/"></script>
<script type="text/javascript" src="WEB-INF/clock/include/jquery-1.9.0.min.js"/>
<script type="text/javascript" src="jquery-1.9.0.min.js/"></script>
<link rel="stylesheet" href="WEB-INF/clock/include/ui-1.10.0/ui-lightness/jquery-ui-1.10.0.custom.min.css" type="text/css" />
<script type="text/javascript" src="WEB-INF/clock/include/ui-1.10.0/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="WEB-INF/clock/include/ui-1.10.0/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="WEB-INF/clock/include/ui-1.10.0/jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="WEB-INF/clock/include/ui-1.10.0/jquery.ui.position.min.js"></script>
<script type="text/javascript" src="WEB-INF/clock/jquery.ui.timepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#timepicker_showon').timepicker({
showOn: 'button',
button: $('.timepicker_button_trigger'),
showLeadingZero: false,
timeSeparator: ':'
});
});
</script>
</head>
</f:verbatim>
<h:form id="clock">
<body>
<h1><h:outputText value="JavaServer Faces"/></h1>
<f:verbatim> <label for="timepicker_showon">Select Time</label></f:verbatim>
<h:inputText style="width: 70px;" id="timepicker_showon" value="00:00" />
<f:verbatim> <div class='timepicker_button_trigger'
style="width: 16px; height:16px;
display: inline-block; border: 1px solid #222222; margin-top: 3px; cursor:pointer"></div>
</f:verbatim>
</body>
</h:form>
</html>
</f:view>
I have read that $ is not defined. I have tried alternatives like:
$ = jQuery
$jq = jQuery.noConflict();
But these solutions are also not working.
I have requirements to implement the clock, and I have already used Tomahawks calender to select a date, so I need to implement a different timepicker. Please suggest any other alternatives (if any).
2 answers
solution1
3 2013-04-27 09:18:12
Seem like you've included jQuery three times:
<script type="text/javascript" src="WEB-INF/clock/include/jquery-1.9.0.min.js/"></script>
<script type="text/javascript" src="WEB-INF/clock/include/jquery-1.9.0.min.js"/>
<script type="text/javascript" src="jquery-1.9.0.min.js/"></script>
The second <script> tag also missing closing </script> . Try to keep one link only and see how.
solution2
0 ACCPTED 2013-04-27 16:22:17
The problem is in the generated IDs for your component on HTML. The <h:form> ID will be automatically appended to the IDs of the inner components, so
<h:form id="clock">
<h:inputText id="timepicker_showon" />
</h:form>
Will generate this HTML:
<form id="clock">
<input type="text" id="clock:timepicker_showon" />
</form>
You have two ways to solve this:
Pass the right client ID to your jQuery functions:
$('#clock\\\\:timepicker_showon')Note that you must use
\\\\:because:is reserver for jQuery selector (more info here ).Use
prependId="false"in your<h:form>so the inner components IDs won't have the form ID:<h:form id="clock" prependId="false"> <h:inputText id="timepicker_showon" /> </h:form>This will generate this HTML:
<form id="clock"> <input type="text" id="timepicker_showon" /> </form>
An additional note: In your profile you say I want to learn jsf. , if you're learning in your own way, then it would be better to study JSF 2.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.