0

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

4

2 回答 2

3

好像你已经包含了 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>标签也缺少 close </script>。尝试只保留一个链接，看看如何。

于 2013-04-27T09:18:12.037 回答
0

问题在于为 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>

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

  1. 将正确的客户端 ID 传递给您的 jQuery 函数：

    $('#clock\\:timepicker_showon')

    请注意，您必须使用\\:因为:是 jQuery 选择器的保留器（更多信息在这里）。

  2. prependId="false"在您的内部组件 ID 中使用<h:form>不会有表单 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会更好。

于 2013-04-27T16:22:17.697 回答