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

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>

これを解決するには、次の 2 つの方法があります。

  1. 適切なクライアント ID を jQuery 関数に渡します。

    $('#clock\\:timepicker_showon')

    \\:jQueryセレクターのリザーバーであるため、使用する必要があることに注意してください:（詳細はこちら）。

  2. 内部コンポーネント ID にフォーム ID が含まれないように使用prependId="false"します。<h:form>

    <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 に答える