gpt4 book ai didi

javascript - Datepicker 在 AJAX JSF 页面中不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 20:20:26 27 4
gpt4 key购买 nike

我有一个带日期选择器的 JSF 页面。问题是当我使用 AJAX 将数据更新到页面中时。在我执行 AJAX 操作后,页面是 datepicker 不工作:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" alt="DX-57" /> Account Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:100%; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="logodiv" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Account Profile" style="position:relative" value="resources/images/logo_account_profile.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">

<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">

<div id="settingsdiva" style="width:850px; height:500px; position:absolute; background-color:transparent; top:20px; left:20px">

<h:form id="form">
<table>
<ui:repeat var="ud" value="#{AccountProfileController.userData}">
<tr>
<td>User ID</td>
<td>
<h:outputText value="#{ud.userid}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText value="#{ud.userid}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>Group ID</td>
<td>
<h:outputText value="#{ud.groupid}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText id="groupid" value="#{ud.groupid}" rendered="#{AccountProfileController.editable}"
validator="#{ValidatorController.validateEditGroupID}" autocomplete="off">
<f:ajax event="blur" render="groupidvalidator" />
</h:inputText>
<h:message id="groupidvalidator" for="groupid" />
</td>
</tr>
<tr>
<td>Special Number</td>
<td>
<h:outputText value="#{ud.specialnumber}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText value="#{ud.specialnumber}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>Username</td>
<td>
<h:outputText value="#{ud.username}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText value="#{ud.username}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<h:outputText value="Encrypted"
rendered="#{not AccountProfileController.editable}" />
<h:inputText value="#{ud.passwd}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>Date to change password</td>
<td>
<h:outputText value="#{ud.datetochangepasswd}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText styleClass="datepicker" value="#{ud.datetochangepasswd}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>Address</td>
<td>
<h:outputText value="#{ud.address}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText value="#{ud.address}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>State/Region</td>
<td>
<h:outputText value="#{ud.stateregion}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText value="#{ud.stateregion}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>Country</td>
<td>
<h:outputText value="#{ud.country}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText value="#{ud.country}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>User Status</td>
<td>
<h:outputText value="#{ud.userstatus}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText value="#{ud.userstatus}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>Telephone</td>
<td>
<h:outputText value="#{ud.telephone}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText value="#{ud.telephone}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>Date User Added</td>
<td>
<h:outputText value="#{ud.dateuseradded}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText styleClass="datepicker" value="#{ud.dateuseradded}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>User Expire Date</td>
<td>
<h:outputText value="#{ud.userexpiredate}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText styleClass="datepicker" value="#{ud.userexpiredate}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>Date User Locked</td>
<td>
<h:outputText value="#{ud.dateuserlocked}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText id="datetouserlocked" styleClass="datepicker" value="#{ud.dateuserlocked}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>City</td>
<td>
<h:outputText value="#{ud.city}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText value="#{ud.city}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>E-mail</td>
<td>
<h:outputText value="#{ud.email}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText value="#{ud.email}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>
<tr>
<td>Description</td>
<td>
<h:outputText value="#{ud.description}"
rendered="#{not AccountProfileController.editable}" />
<h:inputText value="#{ud.description}" rendered="#{AccountProfileController.editable}" />
</td>
</tr>

</ui:repeat>
</table>
<!-- Insert this in order to use JGrown message-->
<p:growl id="growl" showDetail="true" sticky="true" />
<h:commandButton value=" Edit Account " rendered="#{not AccountProfileController.editable}" action="#{AccountProfileController.editAccount(true)}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>&nbsp;
<h:commandButton value=" Save Account " rendered="#{AccountProfileController.editable}" action="#{AccountProfileController.saveData}" update="growl">
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>&nbsp;
<h:commandButton value=" Cancel " rendered="#{AccountProfileController.editable}" action="#{AccountProfileController.initDBData}" >
<f:ajax render="@form"></f:ajax>
</h:commandButton>

<script type="text/javascript">
//For calendar
$(".datepicker").datepicker({
inline: true,
showWeek: true,
firstDay: 1,
dateFormat: 'dd-MM-yy'
});
</script>
<script type="text/javascript" src="resources/js/tabs.js"></script>

</h:form>

</div>

<div id="settingsdivb" style="width:450px; height:500px; position:absolute; background-color:transparent; top:20px; left:600px">

</div>

</div>
</div>

</h:body>
</html>

我测试删除 AJAX 部分 - 日期选择器工作正常。你能告诉我为什么 AJAX 会阻止 JavaScript 工作吗?

最佳答案

添加这个(不要替换你当前的代码)

$(window).load(function () {
jsf.ajax.addOnEvent(function(data) {
if (data.status === 'success') {
$(".datepicker").datepicker({
inline: true,
showWeek: true,
firstDay: 1,
dateFormat: 'dd-MM-yy'
});
}
});
});

关于javascript - Datepicker 在 AJAX JSF 页面中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11736300/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com