Question

我正在我的应用程序中实现jQuery时钟。这个时钟在HTML / JSP页面中运行良好，但在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>

我已经读过$没有定义。我尝试了类似的替代方案：

       $ = jQuery
       $jq = jQuery.noConflict();

但这些解决方案也无效。

我有实现时钟的要求，我已经使用Tomahawks日历来选择日期，所以我需要实现一个不同的时间戳。请建议任何其他替代方案（如果有的话）。

Answer 1

好像你已经三次包含jQuery了：

<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>

第二个<script>标记也缺少关闭</script>。尝试仅保留一个链接，看看如何。

Answer 2

问题在于HTML上组件的生成ID。 <h:form> ID将自动附加到内部组件的ID中，因此

<h:form id="clock">
    <h:inputText id="timepicker_showon" />
</h:form>

将生成此HTML：

<form id="clock">
    <input type="text" id="clock:timepicker_showon" />
</form>

您有两种方法可以解决这个问题：

将正确的客户端ID传递给jQuery函数：
```
$('#clock\\:timepicker_showon')
```
请注意，您必须使用\\:，因为:是jQuery选择器的reserver（更多信息here）。

在prependId="false"中使用<h:form>，以便内部组件ID不具有表单ID：

<h:form id="clock" prependId="false">
    <h:inputText id="timepicker_showon" />
</h:form>

这将生成此HTML：

<form id="clock">
    <input type="text" id="timepicker_showon" />
</form>

另外需要注意：在你的个人资料中你会说我想学习jsf。，如果你是以自己的方式学习，那么学习JSF 2会更好。

jQuery时钟在jsf 1.2中不起作用

2 个答案: