Datepicker is not working in AJAX JSF page
Question
I have a JSF page with Datepicker. The problem is when I use AJAX to update the data into the page. After I execute AJAX action the page is datepicker is not working:
<?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>
<h:commandButton value=" Save Account " rendered="#{AccountProfileController.editable}" action="#{AccountProfileController.saveData}" update="growl">
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
<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>
I tested to remove the AJAX part - the datepicker is working properly. Can you tell me why AJAX prevents the JavaScript to work?
2 answers
solution1
4 ACCPTED 2012-08-02 09:23:52
add this (do not replace your current code)
$(window).load(function () {
jsf.ajax.addOnEvent(function(data) {
if (data.status === 'success') {
$(".datepicker").datepicker({
inline: true,
showWeek: true,
firstDay: 1,
dateFormat: 'dd-MM-yy'
});
}
});
});
solution2
2 2012-07-31 09:41:08
Yes, Datepicker might not work after AJAX update.
These link might be helpful.
jQuery Datepicker does not work after Ajax Partial Postback .
jQuery date picker not persistant after AJAX
Datepicker after Ajax Call not quite working - unexpected behavior?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Ajax not working in a conditionally rendered include page in jsf
Call Jquery datepicker in JSF page
Jquery Datepicker in AJAX page
Multiple datepicker in same page with AJAX
Bootstrap datepicker not working with AJAX load()
Datepicker not working in div loaded by ajax
Loading PrimeFaces Schedule JSF page through ajax into another JSF page
Highlighting a row in a JSF page is not working
jsf.ajax.request not working completely
Why JSF ajax status success not working in Chrome?
Related Tags