How to make required = true in inputtext inside <p:dialog> - validation

So, basically I just want to set inputTextArea validation is not null / required = true, but when I set that, it's effect other button too. So, i should set param and it won't effect other button.
But, it makes the validation isn't working. Here's my code :
<p:dialog id="ajaxdialogs" header="Hapus Data" modal="true" widgetVar="dlg1" showEffect="fade" hideEffect="fade" closable="true">
<p:messages id="errorx"></p:messages>
<h:panelGrid columns="1">
<p:outputLabel value="Anda yakin ingin menghapus #{empGradeBacking.selectedEmp.empGradeName}?"></p:outputLabel>
<h:panelGrid styleClass="reasonDown">
<p:outputLabel value="Alasan "></p:outputLabel>
<p:inputTextarea required="#{param['form:inputtext']==null} true" value="#{empGradeBacking.selectedEmp.deletedReason}" cols="40" rows="5" minQueryLength="1" counter="display" maxlength="200" autoResize="false" counterTemplate="{0} karakter tersisa" validatorMessage="alasan tidak boleh kosong"></p:inputTextarea>
<h:outputText id="display" styleClass="charremaining"></h:outputText>
</h:panelGrid>
</h:panelGrid>
<h:panelGrid styleClass="addDeleteDown" columns="2">
<p:commandButton id="inputtext" ignoreAutoUpdate="true" value="#{UIBundle['text.page.button.yes']}" actionListener="#{empGradeBacking.deleteEmpGrade}" icon="ui-icon-check" oncomplete="if (!args.validationFailed) PF('dlg1').hide()" update="errorx #([id$=empB])"></p:commandButton>
<p:commandButton value="#{UIBundle['text.page.button.no']}" type="button" onclick="PF('dlg1').hide()" icon="ui-icon-close" immediate="true"/>
</h:panelGrid>
</p:dialog>
</p:tab>
</p:tabView>

Related

Page refresh calls the action listener function

I have a JSF application. In the home.xhtml, I have included 4 tabs. Each tab is a different xhtml form. The first form has an action listener. The problem is on all 4 tabs if I refresh (F5) the page, the action listener gets called.
On click of the command button, I check the DB to check if there are existing employees with the same details. If yes, I show the confirm dialog to proceed with Generation. If the user clicks Yes here, the new ID is generated. This generation function gets called again and again if I refresh the page. I made the call as ajax="false" as well but it does not help. If I make ajax="true", It does not let me change the tabs. The page sort of hangs. Please suggest me on how to stop this.
<h:form id="employeeIdGenerationForm" prependId="false">
<p:confirmDialog id="confirmationID" widgetVar="confirmationVar" header="Confirmation" showEffect="fade" hideEffect="explode"
message="#{employeeMaintenanceBean.employee.getWarningsList()}"
rendered="#{employeeMaintenanceBean.showExistingEmployeeWarning}" closable="false">
<p:commandButton value="Yes" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" onclick="PF('confirmationVar').hide()"
actionListener="#{employeeMaintenanceBean.generateEmployeeID}" ajax="false"
update="#form:confirmation #form:msgPanel_EmployeeIDGeneration #form:firstName #form:surName" />
<p:commandButton value="No" styleClass="ui-confirmdialog-no" icon="ui-icon-close" onclick="PF('confirmationVar').hide()"/>
</p:confirmDialog>
<p:panel styleClass="messagePanel"
style="color: #004986; font-size: 15px;"
header="New Employee ID Generation">
<br />
<h:panelGrid columns="1" id="msgPanel_EmployeeIDGeneration"
width="100%" align="center" style="text-align:center;">
<p:messages />
</h:panelGrid>
<h:panelGrid columns="2" border="0">
<h:outputLabel styleClass="label" value="First Name" />
<p:inputText value="#{employeeMaintenanceBean.employee.firstName}"
id="firstName" required="true"
requiredMessage="First Name is mandatory" maxlength="50"
styleClass="value" />
<h:outputLabel styleClass="label" value="Last Name" />
<p:inputText value="#{employeeMaintenanceBean.employee.lastName}"
id="surName" required="true"
requiredMessage="Last Name is mandatory" maxlength="50"
styleClass="value" />
<h:outputLabel styleClass="label" value="Comments" />
<p:inputTextarea
value="#{employeeMaintenanceBean.employee.comments}" id="comments"
maxlength="256" styleClass="value" />
<p:commandButton id="generateID" ajax="false"
actionListener="#{employeeMaintenanceBean.isExistingEmployee}"
title="Generate Employee ID" value="Generate Employee ID" update="#form:confirmationID #form:msgPanel_EmployeeIDGeneration">
</p:commandButton>
</h:panelGrid>
</p:panel>
</h:form>
The main home.xhtml is:
<h:head/>
<h:body>
<ui:composition template="/template/common/commonLayout.xhtml">
<ui:define name="content">
<p:idleMonitor timeout="300000">
<p:ajax event="idle" listener="#{baseBean.sessionTimeOut}"/>
</p:idleMonitor>
<p:tabView id="tabView" activeIndex="#{tabViewBean.mainTabActiveIndex}" dynamic="true" cache="false">
<p:ajax event="tabChange" listener="#{tabViewBean.onMainTabChange}" update="tabView" />
<p:tab id="employeeIdGeneration" title="New Employee ID Generation" rendered="#{tabViewBean.currentUser.hasAccessToPage('employeeIdGeneration')}">
<ui:include src="employeeIdGeneration.xhtml"/>
</p:tab>
<p:tab id="employeeMaintenance" title="Update New Employee Details" rendered="#{tabViewBean.currentUser.hasAccessToPage('employeeMaintenance')}">
<ui:include src="employeeIdMaintenance.xhtml"/>
</p:tab>
<p:tab id="employeeHistoryView" title="New Employee Update History" rendered="#{tabViewBean.currentUser.hasAccessToPage('employeeHistoryView')}">
<ui:include src="employeeHistoryView.xhtml"/>
</p:tab>
<p:tab id="userAccessMaintenance" title="User Access Maintenance" rendered="#{tabViewBean.currentUser.hasAccessToPage('userAccessMaintenance')}">
<ui:include src="userMaintenance.xhtml"/>
</p:tab>
</p:tabView>
</ui:define>
</ui:composition>
</h:body>

Multiple PrimeFaces dialogs on one page

I am facing problems with dialog windows validation. On home.xhtml I have a tabview with 3 nested dataTables and CRUD buttons (see screenshot). Every button is supposed to call a dialog window with a form to add/edit entity. But whenever I fail to validate some field in any form - all other forms are displayed too:
I would like to validate and display only one dialog at a time and keep it displayed untill user presses "Cancel" button or inputs valid values and presses submit button. No other dialogs shold be opened at this time.
home.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:component xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ex="http://java.sun.com/jsf/composite/nsobchuk">
<h:head>
<link rel="stylesheet" href="../css/style.css"/>
</h:head>
<h:body>
<h:form id="logout" class="logout" >
<h:commandButton action="#{loginBean.logout()}" value="logout"/>
</h:form>
<p:tabView id="tab" orientation="left">
<p:tab title="Users">
<h:form id="form1">
<h:panelGrid columns="9">
<p:commandButton type="button" value="Add" onclick="dlg1.show()"/>
<p:commandButton id="editUser" type="button" value="Edit" onclick="dlg2.show()" disabled="#{homeBean.selectedUser == null}"/>
<p:dialog id="editUserDialogerDialog" widgetVar="dlg2" header="Sorry" >
<h:outputText value="I didn't have enogh time to finish this functionality. Feel free to test other buttons."/>
</p:dialog>
<p:commandButton id="deleteUser" type="button" onclick="confirmation1.show()" value="Delete" disabled="#{homeBean.selectedUser == null}"/>
<p:confirmDialog message="Are you sure you want to delete user?" header="Confirmation"
severity="alert" widgetVar="confirmation1">
<p:commandButton value="Yes" update=":tab:users" process="#this" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"
oncomplete="confirmation1.hide()" action="#{homeBean.deleteUser}" />
<p:commandButton value="No" onclick="confirmation1.hide()" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</p:confirmDialog>
</h:panelGrid>
</h:form>
<p:dataTable id="users" var="user" value="#{homeBean.users}"
scrollable="true" scrollHeight="250" selectionMode="single"
selection="#{homeBean.selectedUser}" rowKey="#{user.userId}"
sortMode="single">
<p:ajax event="rowSelect" listener="#{homeBean.onUserRowSelect}" update=":tab:form1:deleteUser, :tab:form1:editUser"/>
<p:ajax event="rowUnselect" listener="#{homeBean.onUserRowUnselect}" update=":tab:form1:deleteUser, :tab:form1:editUser"/>
<p:column headerText="Login" sortBy="#{user.login}">
<h:outputText value="#{user.login}"/>
</p:column>
<p:column headerText="Password" sortBy="#{user.password}">
<h:outputText value="#{user.password}"/>
</p:column>
<p:column headerText="Role" sortBy="#{user.role}">
<h:outputText value="#{user.role}"/>
</p:column>
<p:column headerText="Name" sortBy="#{user.firstName}">
<h:outputText value="#{user.firstName}"/>
</p:column>
<p:column headerText="Surname" sortBy="#{user.lastName}">
<h:outputText value="#{user.lastName}"/>
</p:column>
</p:dataTable>
<ex:exporter target=":tab:users" fileName="Users"/>
</p:tab>
<p:tab title="Computers">
<h:form id="form2">
<h:panelGrid columns="9">
<p:commandButton type="button" value="Add" onclick="dlg3.show()"/>
<p:commandButton id="editComp" type="button" value="Edit" onclick="dlg4.show()" disabled="#{homeBean.selectedComputer == null}"/>
<p:dialog id="editCompDialog" widgetVar="dlg4" header="Sorry" >
<h:outputText value="I didn't have enogh time to finish this functionality. Feel free to test other buttons."/>
</p:dialog>
<p:commandButton id="deleteComp" type="button" onclick="confirmation2.show()" value="Delete" disabled="#{homeBean.selectedComputer == null}"/>
<p:confirmDialog message="Are you sure you want to delete this computer?" header="Confirmation"
severity="alert" widgetVar="confirmation2">
<p:commandButton value="Yes" update=":tab:computers" process="#this" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"
oncomplete="confirmation2.hide()" action="#{homeBean.deleteComputer}"/>
<p:commandButton value="No" onclick="confirmation2.hide()" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</p:confirmDialog>
</h:panelGrid>
</h:form>
<p:dataTable id="computers" var="computer" value="#{homeBean.computers}"
scrollable="true" scrollHeight="250" selectionMode="single"
selection="#{homeBean.selectedComputer}" rowKey="#{computer.computerId}"
sortMode="single" >
<p:ajax event="rowSelect" listener="#{homeBean.onCompRowSelect}" update=":tab:form2:editComp, :tab:form2:deleteComp"/>
<p:column headerText="Login" sortBy="#{computer.login}">
<h:outputText value="#{computer.login}"/>
</p:column>
<p:column headerText="Password" sortBy="#{computer.password}">
<h:outputText value="#{computer.password}"/>
</p:column>
<p:column headerText="Name" sortBy="#{computer.computerName}" >
<h:outputText value="#{computer.computerName}"/>
</p:column>
<p:column headerText="IP address" sortBy="#{computer.ipAddress}">
<h:outputText value="#{computer.ipAddress}"/>
</p:column>
</p:dataTable>
<ex:exporter target=":tab:computers" fileName="Computers"/>
</p:tab>
<p:tab title="Applications">
<h:form id="form3">
<h:panelGrid columns="9">
<p:commandButton type="button" value="Add" onclick="dlg5.show()"/>
<p:commandButton id="editApp" type="button" value="Edit" onclick="dlg6.show()" disabled="#{homeBean.selectedApplication == null}"/>
<p:dialog id="editAppDialog" widgetVar="dlg6" header="Sorry" >
<h:outputText value="I didn't have enogh time to finish this functionality. Feel free to test other buttons."/>
</p:dialog>
<p:commandButton id="deleteApp" type="button" onclick="confirmation3.show()" value="Delete" disabled="#{homeBean.selectedApplication == null}"/>
<p:confirmDialog message="Are you sure you want to delete this application?" header="Confirmation"
severity="alert" widgetVar="confirmation3">
<p:commandButton value="Yes" update=":tab:applications" process="#this" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"
oncomplete="confirmation3.hide()" action="#{homeBean.deleteApplication}"/>
<p:commandButton value="No" onclick="confirmation3.hide()" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</p:confirmDialog>
</h:panelGrid>
</h:form>
<p:dataTable id="applications" var="app" value="#{homeBean.applications}"
scrollable="true" scrollHeight="250" selectionMode="single"
selection="#{homeBean.selectedApplication}" rowKey="#{app.appId}"
sortMode="single" >
<p:ajax event="rowSelect" listener="#{homeBean.onAppRowSelect}" update=":tab:form3:editApp, :tab:form3:deleteApp"/>
<p:column headerText="Name" sortBy="#{app.appName}">
<h:outputText value="#{app.appName}"/>
</p:column>
<p:column headerText="Vendor" sortBy="#{app.vendorName}" >
<h:outputText value="#{app.vendorName}"/>
</p:column>
<p:column headerText="License required" sortBy="#{app.licenseRequired}">
<h:outputText value="#{app.licenseRequired}"/>
</p:column>
</p:dataTable>
<ex:exporter target=":tab:applications" fileName="Applications" />
</p:tab>
</p:tabView>
<h:form id="dlg1form">
<p:dialog id="addUserDialog" header="Add Dialog" modal="true" closable="false"
widgetVar="dlg1" width="620" visible="#{facesContext.validationFailed}" >
<h:panelGrid columns="3">
<h:outputLabel for="login" value="Login: "/>
<p:inputText id="login" value="#{homeBean.newUser.login}" required="true"
label="Login: " maxlength="20">
<f:validator binding="#{loginValidator}"/>
</p:inputText>
<p:message for="login"/>
<h:outputLabel for="password" value="Password: "/>
<p:password id="password" value="#{homeBean.newUser.password}" required="true"
feedback="true" label="Password: " maxlength="32"/>
<p:message for="password" />
<h:outputLabel for="firstName" value="First Name: "/>
<p:inputText id="firstName" value="#{homeBean.newUser.firstName}"
label="First Name: " maxlength="20"/>
<p:message for="firstName"/>
<h:outputLabel for="lastName" value="Last Name: "/>
<p:inputText id="lastName" value="#{homeBean.newUser.lastName}"
label="Last Name: " maxlength="20"/>
<p:message for="lastName"/>
<h:outputLabel for="role" value="Role: "/>
<p:selectOneMenu id="role" value="#{homeBean.newUser.role}" required="true" style="width: 80px;" >
<f:selectItem itemLabel="user" itemValue="ROLE_USER" />
<f:selectItem itemLabel="admin" itemValue="ROLE_ADMIN" />
</p:selectOneMenu>
<p:message for="role"/>
</h:panelGrid>
<p:commandButton value="Cancel" immediate="true" onclick="dlg1.hide()" update=":dlg1form:addUserDialog">
<p:resetInput target="addUserDialog" />
</p:commandButton>
<p:commandButton value="Add" update=":tab:users, :dlg1form:addUserDialog" process="#this"
onclick="if (args & & !args.validationFailed) dlg1.hide()" action="#{homeBean.addUser}"/>
</p:dialog>
</h:form>
<h:form id="dlg3form">
<p:dialog id="addCompDialog" header="Add Dialog" draggable="true" closable="false" modal="true"
widgetVar="dlg3" width="600" visible="#{facesContext.validationFailed}">
<h:panelGrid columns="3">
<h:outputLabel for="pclogin" value="Login: "/>
<p:inputText id="pclogin" value="#{homeBean.newComputer.login}" required="true"
label="Login: " maxlength="20">
<f:validator binding="#{loginValidator}"/>
</p:inputText>
<p:message for="pclogin"/>
<h:outputLabel for="pcpassword" value="Password: "/>
<p:password id="pcpassword" value="#{homeBean.newComputer.password}" required="true"
feedback="true" label="Password: " maxlength="32"/>
<p:message for="pcpassword" />
<h:outputLabel for="compName" value="Computer Name: "/>
<p:inputText id="compName" value="#{homeBean.newComputer.computerName}" required="true"
label="Computer Name: " maxlength="20"/>
<p:message for="compName"/>
<h:outputLabel for="ipaddress" value="IP address: "/>
<p:inputText id="ipaddress" value="#{homeBean.newComputer.ipAddress}" required="true"
label="IP address: " maxlength="20"/>
<p:message for="ipaddress"/>
</h:panelGrid>
<p:commandButton value="Cancel" immediate="true" onclick="dlg3.hide()" update=":dlg3form:addCompDialog">
<p:resetInput target="addCompDialog" />
</p:commandButton>
<p:commandButton value="Add" update=":tab:computers, :dlg3form:addCompDialog" process="#this"
onclick="if (args & & !args.validationFailed) dlg3.hide()" action="#{homeBean.addComputer}"/>
</p:dialog>
</h:form>
<h:form id="dlg5form">
<p:dialog id="addAppDialog" header="Add Dialog" draggable="true" closable="false" modal="true"
widgetVar="dlg5" width="600" visible="#{facesContext.validationFailed}">
<h:panelGrid columns="3">
<h:outputLabel for="appName" value="Name: "/>
<p:inputText id="appName" value="#{homeBean.newApplication.appName}" required="true"
label="Name: "/>
<p:message for="appName"/>
<h:outputLabel for="vendorName" value="Vendor: "/>
<p:inputText id="vendorName" value="#{homeBean.newApplication.vendorName}"
label="Vendor: " required="true" />
<p:message for="vendorName"/>
<h:outputLabel for="appLicense" value="Requires license: "/>
<p:selectOneMenu id="appLicense" value="#{homeBean.newApplication.licenseRequired}" required="true" style="width: 80px;" >
<f:selectItem itemLabel="True" itemValue="#{true}" />
<f:selectItem itemLabel="False" itemValue="#{false}" />
</p:selectOneMenu>
<p:message for="appLicense"/>
</h:panelGrid>
<p:commandButton value="Cancel" immediate="true" onclick="dlg5.hide()" update=":dlg5form:addAppDialog">
<p:resetInput target="addAppDialog" />
</p:commandButton>
<p:commandButton value="Add" update=":tab:applications, :dlg5form:addAppDialog" process="#this"
onclick="if (args & & !args.validationFailed) dlg5.hide()" action="#{homeBean.addApplication}"/>
</p:dialog>
</h:form>
</h:body>
</ui:component>
HomeBean.java:
package com.infostroy.adminportal.controller.bean;
import com.infostroy.adminportal.bean.BaseBean;
import com.infostroy.adminportal.model.Application;
import com.infostroy.adminportal.model.Computer;
import com.infostroy.adminportal.model.User;
import com.infostroy.adminportal.service.HibernateDBManager;
import java.io.IOException;
import java.math.BigInteger;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.List;
import org.primefaces.context.RequestContext;
import org.primefaces.event.SelectEvent;
import org.primefaces.event.UnselectEvent;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;
#Component
#Scope("session")
public class HomeBean extends BaseBean {
private static final String editUserBtn = "tab:form1:editUser";
private static final String deleteUserBtn = "tab:form1:deleteUser";
private static final String editCompBtn = "tab:form2:editComp";
private static final String deleteCompBtn = "tab:form2:deleteComp";
private static final String editAppBtn = "tab:form3:editApp";
private static final String deleteAppBtn = "tab:form3:deleteApp";
#Autowired
private HibernateDBManager hibernateDBManager;
private List<User> users;
private List<Computer> computers;
private List<Application> applications;
private User selectedUser, newUser;
private Computer selectedComputer, newComputer;
private Application selectedApplication, newApplication;
private RequestContext rc;
#Override
public void init() {
setUsers(hibernateDBManager.getAllUsers());
setComputers(hibernateDBManager.getAllComputers());
setApplications(hibernateDBManager.getAllApplications());
newUser = new User();
newComputer = new Computer();
newApplication = new Application();
rc = RequestContext.getCurrentInstance();
}
public void addUser() throws NoSuchAlgorithmException {
if (newUser != null && newUser.getPassword() != null) {
MessageDigest md = MessageDigest.getInstance("MD5");
md.update(newUser.getPassword().getBytes());
String hash = new BigInteger(1, md.digest()).toString(16);
newUser.setPassword(hash);
if (hibernateDBManager.insertUser(newUser)) {
users.add(newUser);
}
}
}
public void editUser() {
if (selectedUser != null) {
hibernateDBManager.updateUser(selectedUser);
users.set(users.indexOf(selectedUser), selectedUser);
selectedUser = null;
rc.update(deleteUserBtn);
rc.update(editUserBtn);
}
}
public void deleteUser() throws IOException {
if (selectedUser != null) {
if (hibernateDBManager.deleteUserById(selectedUser.getUserId()) > 0) {
users.remove(selectedUser);
selectedUser = null;
rc.update(deleteUserBtn);
rc.update(editUserBtn);
}
}
}
public void addComputer() {
if (newComputer != null && hibernateDBManager.insertComputer(newComputer)) {
computers.add(newComputer);
}
}
public void deleteComputer() {
if (selectedComputer != null) {
if (hibernateDBManager.deleteComputerById(selectedComputer.getComputerId()) > 0) {
computers.remove(selectedComputer);
selectedComputer = null;
rc.update(editCompBtn);
rc.update(deleteCompBtn);
}
}
}
public void addApplication() {
if (newApplication != null && hibernateDBManager.insertApplication(newApplication)) {
applications.add(newApplication);
}
}
public void deleteApplication() {
if (selectedApplication != null) {
if (hibernateDBManager.deleteApplicationById(selectedApplication.getAppId()) > 0) {
applications.remove(selectedApplication);
selectedApplication = null;
rc.update(editAppBtn);
rc.update(deleteAppBtn);
}
}
}
public void onUserRowSelect(SelectEvent event) {
setSelectedUser((User) event.getObject());
}
public void onUserRowUnselect(UnselectEvent event) {
setSelectedUser(null);
}
public void onCompRowSelect(SelectEvent event) {
setSelectedComputer((Computer) event.getObject());
}
public void onAppRowSelect(SelectEvent event) {
setSelectedApplication((Application) event.getObject());
}
//GETTERS etc.
}
Any ideas how this can be solved? How can I open and keep only one dialog opened untill it is validated? Every answer is highly appreciated. If you need some additional info - let me know and I will respond immidiately.
Thank you.
I was able to replicate the problem in my environment. In order to do that I've simplified your home.xhtml code (removing the managedbean references) and here is the changes to the dialogs that made them work:
<p:dialog id="addUserDialog" header="Add Dialog" modal="true" closable="false"
widgetVar="dlg1" width="620" >
<h:form id="dlg1form">
<h:panelGrid columns="3">
<h:outputLabel for="login" value="Login: "/>
<p:inputText id="login" required="true"
label="Login: " maxlength="20" >
</p:inputText>
<p:message for="login"/>
<h:outputLabel for="password" value="Password: "/>
<p:password id="password" required="true"
feedback="true" label="Password: " maxlength="32"/>
<p:message for="password" />
<h:outputLabel for="firstName" value="First Name: "/>
<p:inputText id="firstName"
label="First Name: " maxlength="20"/>
<p:message for="firstName"/>
<h:outputLabel for="lastName" value="Last Name: "/>
<p:inputText id="lastName"
label="Last Name: " maxlength="20"/>
<p:message for="lastName"/>
<h:outputLabel for="role" value="Role: "/>
<p:selectOneMenu id="role" required="true" style="width: 80px;" >
<f:selectItem itemLabel="user" itemValue="ROLE_USER" />
<f:selectItem itemLabel="admin" itemValue="ROLE_ADMIN" />
</p:selectOneMenu>
<p:message for="role"/>
</h:panelGrid>
<p:commandButton value="Cancel" immediate="true" onclick="dlg1.hide()" update="#form">
<p:resetInput target="addUserDialog" />
</p:commandButton>
<p:commandButton value="Add" update="#form"
oncomplete="if (args && !args.validationFailed) dlg1.hide()" />
</h:form>
</p:dialog>
<p:dialog id="addCompDialog" header="Add Dialog" draggable="true" closable="false" modal="true"
widgetVar="dlg3" width="600">
<h:form id="dlg3form">
<h:panelGrid columns="3">
<h:outputLabel for="pclogin" value="Login: "/>
<p:inputText id="pclogin" required="true"
label="Login: " maxlength="20">
</p:inputText>
<p:message for="pclogin"/>
<h:outputLabel for="pcpassword" value="Password: "/>
<p:password id="pcpassword" required="true"
feedback="true" label="Password: " maxlength="32"/>
<p:message for="pcpassword" />
<h:outputLabel for="compName" value="Computer Name: "/>
<p:inputText id="compName" required="true"
label="Computer Name: " maxlength="20"/>
<p:message for="compName"/>
<h:outputLabel for="ipaddress" value="IP address: "/>
<p:inputText id="ipaddress" required="true"
label="IP address: " maxlength="20"/>
<p:message for="ipaddress"/>
</h:panelGrid>
<p:commandButton value="Cancel" immediate="true" onclick="dlg3.hide()" process="#this" update="#form">
<p:resetInput target="addCompDialog" />
</p:commandButton>
<p:commandButton value="Add" update="#form"
oncomplete="if (args && !args.validationFailed) dlg3.hide()" />
</h:form>
</p:dialog>
<p:dialog id="addAppDialog" header="Add Dialog" draggable="true" closable="false" modal="true"
widgetVar="dlg5" width="600" >
<h:form id="dlg5form">
<h:panelGrid columns="3">
<h:outputLabel for="appName" value="Name: "/>
<p:inputText id="appName" required="true"
label="Name: "/>
<p:message for="appName"/>
<h:outputLabel for="vendorName" value="Vendor: "/>
<p:inputText id="vendorName"
label="Vendor: " required="true" />
<p:message for="vendorName"/>
<h:outputLabel for="appLicense" value="Requires license: "/>
<p:selectOneMenu id="appLicense" required="true" style="width: 80px;" >
<f:selectItem itemLabel="True" itemValue="#{true}" />
<f:selectItem itemLabel="False" itemValue="#{false}" />
</p:selectOneMenu>
<p:message for="appLicense"/>
</h:panelGrid>
<p:commandButton value="Cancel" immediate="true" onclick="dlg5.hide()" update="#form" process="#this">
<p:resetInput target="addAppDialog" />
</p:commandButton>
<p:commandButton value="Add" update="#form"
oncomplete="if (args && !args.validationFailed) dlg5.hide()"/>
</h:form>
</p:dialog>
Some notes:
I've noticed that you where testing validation onclick instead of oncomplete.
I've placed the form inside the dialog for no special reason, just habit.
I've removed the visible="#{facesContext.validationFailed}" because that won't be necessary.
The same happened with the process="#this" on add buttons, see more about Partial Process here.
Consider changing the cancel button logic to something like this:
<p:commandButton value="Cancel" action="#{viewMBean.clearUser}" oncomplete="dlg1.hide()" update="#form" process="#this" />
public void clearUser() {
newUser = new User();
}

PrimeFaces dialog is validated only the first time it appears

JSF 2.2, PrimeFaces 3.5.
home.xhtml contains a tabview with nested dataTables and add/edit/delete buttons. Each button is supposed to call a dialog with a form and submit/cancel buttons.
The problem is that validation is processed only once (see screenshot) and if I press "Add" / "Cancel" the dialog just hides and no validation is made. And if I try to reopen it once again and input values and hit "Add" - it just skips validation and renders response. So, basically, it just makes a initial request (if I guessed right).
Console output for pressing "Add" with empty values 3 times. First click has been processed the way I want it, but the next ones are just hiding the dialog without any validation:
2014-01-24 17:56:09,590 DEBUG [RequestLoggingPhaseListener] Entering JSF Phase: RESTORE_VIEW 1
2014-01-24 17:56:09,628 DEBUG [RequestLoggingPhaseListener] Entering JSF Phase: APPLY_REQUEST_VALUES 2
2014-01-24 17:56:09,633 DEBUG [RequestLoggingPhaseListener] Entering JSF Phase: PROCESS_VALIDATIONS 3
2014-01-24 17:56:09,645 DEBUG [RequestLoggingPhaseListener] Entering JSF Phase: RENDER_RESPONSE 6
2014-01-24 17:56:13,127 DEBUG [RequestLoggingPhaseListener] Entering JSF Phase: RESTORE_VIEW 1
2014-01-24 17:56:13,128 DEBUG [RequestLoggingPhaseListener] Entering JSF Phase: RENDER_RESPONSE 6
2014-01-24 17:56:16,557 DEBUG [RequestLoggingPhaseListener] Entering JSF Phase: RESTORE_VIEW 1
2014-01-24 17:56:16,558 DEBUG [RequestLoggingPhaseListener] Entering JSF Phase: RENDER_RESPONSE 6
home.xhtml (dialogs are at the bottom of a page):
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:component xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ex="http://java.sun.com/jsf/composite/nsobchuk">
<h:head>
<title>Home page</title>
<link rel="stylesheet" href="../css/style.css"/>
</h:head>
<h:body>
<h:form id="logout" class="logout" >
<h:commandButton action="#{loginBean.logout()}" value="logout"/>
</h:form>
<p:tabView id="tab" orientation="left">
<p:tab title="Users">
<h:form id="form1">
<h:panelGrid columns="9">
<p:commandButton type="button" value="Add" onclick="dlg1.show()" />
<p:commandButton id="editUser" type="button" value="Edit" onclick="dlg2.show()" disabled="#{homeBean.selectedUser == null}"/>
<p:dialog id="editUserDialogerDialog" widgetVar="dlg2" header="Sorry" >
<h:outputText value="I didn't have enogh time to finish this functionality. Feel free to test other buttons."/>
</p:dialog>
<p:commandButton id="deleteUser" type="button" onclick="confirmation1.show()" value="Delete" disabled="#{homeBean.selectedUser == null}"/>
<p:confirmDialog message="Are you sure you want to delete user?" header="Confirmation"
severity="alert" widgetVar="confirmation1">
<p:commandButton value="Yes" update=":tab:users" process="#this" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"
oncomplete="confirmation1.hide()" action="#{homeBean.deleteUser}" />
<p:commandButton value="No" onclick="confirmation1.hide()" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</p:confirmDialog>
</h:panelGrid>
</h:form>
<p:dataTable id="users" var="user" value="#{homeBean.users}"
scrollable="true" scrollHeight="250" selectionMode="single"
selection="#{homeBean.selectedUser}" rowKey="#{user.userId}"
sortMode="single">
<p:ajax event="rowSelect" listener="#{homeBean.onUserRowSelect}" update=":tab:form1:deleteUser, :tab:form1:editUser"/>
<p:ajax event="rowUnselect" listener="#{homeBean.onUserRowUnselect}" update=":tab:form1:deleteUser, :tab:form1:editUser"/>
<p:column headerText="Login" sortBy="#{user.login}">
<h:outputText value="#{user.login}"/>
</p:column>
<p:column headerText="Password" sortBy="#{user.password}">
<h:outputText value="#{user.password}"/>
</p:column>
<p:column headerText="Role" sortBy="#{user.role}">
<h:outputText value="#{user.role}"/>
</p:column>
<p:column headerText="Name" sortBy="#{user.firstName}">
<h:outputText value="#{user.firstName}"/>
</p:column>
<p:column headerText="Surname" sortBy="#{user.lastName}">
<h:outputText value="#{user.lastName}"/>
</p:column>
</p:dataTable>
<ex:exporter target=":tab:users" fileName="Users"/>
</p:tab>
<p:tab title="Computers">
<h:form id="form2">
<h:panelGrid columns="9">
<p:commandButton type="button" value="Add" onclick="dlg3.show()"/>
<p:commandButton id="editComp" type="button" value="Edit" onclick="dlg4.show()" disabled="#{homeBean.selectedComputer == null}"/>
<p:dialog id="editCompDialog" widgetVar="dlg4" header="Sorry" >
<h:outputText value="I didn't have enogh time to finish this functionality. Feel free to test other buttons."/>
</p:dialog>
<p:commandButton id="deleteComp" type="button" onclick="confirmation2.show()" value="Delete" disabled="#{homeBean.selectedComputer == null}"/>
<p:confirmDialog message="Are you sure you want to delete this computer?" header="Confirmation"
severity="alert" widgetVar="confirmation2">
<p:commandButton value="Yes" update=":tab:computers" process="#this" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"
oncomplete="confirmation2.hide()" action="#{homeBean.deleteComputer}"/>
<p:commandButton value="No" onclick="confirmation2.hide()" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</p:confirmDialog>
</h:panelGrid>
</h:form>
<p:dataTable id="computers" var="computer" value="#{homeBean.computers}"
scrollable="true" scrollHeight="250" selectionMode="single"
selection="#{homeBean.selectedComputer}" rowKey="#{computer.computerId}"
sortMode="single" >
<p:ajax event="rowSelect" listener="#{homeBean.onCompRowSelect}" update=":tab:form2:editComp, :tab:form2:deleteComp"/>
<p:column headerText="Login" sortBy="#{computer.login}">
<h:outputText value="#{computer.login}"/>
</p:column>
<p:column headerText="Password" sortBy="#{computer.password}">
<h:outputText value="#{computer.password}"/>
</p:column>
<p:column headerText="Name" sortBy="#{computer.computerName}" >
<h:outputText value="#{computer.computerName}"/>
</p:column>
<p:column headerText="IP address" sortBy="#{computer.ipAddress}">
<h:outputText value="#{computer.ipAddress}"/>
</p:column>
</p:dataTable>
<ex:exporter target=":tab:computers" fileName="Computers"/>
</p:tab>
<p:tab title="Applications">
<h:form id="form3">
<h:panelGrid columns="9">
<p:commandButton type="button" value="Add" onclick="dlg5.show()"/>
<p:commandButton id="editApp" type="button" value="Edit" onclick="dlg6.show()" disabled="#{homeBean.selectedApplication == null}"/>
<p:dialog id="editAppDialog" widgetVar="dlg6" header="Sorry" >
<h:outputText value="I didn't have enogh time to finish this functionality. Feel free to test other buttons."/>
</p:dialog>
<p:commandButton id="deleteApp" type="button" onclick="confirmation3.show()" value="Delete" disabled="#{homeBean.selectedApplication == null}"/>
<p:confirmDialog message="Are you sure you want to delete this application?" header="Confirmation"
severity="alert" widgetVar="confirmation3">
<p:commandButton value="Yes" update=":tab:applications" process="#this" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"
oncomplete="confirmation3.hide()" action="#{homeBean.deleteApplication}"/>
<p:commandButton value="No" onclick="confirmation3.hide()" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</p:confirmDialog>
</h:panelGrid>
</h:form>
<p:dataTable id="applications" var="app" value="#{homeBean.applications}"
scrollable="true" scrollHeight="250" selectionMode="single"
selection="#{homeBean.selectedApplication}" rowKey="#{app.appId}"
sortMode="single" >
<p:ajax event="rowSelect" listener="#{homeBean.onAppRowSelect}" update=":tab:form3:editApp, :tab:form3:deleteApp"/>
<p:column headerText="Name" sortBy="#{app.appName}">
<h:outputText value="#{app.appName}"/>
</p:column>
<p:column headerText="Vendor" sortBy="#{app.vendorName}" >
<h:outputText value="#{app.vendorName}"/>
</p:column>
<p:column headerText="License required" sortBy="#{app.licenseRequired}">
<h:outputText value="#{app.licenseRequired}"/>
</p:column>
</p:dataTable>
<ex:exporter target=":tab:applications" fileName="Applications" />
</p:tab>
</p:tabView>
<p:dialog id="addUserDialog" header="Add Dialog" modal="true" closable="false"
widgetVar="dlg1" width="620" >
<h:form id="dlg1form">
<h:panelGrid columns="3">
<h:outputLabel for="login" value="Login: "/>
<p:inputText id="login" required="true"
label="Login: " maxlength="20" >
</p:inputText>
<p:message for="login" />
<h:outputLabel for="password" value="Password: "/>
<p:password id="password" required="true"
feedback="true" label="Password: " maxlength="32"/>
<p:message for="password" />
<h:outputLabel for="firstName" value="First Name: "/>
<p:inputText id="firstName"
label="First Name: " maxlength="20"/>
<p:message for="firstName"/>
<h:outputLabel for="lastName" value="Last Name: "/>
<p:inputText id="lastName"
label="Last Name: " maxlength="20"/>
<p:message for="lastName"/>
<h:outputLabel for="role" value="Role: "/>
<p:selectOneMenu id="role" required="true" style="width: 80px;" >
<f:selectItem itemLabel="user" itemValue="ROLE_USER" />
<f:selectItem itemLabel="admin" itemValue="ROLE_ADMIN" />
</p:selectOneMenu>
<p:message for="role"/>
</h:panelGrid>
<p:commandButton value="Cancel" onclick="dlg1.hide()" update="#form">
<p:resetInput target="addUserDialog" />
</p:commandButton>
<p:commandButton value="Add" update="#form" immediate="false"
oncomplete="if (args && !args.validationFailed) dlg1.hide()" />
</h:form>
</p:dialog>
<p:dialog id="addCompDialog" header="Add Dialog" draggable="true" closable="false" modal="true"
widgetVar="dlg3" width="600">
<h:form id="dlg3form">
<h:panelGrid columns="3">
<h:outputLabel for="pclogin" value="Login: "/>
<p:inputText id="pclogin" required="true"
label="Login: " maxlength="20">
</p:inputText>
<p:message for="pclogin"/>
<h:outputLabel for="pcpassword" value="Password: "/>
<p:password id="pcpassword" required="true"
feedback="true" label="Password: " maxlength="32"/>
<p:message for="pcpassword" />
<h:outputLabel for="compName" value="Computer Name: "/>
<p:inputText id="compName" required="true"
label="Computer Name: " maxlength="20"/>
<p:message for="compName"/>
<h:outputLabel for="ipaddress" value="IP address: "/>
<p:inputText id="ipaddress" required="true"
label="IP address: " maxlength="20"/>
<p:message for="ipaddress"/>
</h:panelGrid>
<p:commandButton value="Cancel" immediate="true" onclick="dlg3.hide()" process="#this" update="#form">
<p:resetInput target="addCompDialog" />
</p:commandButton>
<p:commandButton value="Add" update="#form"
oncomplete="if (args && !args.validationFailed) dlg3.hide()" />
</h:form>
</p:dialog>
<p:dialog id="addAppDialog" header="Add Dialog" draggable="true" closable="false" modal="true"
widgetVar="dlg5" width="600" >
<h:form id="dlg5form">
<h:panelGrid columns="3">
<h:outputLabel for="appName" value="Name: "/>
<p:inputText id="appName" required="true"
label="Name: "/>
<p:message for="appName"/>
<h:outputLabel for="vendorName" value="Vendor: "/>
<p:inputText id="vendorName"
label="Vendor: " required="true" />
<p:message for="vendorName"/>
<h:outputLabel for="appLicense" value="Requires license: "/>
<p:selectOneMenu id="appLicense" required="true" style="width: 80px;" >
<f:selectItem itemLabel="True" itemValue="#{true}" />
<f:selectItem itemLabel="False" itemValue="#{false}" />
</p:selectOneMenu>
<p:message for="appLicense"/>
</h:panelGrid>
<p:commandButton value="Cancel" immediate="true" onclick="dlg5.hide()" update="#form" process="#this">
<p:resetInput target="addAppDialog" />
</p:commandButton>
<p:commandButton value="Add" update="#form"
oncomplete="if (args && !args.validationFailed) dlg5.hide()"/>
</h:form>
</p:dialog>
</h:body>
</ui:component>
HomeBean:
#Component
#Scope("session")
public class HomeBean extends BaseBean {
private static final String editUserBtn = "tab:form1:editUser";
private static final String deleteUserBtn = "tab:form1:deleteUser";
private static final String editCompBtn = "tab:form2:editComp";
private static final String deleteCompBtn = "tab:form2:deleteComp";
private static final String editAppBtn = "tab:form3:editApp";
private static final String deleteAppBtn = "tab:form3:deleteApp";
#Autowired
private HibernateDBManager hibernateDBManager;
private List<User> users;
private List<Computer> computers;
private List<Application> applications;
private User selectedUser, newUser;
private Computer selectedComputer, newComputer;
private Application selectedApplication, newApplication;
private RequestContext rc;
#Override
public void init() {
setUsers(hibernateDBManager.getAllUsers());
setComputers(hibernateDBManager.getAllComputers());
setApplications(hibernateDBManager.getAllApplications());
newUser = new User();
newComputer = new Computer();
newApplication = new Application();
rc = RequestContext.getCurrentInstance();
}
public void addUser() throws NoSuchAlgorithmException {
if (newUser != null && newUser.getPassword() != null) {
MessageDigest md = MessageDigest.getInstance("MD5");
md.update(newUser.getPassword().getBytes());
String hash = new BigInteger(1, md.digest()).toString(16);
newUser.setPassword(hash);
if (hibernateDBManager.insertUser(newUser)) {
users.add(newUser);
}
}
}
public void editUser() {
if (selectedUser != null) {
hibernateDBManager.updateUser(selectedUser);
users.set(users.indexOf(selectedUser), selectedUser);
selectedUser = null;
rc.update(deleteUserBtn);
rc.update(editUserBtn);
}
}
public void deleteUser() throws IOException {
if (selectedUser != null) {
if (hibernateDBManager.deleteUserById(selectedUser.getUserId()) > 0) {
users.remove(selectedUser);
selectedUser = null;
rc.update(deleteUserBtn);
rc.update(editUserBtn);
}
}
}
public void addComputer() {
if (newComputer != null && hibernateDBManager.insertComputer(newComputer)) {
computers.add(newComputer);
}
}
public void deleteComputer() {
if (selectedComputer != null) {
if (hibernateDBManager.deleteComputerById(selectedComputer.getComputerId()) > 0) {
computers.remove(selectedComputer);
selectedComputer = null;
rc.update(editCompBtn);
rc.update(deleteCompBtn);
}
}
}
public void addApplication() {
if (newApplication != null && hibernateDBManager.insertApplication(newApplication)) {
applications.add(newApplication);
}
}
public void deleteApplication() {
if (selectedApplication != null) {
if (hibernateDBManager.deleteApplicationById(selectedApplication.getAppId()) > 0) {
applications.remove(selectedApplication);
selectedApplication = null;
rc.update(editAppBtn);
rc.update(deleteAppBtn);
}
}
}
public void onUserRowSelect(SelectEvent event) {
setSelectedUser((User) event.getObject());
}
public void onUserRowUnselect(UnselectEvent event) {
setSelectedUser(null);
}
public void onCompRowSelect(SelectEvent event) {
setSelectedComputer((Computer) event.getObject());
}
public void onAppRowSelect(SelectEvent event) {
setSelectedApplication((Application) event.getObject());
}
//Getters etc.
}
I'd like to keep the dialog opened and validated each time user presses "Add" and not only once. Can anybody help me achieve this with my code or point me to the solution? (similar answered question with rating -1 didn't help me) Every answer is highly appreciated.
Thank you all.
Ok, guys. I found a solution by myself. What I did to make it work was giving a panelGrid element inside a form an id an updating panelGrid instead of a whole form.
So, "Add" button was changed to:
<p:commandButton value="Add"
update=":dlg1form:dt, :tab:users"
action="#{homeBean.addUser}"
oncomplete="if (!args.validationFailed) dlg1.hide()" />
and panelGrid, which contains input fields:
<h:form id="dlg1form">
<h:panelGrid columns="3" id="dt">
This helped me to validate input fields on every click and not just once.
Sincerely hope that this will help someone.
Cheers!
I had the same problem : having a update="#form" or update="yourFormName" inside my <p:commandButton> prevented the dialog from being kept when a validation error occured.
This might be due to the fact that including the update form command regenerate the whole dialog but doesn't trigger the dialogWidgetVar.show() js command.
I solved the issue by nesting a <p:fragment autoUpdate="true"> inside the dialog. Then, you can remove the update keyword inside the triggering commandButton since every component inside the fragment will be updated. The result is that the <p:dialog> and </p:dialog> tags are not replaced when the client receives the Ajax response. My working code is as follows :
<h:form id="locations_editer_creer">
<p:dialog id="location_dlg" widgetVar="locationDlg" header="#{msgs.LocationCreerNouvelle}" width="600" dynamic="false" closeOnEscape="true"
minimizable="true" maximizable="true" modal="true" >
<p:fragment autoUpdate="true">
your form inputs e.g. <p:inputText .../>
<p:commandButton id="OK" value="OK"
actionListener="#{locationsControleur.confirmer()}"
oncomplete="traiteRequeteCreationLoc(xhr, status, args)"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
</p:fragment>
</p:dialog>
</h:form>
This technique is described inside the excellent PrimeFaces Beginner's Guide book by K. Siva Prasad Reddy (Packt Publishing), p. 54 : Partial Processing and Rendering using the Fragment component.
Hope this can help others.

Fail to update h:outputText tag with (Primefaces) p:ajax call

I want for user while typing name, update name field in tab id="tab4" of accordionPanel.
Gives me an error with java.lang.IllegalArgumentException: out - the id of the tab
<ui:define name="contentBody">
<h:form id="form2">
<p:accordionPanel id="maintab" multiple="true">
<p:tab title="New Order">
<h:panelGrid columns="1" cellpadding="5">
<p:tabView id="tabView">
<p:tab title="Client" id="tab1">
<h:panelGrid columns="6" cellpadding="5">
<h:outputText value="Name " />
<p:inputText id="name" value="#{newOrderBean.name}">
<p:ajax update=":form2:maintab:out:name_id" />
</p:inputText>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:panelGrid>
</p:tab>
<p:tab id="out" title="View Deatails">
<h:panelGrid id="panelgrid" columns="3" cellpadding="5">
<p:panel id="panel1" header="Client" style="width:200px;height:200px" >
<h:panelGrid id="grid1" columns="1">
<h:outputText id="name_id" value="#{newOrderBean.name}" />
</h:panelGrid>
</p:panel>
</h:panelGrid>
</p:tab>
</p:accordionPanel>
</h:form>
</ui:define>
could you please also clarify about the cases where i need to put my components into separate forms cause just for now i put the whole page into a single form tag. Thank you
Solved it!
With this code:
<h:outputText value="Name " />
<p:inputText id="name" value="#{newOrderBean.name}">
<f:ajax event="keyup" render=":form2:maintab:name_id" />
</p:inputText>

JSF : dynamically loaded page commandButton not working

I have a page that contains a PrimeFaces accordion panel, in each panel is a PrimeFaces datatable. Below the datatable is a button "Add study" for example and when this button is click I want to dynamically load a page into a <h:panelGroup> using a <ui:include>. When the button is being click I want to dynamically change the src value from the <ui:include> so that my page is loaded in the <h:panelGroup>. Now the problem is the following:
My managed bean is set to #RequestScoped and when I click on my button nothing is being rendered.
If I set my managed bean to #SessionScoped the <h:panelGroup> is filled after the second click on the button, the first click doesn't do anything.
Used technologies : JSF2.0, PrimeFaces, Facelets
Here are some code snippets :
Main Page
<h:panelGroup id="content" layout="block">
<ui:include src="#{studyBean.includePage}"/>
</h:panelGroup>
<div id="dashboard">
<h:form id="form" prependId="false">
<h:outputText value="Welkom #{loginBean.username}"/>
<p:accordionPanel autoHeight="true" effect="bounceslide">
<p:tab title="My studies">
<p:dataTable var="study" value="#{studyBean.studiesByUser}" id="studyTable"
emptyMessage="No studies found for given user" paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" rowSelectListener="#{studyBean.onRowSelect}"
selectionMode="single">
<p:column headerText="StartDate" sortBy="#{study.startDate}"
filterBy="#{study.startDate}"
filterMatchMode="contains" style="width: 100px;">
<h:outputText value="#{study.startDate}">
<f:convertDateTime pattern="dd/MM/yyyy" type="date" timeZone="CET"/>
</h:outputText>
</p:column>
<p:column headerText="EndDate" sortBy="#{study.endDate}"
filterBy="#{study.endDate}}"
filterMatchMode="contains" style="width: 100px;">
<h:outputText value="#{study.endDate}">
<f:convertDateTime pattern="dd/MM/yyyy" type="date" timeZone="CET"/>
</h:outputText>
</p:column>
<p:column headerText="School" sortBy="#{study.school}" filterBy="#{study.school}}"
filterMatchMode="contains" style="width: 100px;">
<h:outputText value="#{study.school}"/>
</p:column>
<p:column headerText="Specialization" sortBy="#{study.specialization}"
filterBy="#{study.specialization}}" filterMatchMode="contains"
style="width: 100px;">
<h:outputText value="#{study.specialization}"/>
</p:column>
<p:column headerText="Remarks" sortBy="#{study.remarks}"
filterBy="#{study.remarks}}"
filterMatchMode="contains" style="width: 100px;">
<h:outputText value="#{study.remarks}"/>
</p:column>
</p:dataTable>
<h:commandButton id="btnAddStudy" title="Add Study" value="Add Study">
<f:ajax render=":content" execute="form" listener="# {studyBean.navigate}"/>
<f:param name="action" value="add"/>
</h:commandButton>
</p:tab>
</p:accordionPanel>
</h:form>
So as you can see is my <h:panelGroup> outside my form.
This is the included page (as example)
<h:body>
<ui:composition template="../template/template.xhtml">
<ui:define name="body">
<f:view contentType="text/html">
<ui:composition>
<h:form id="studyForm" prependId="false">
<p:messages />
<h:message for="startDate"/>
<h:message for="endDate"/>
<h:message for="school"/>
<h:message for="diploma1"/>
<h:message for="diploma2"/>
<h:message for="diploma3"/>
<h:message for="specialization1"/>
<h:message for="specialization2"/>
<h:message for="specialization3"/>
<h:message for="remarks1"/>
<h:message for="remarks2"/>
<h:message for="remarks3"/>
<h:outputText class="label" value="Start date: "/>
<h:inputText id="startDate" styleClass="inputtext validate[required,custom[date]]"
value="#{studyBean.startDate}">
<f:convertDateTime pattern="dd/MM/yyyy" timeZone="CET"/>
</h:inputText>
<h:outputText class="label" value="End date: "/>
<h:inputText id="endDate" styleClass="inputtext validate[required,custom[date]]"
value="#{studyBean.endDate}">
<f:convertDateTime pattern="dd/MM/yyyy" timeZone="CET"/>
</h:inputText>
<h:outputText class="label" value="school: "/>
<h:inputText id="school" styleClass="inputtext validate[required, maxSize[5]]"
value="#{studyBean.school}"/>
<h:outputText class="label" value="Specialization: "/>
<h:inputText id="specialization1" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.specialization[0]}"/>
<h:inputText id="specialization2" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.specialization[1]}"/>
<h:inputText id="specialization3" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.specialization[2]}"/>
<h:outputText class="label" value="Diploma: "/>
<h:inputText id="diploma1" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.diploma[0]}"/>
<h:inputText id="diploma2" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.diploma[1]}"/>
<h:inputText id="diploma3" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.diploma[2]}"/>
<h:outputText class="label" value="remarks: "/>
<h:inputText id="remarks1" styleClass="inputtext validate[maxSize[200]]"
value="#{studyBean.remarks[0]}"/>
<h:inputText id="remarks2" styleClass="inputtext validate[maxSize[200]]"
value="#{studyBean.remarks[1]}"/>
<h:inputText id="remarks3" styleClass="inputtext validate[maxSize[200]]"
value="#{studyBean.remarks[2]}"/>
<h:commandButton action="cancel" value="cancel" immediate="true"/>
<p:commandButton id="btnAddStudyDetail" value="add study" actionListener="#{studyBean.addStudy}"
update="studyTable" oncomplete="clearAddStudy()"/>
</h:form>
</ui:composition>
</f:view>
</ui:define>
</ui:composition>
</h:body>
Managed Bean #RequestScoped
#ManagedBean
#RequestScoped
public class StudyBean {
public String navigate() {
FacesContext facesContext = FacesContext.getCurrentInstance();
try {
action = (((HttpServletRequest) facesContext.getExternalContext().getRequest()).getParameter("action"));
if (action.equals("add")) {
//vull de velden
includePage = "studyDetail.xhtml";
}
facesContext = FacesContext.getCurrentInstance();
UIViewRoot root = facesContext.getViewRoot();
UIComponent form = root.findComponent("form");
dataTable = form.findComponent("studyTable");
System.out.println(dataTable);
System.out.println(root);
} catch (Exception e) {
facesContext.addMessage("form", new FacesMessage("You must select a study."));
}
return null;
}
}
Thanks in advance.
UPDATE
Now I am able to dynamically load the page in my <ui:include> but I have another problem now, when the page is loaded and I want to click on my button in the loaded page the action to which it is bound doesn't execute. So I don't get into my backing bean, I already tried to put the scope of my bean to #ViewScoped but no success.
Please help me as I am getting desperate.

Resources