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?
add this (do not replace your current code)