jQuery 时钟在 jsf 1.2 中不起作用答案

【问题标题】：jQuery clock not working in jsf 1.2jQuery 时钟在 jsf 1.2 中不起作用
【发布时间】：2013-04-21 10:44:25
【问题描述】：

我正在我的应用程序中实现 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 日历选择了一个日期，所以我需要实现一个不同的时间选择器。请提出任何其他替代方案（如果有）。

【问题讨论】：

标签： javascript jquery jsf jsf-1.2 timepicker

【解决方案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>。尝试只保留一个链接，看看如何。

【讨论】：

我已经尝试过你所说的......但它不起作用。我认为问题出在其他地方。
@rishi 抱歉，我以前从未使用过jsf，所以希望其他人可以在这种情况下帮助你:)
是的，这是 <h:form> 内部组件 ID 的 JSF 问题。非常特定于 JSF。

【解决方案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 选择器的保留者（更多信息here）。

在您的<h:form> 中使用prependId="false"，这样内部组件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 会更好。

【讨论】：

我已经尝试过你所说的...请推荐任何使用 jsf 1.2 测试的具有良好 UI 的时间选择器...谢谢
@rishi 使用RichFaces v3.3 Calendar component。不要使用 RichFaces 4，因为它适用于 JSF 2.x
您能告诉我您在 jsf 1.2 中使用过的任何 jquery timepicker。
@rishi 我不需要，因为 RichFaces 3.3 已经提供 jquery 并且具有基于 JSF 的组件。我不需要自己做 jquery 的事情。我遵循不重新发明轮子的规则。