user1285928
Reputation: 1476
Datepicker is not working in AJAX JSF page
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?
Upvotes: 0
Views: 5035
Answers (2)
Daniel
Reputation: 37061
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'
});
}
});
});
Upvotes: 4
HashimR
Reputation: 3833
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?
Upvotes: 2
Related Questions
- Primefaces Date Value does not set correct value after ajax dateSelect event update
- Primefaces datepicker in month-view
- Date Picker is not working on my jsf and xhtml file can anyone guide me please
- Event dateSelect on primefaces ajax in calendar not working
- f:ajax don't fired with event "change"
- Call Jquery datepicker in JSF page
- how to render selected date when I select date from calendar using primefaces?
- how to use jquery datepicker in jsf
- Event for select a date on datePicker
- Integrating jquery datepicker into jsf