jQuery時鐘不工作在jsf 1.2

我在我的應用程序中實現jQuery時鐘。這個時鐘在HTML/JSP頁面中工作正常，但不能在jsf 1.2中工作。jQuery時鐘不工作在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();

但是這些解決方案也無法正常工作。

我有要求實現時鐘，我已經使用戰斧日曆選擇日期，所以我需要實現一個不同的時間選擇器。請建議任何其他選擇（如果有的話）。

來源

2013-04-27 rishi

問題在於您的組件在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）。

使用prependId="false"在<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-27 16:22:17

我已經嘗試過你在說什麼......請建議任何具有良好用戶界面的時間選擇器，並使用jsf 1.2進行測試....感謝 – rishi 2013-04-28 18:49:50

@rishi使用[RichFaces v3.3日曆組件]（http：// livedemo。 exadel.com/richfaces-demo/richfaces/calendar.jsf?c=calendar&tab=usage）。因爲它用於JSF 2，所以不要使用RichFaces 4。x – 2013-04-28 19:03:21

可否請您告訴我您使用jsf 1.2的任何jquery timepicker。 – rishi 2013-04-29 13:41:30

看起來你已經包括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>。嘗試只保留一個鏈接，看看如何。

來源

2013-04-27 09:18:12 Eli

我試過你說過的話。但它不工作。我認爲這個問題是另一回事。 – rishi 2013-04-27 09:34:07

@rishi對不起，但我從未體驗過'jsf'，所以希望其他人可以在這種情況下幫助你:) – Eli 2013-04-27 09:37:49

是的，這是一個帶有''內部組件ID的JSF問題。非常特別的JSF。 – 2013-04-27 16:22:43

jQuery時鐘不工作在jsf 1.2

回答

相關問題