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" ".dtd">
<html xmlns="" xml:lang="en" lang="en"
xmlns:h=""
xmlns:f=""
xmlns:ui=""
xmlns:p="">
<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}" autoplete="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:mandButton value=" Edit Account " rendered="#{not AccountProfileController.editable}" action="#{AccountProfileController.editAccount(true)}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:mandButton value=" Save Account " rendered="#{AccountProfileController.editable}" action="#{AccountProfileController.saveData}" update="growl">
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:mandButton value=" Cancel " rendered="#{AccountProfileController.editable}" action="#{AccountProfileController.initDBData}" >
<f:ajax render="@form"></f:ajax>
</h:mandButton>
<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?
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/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun./jsf/html"
xmlns:f="http://java.sun./jsf/core"
xmlns:ui="http://java.sun./jsf/facelets"
xmlns:p="http://primefaces/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}" autoplete="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:mandButton value=" Edit Account " rendered="#{not AccountProfileController.editable}" action="#{AccountProfileController.editAccount(true)}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:mandButton value=" Save Account " rendered="#{AccountProfileController.editable}" action="#{AccountProfileController.saveData}" update="growl">
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:mandButton value=" Cancel " rendered="#{AccountProfileController.editable}" action="#{AccountProfileController.initDBData}" >
<f:ajax render="@form"></f:ajax>
</h:mandButton>
<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?
Share Improve this question edited Jul 31, 2012 at 11:14 maple_shaft 10.5k6 gold badges48 silver badges77 bronze badges asked Jul 31, 2012 at 8:44 user1285928user1285928 1,48629 gold badges102 silver badges156 bronze badges 3- You are already using Primefaces ponents, why not just use the Primefaces Calendar ponent? It is built using jQuery UI DatePicker and they have already went through the work of resolving the AJAX issues with this control. – maple_shaft Commented Jul 31, 2012 at 11:15
- Because I face this problem with Primefaces calendar : stackoverflow./questions/11719452/… – user1285928 Commented Jul 31, 2012 at 11:18
- 1 You include some css that is affecting, primefaces. Find and remove it. – Cagatay Civici Commented Jul 31, 2012 at 16:35
2 Answers
Reset to default 4 +100add 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'
});
}
});
});
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?