Question

我已将datepicker()函数添加到我的表单元素id=fromDate

AllocateTask.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/webpages/templates/MainTemplate.xhtml">
    <ui:define name="infomationPartOfBody">
        <h:form>
            <div class="infoContent">
                <table class="login">
                    <tr>
                        <td><h:outputLabel value="Task to be Allocated"></h:outputLabel></td>
                        <td><h:inputText id="subtaskid" value="#{allocateTaskBean.taskID}"/></td>    
                    </tr>
                    <tr>
                        <td><h:outputLabel value="Employee for the Task"/></td>
                        <td><h:inputText id="empid" value="#{allocateTaskBean.empID}"/> </td>
                    </tr>   
                    <tr>
                        <td><h:outputLabel value="From"/></td>
                        <td><h:inputText id="fromDate" value="#{allocateTaskBean.fromDate}"/></td>
                    </tr>
                    <tr>
                        <td><h:outputLabel value="To"/</td>
                        <td><h:inputText id="toDate" value="#{allocateTaskBean.toDate}"/></td>
                    </tr>
                    <tr>
                        <td><h:commandButton value="Allocate" action="#{allocateTaskBean.allocateTask}" ></h:commandButton></td>
                    </tr>
                    <tr>
                        <!--<td> <h:message value="{allocateTaskBean.messagePrint}"/> </td>-->
                    </tr>
                </table>        
            </div> 
        </h:form>
    </ui:define>
</ui:composition>

我的JQuery文件（JQueryFile.js）：

$(document).ready(function()
{   
    $("#loginWindow").hide();
    $(".reportItems").hide();
    $("#fromDate").datepicker();

    $("#loginSlide").click(function()
    {
        $("#loginWindow").slideToggle(200);
    });

    $(".reportMenu").click(function()
    {
        $(".reportItems").slideToggle(150);
    });      
});

现在我使用了模板，脚本已添加到模板文件的头部：MainTemplate.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <f:view>
        <h:head>
            <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
            <script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
            <script type="text/javascript" src="../JavaScriptPages/JQueryFile.js"></script>

            <title>State Transport Department- Work Schedule</title>
            <link  rel="stylesheet" type="text/css" href="../CSS/CompleteTemplateCSS.css"/>
            <link  rel="stylesheet" type="text/css" href="../CSS/templateCSS.css"/>
        </h:head>

// The rest of the content

我的问题

当我点击id=fromDate的文字字段时，日历不会滑落并显示。我无法弄清楚问题出在哪里。

生成的源代码是：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2">
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js">  </script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery- ui.min.js"></script>
    <script type="text/javascript" src="../JavaScriptPages/JQueryFile.js"></script>

        <title>State Transport Department- Work Schedule</title> 
        <link rel="stylesheet" type="text/css" href="../CSS/CompleteTemplateCSS.css" />
    <link rel="stylesheet" type="text/css" href="../CSS/templateCSS.css" /></head>
  <body>

<div class="infoContent">
<table class="login">
 <tr>
            <td><label>From</label> </td>
            <td><input id="j_idt26:fromDate" type="text" name="j_idt26:fromDate" /></td>
        </tr>

</table> </div></div></body></html>

Answer 1

问题是你的框架（jsf-2）正在改变元素的ID。

您可以在javascript中使用生成的ID，也可以只使用一个类：

<td><h:inputText id="fromDate" value="#{allocateTaskBean.fromDate}" class="datetime"/></td>

和

$(".datetime").datepicker();

jQuery的datepicker（）函数无法正常工作

我的问题

1 个答案: