This question already has an answer here:
Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors
(1 answer)
Closed 7 years ago.
I'm having an unusual problem with a page which contains a Tree on the left, and a TabView on the right. I have implemented 2 tabs so far. If the first tab is "Profile", then the 2nd tab, "Users" does not display (the tab title is there, but when selected there is no content under the tab). If I switch the order and put "Users" first, then both tabs display.
I tried changing the content on "Users" - I first used an accordionPanel, then thought perhaps the tabs on TabView and Accordion were getting confused and changed it to a dataList. The content in the "Users" panel doesn't seem to matter.
I'll show the xhtml code when it works, and when it doesn't.
Users panel does not show:
<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
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:rich="http://richfaces.org/rich"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:cust="http://memarden.com">
<link href="CSS/navigation.css" rel="stylesheet" type="text/css" />
<h:body>
<h3>#{text['organization']}</h3>
<ui:composition template="template-restricted.xhtml">
<ui:define name="body_content">
<h:form id="mainForm">
<div id="title" class="sl-title">Manage Schools - #{manageOrgHierarchy.selectedOrganization.displayString}</div>
<div class="sr-content">
<div class="ui-grid ui-grid-responsive"><div class="ui-grid-row">
<div class="ui-grid-col-4"><p:panel layout="block">
<p:toolbar><f:facet name="left">
<p:commandButton
title="New Root Org"
icon="fa fa-folder-open"
rendered="#{userSession.isAdmin}"
process="#form"
update="#form"
action="#{manageOrgHierarchy.createNewRootOrg}" />
<p:commandButton
title="#{text['new.item']}"
icon="fa fa-folder-open"
process="#form"
update="#form"
action="#{manageOrgHierarchy.createNewSubOrg}" />
<p:commandButton
title="#{text['delete']}"
icon="fa fa-trash"
process="#form"
update="#form"
disabled="#{not manageOrgHierarchy.canBeDeleted}"
action="#{manageOrgHierarchy.delete}" />
<p:commandButton
title="#{text['save']}"
icon="fa fa-save"
process="#form"
update="#form"
action="#{manageOrgHierarchy.save}" />
</f:facet></p:toolbar>
<p:tree
id="orgTree"
value="#{manageOrgHierarchy.rootNodes}"
selectionMode="single"
selection="#{manageOrgHierarchy.selectedNode}"
style="ui-grid-col-2"
var="node">
<p:ajax event="select" update="mainForm" listener="#{manageOrgHierarchy.nodeSelected}" />
<p:ajax event="unselect" update="mainForm" listener="#{manageOrgHierarchy.nodeUnselected}" />
<p:ajax event="expand" listener="#{manageOrgHierarchy.nodeExpanded}" />
<p:ajax event="collapse" listener="#{manageOrgHierarchy.nodeCollapsed}" />
<p:treeNode type="OrganizationHierarchy">
<h:outputText value="#{node.nickName}" />
</p:treeNode>
</p:tree></p:panel>
</div>
<div class="ui-grid-col-8">
<p:tabView>
<p:tab title="#{text['profile']}">
<p:panelGrid columns="2" layout="grid">
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="name" value="#{text['name']}" />
<p:inputText id="name" value="#{manageOrgHierarchy.editOrg.nickName}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="phone" value="#{text['phone']}" />
<p:inputText id="phone" value="#{manageOrgHierarchy.editOrg.phone}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="address" value="#{text['address']}" />
<p:inputText id="address" value="#{manageOrgHierarchy.editOrg.address}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="city" value="#{text['city']}" />
<p:inputText id="city" value="#{manageOrgHierarchy.editOrg.city}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="state" value="#{text['state']}" />
<p:inputText id="state" value="#{manageOrgHierarchy.editOrg.state}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="postalCode" value="#{text['post.code']}" />
<p:inputText id="postalCode" value="#{manageOrgHierarchy.editOrg.postalCode}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="country" value="#{text['address.country']}" />
<p:inputText id="country" value="#{manageOrgHierarchy.editOrg.country}" />
</p:panelGrid>
</p:panelGrid>
<h:panelGroup>
<p:commandButton
value="#{text['cancel']}"
icon="fa fa-trash"
process="#form"
update="#form"
action="#{manageOrgHierarchy.cancelEditOrg}" />
<p:commandButton
value="#{text['save']}"
icon="fa fa-save"
process="#form"
update="#form"
action="#{manageOrgHierarchy.saveEditOrg}" />
</h:panelGroup>
</p:tab>
<p:tab title="#{text['users']}">
<p:dataList value="#{manageOrgHierarchy.userPermissions}" var="p">
<p:panelGrid columns="2">
<cust:avatarOutput owner="#{p.user}" session="#{userSession}"/>
<p:panelGrid columns="1">
<h:outputText value="#{p.user.displayString}" />
<h:outputText value="#{p.user.name}" />
</p:panelGrid>
</p:panelGrid>
</p:dataList>
</p:tab>
<p:tab title="#{text['lessons']}"></p:tab>
<p:tab title="#{text['reports']}"></p:tab>
</p:tabView></div></div></div>
</div>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
Both panels work:
<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
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:rich="http://richfaces.org/rich"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:cust="http://memarden.com">
<link href="CSS/navigation.css" rel="stylesheet" type="text/css" />
<h:body>
<h3>#{text['organization']}</h3>
<ui:composition template="template-restricted.xhtml">
<ui:define name="body_content">
<h:form id="mainForm">
<div id="title" class="sl-title">Manage Schools - #{manageOrgHierarchy.selectedOrganization.displayString}</div>
<div class="sr-content">
<div class="ui-grid ui-grid-responsive"><div class="ui-grid-row">
<div class="ui-grid-col-4"><p:panel layout="block">
<p:toolbar><f:facet name="left">
<p:commandButton
title="New Root Org"
icon="fa fa-folder-open"
rendered="#{userSession.isAdmin}"
process="#form"
update="#form"
action="#{manageOrgHierarchy.createNewRootOrg}" />
<p:commandButton
title="#{text['new.item']}"
icon="fa fa-folder-open"
process="#form"
update="#form"
action="#{manageOrgHierarchy.createNewSubOrg}" />
<p:commandButton
title="#{text['delete']}"
icon="fa fa-trash"
process="#form"
update="#form"
disabled="#{not manageOrgHierarchy.canBeDeleted}"
action="#{manageOrgHierarchy.delete}" />
<p:commandButton
title="#{text['save']}"
icon="fa fa-save"
process="#form"
update="#form"
action="#{manageOrgHierarchy.save}" />
</f:facet></p:toolbar>
<p:tree
id="orgTree"
value="#{manageOrgHierarchy.rootNodes}"
selectionMode="single"
selection="#{manageOrgHierarchy.selectedNode}"
style="ui-grid-col-2"
var="node">
<p:ajax event="select" update="mainForm" listener="#{manageOrgHierarchy.nodeSelected}" />
<p:ajax event="unselect" update="mainForm" listener="#{manageOrgHierarchy.nodeUnselected}" />
<p:ajax event="expand" listener="#{manageOrgHierarchy.nodeExpanded}" />
<p:ajax event="collapse" listener="#{manageOrgHierarchy.nodeCollapsed}" />
<p:treeNode type="OrganizationHierarchy">
<h:outputText value="#{node.nickName}" />
</p:treeNode>
</p:tree></p:panel>
</div>
<div class="ui-grid-col-8">
<p:tabView>
<p:tab title="#{text['users']}">
<p:dataList value="#{manageOrgHierarchy.userPermissions}" var="p">
<p:panelGrid columns="2">
<cust:avatarOutput owner="#{p.user}" session="#{userSession}"/>
<p:panelGrid columns="1">
<h:outputText value="#{p.user.displayString}" />
<h:outputText value="#{p.user.name}" />
</p:panelGrid>
</p:panelGrid>
</p:dataList>
</p:tab>
<p:tab title="#{text['profile']}">
<p:panelGrid columns="2" layout="grid">
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="name" value="#{text['name']}" />
<p:inputText id="name" value="#{manageOrgHierarchy.editOrg.nickName}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="phone" value="#{text['phone']}" />
<p:inputText id="phone" value="#{manageOrgHierarchy.editOrg.phone}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="address" value="#{text['address']}" />
<p:inputText id="address" value="#{manageOrgHierarchy.editOrg.address}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="city" value="#{text['city']}" />
<p:inputText id="city" value="#{manageOrgHierarchy.editOrg.city}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="state" value="#{text['state']}" />
<p:inputText id="state" value="#{manageOrgHierarchy.editOrg.state}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="postalCode" value="#{text['post.code']}" />
<p:inputText id="postalCode" value="#{manageOrgHierarchy.editOrg.postalCode}" />
</p:panelGrid>
<p:panelGrid columns="1" layout="grid">
<p:outputLabel for="country" value="#{text['address.country']}" />
<p:inputText id="country" value="#{manageOrgHierarchy.editOrg.country}" />
</p:panelGrid>
</p:panelGrid>
<h:panelGroup>
<p:commandButton
value="#{text['cancel']}"
icon="fa fa-trash"
process="#form"
update="#form"
action="#{manageOrgHierarchy.cancelEditOrg}" />
<p:commandButton
value="#{text['save']}"
icon="fa fa-save"
process="#form"
update="#form"
action="#{manageOrgHierarchy.saveEditOrg}" />
</h:panelGroup>
</p:tab>
<p:tab title="#{text['lessons']}"></p:tab>
<p:tab title="#{text['reports']}"></p:tab>
</p:tabView></div></div></div>
</div>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
This was caused by unrelated javascript in a menu section which declared a jquery.js library. When I removed the offending import, all of the strange Primefaces errors went away. It seems declaring other jquery libraries interferes with Primefaces code.
Related
I am trying to persist a form in JSF page with many inputs. in parallel I added client side validation to process before entering to the actionLisner method.
The issus is that if I make the commandbutton inside <h:form> and outside <p:panel> the validation is OK but the action does not do anything (if all the fiels are validated). If I make the commandbutton inside <p:panel> the opposite happens, the validation does not work anymore and even if some fiels are empty, the method in actionListner is called.
<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/template.xhtml">
<ui:define name="title">
<h:outputText value="Entretien annuel - Personnel d'Agence">
</h:outputText>
</ui:define>
<ui:define name="body">
<div align="center">
<h:form id="CollaborateurViewForm">
<h:panelGroup id="display">
<p:panel header="Détails du Collaborateur">
<p:panelGrid columns="2" rendered="#{collaborateurController.selected !=
null}">
<h:outputText value="#{bundle.ViewCollaborateurLabel_idCollaborateur}"/>
<h:outputText value="#{collaborateurController.selected.idCollaborateur}"
title="#{bundle.ViewCollaborateurTitle_idCollaborateur}"/>
</p:panelGrid>
</p:panel>
</h:panelGroup>
</h:form>
</div>
<h:form id="testForm" >
<p:panel id="entretienFormPa" header="Entretien annuel - Personnel d'Agence">
<div align="center">
<p:panelGrid columns="2">
<p:panel header="Détails de l'entretien">
<p:outputLabel for="collaborateursItem" value="Entretien mené par :"/>
<p:selectManyMenu id="collaborateursItem" filter="true" filterMatchMode="contains"
showCheckbox="true"
value="#{entretienController.entretienMenePar}">
<p:ajax process="#this"/>
<f:selectItems id="entretienMenePar" value="#
{collaborateurController.itemsAvailableSelectMany}"
var="entretienMeneParItem"
itemValue="#{entretienMeneParItem}"/>
</p:selectManyMenu>
</p:panel>
</p:panelGrid>
<p:panel header="Saisie des notes de l'entretien">
<p:tabView>
<p:tab title="#{bundle.Personnel_Organisation_Commerciale}">
<h:panelGrid columns="2" cellpadding="10" cellspacing="10">
<p:outputLabel value="#
{bundle.Personnel_Organisation_Commerciale_Comprehension}" for="noteItem11"/>
<p:selectOneButton id="noteItem11" value="#
{entretienController.note11}"
required="true"
requiredMessage="#
{bundle.NoteEntretien_Requise}">
<f:selectItems value="#
{entretienController.listeNotesPossibles}"
var="noteItem"
itemValue="#{noteItem}"/>
<p:ajax process="#this"/>
</p:selectOneButton>
<p:outputLabel
value="#{bundle.Personnel_Organisation_Commerciale_Actions}" for="noteItem12"/>
<p:selectOneButton id="noteItem12" value="#
{entretienController.note12}"
required="true"
requiredMessage="#
{bundle.NoteEntretien_Requise}">
<f:selectItems value="#
{entretienController.listeNotesPossibles}"
var="noteItem"
itemValue="#{noteItem}"/>
<p:ajax process="#this"/>
</p:selectOneButton>
<p:outputLabel for="commentaireOrgaCom" value="Commentaire de suivi : " style="font-weight: bold"/>
<p:inputTextarea id="commentaireOrgaCom" value="#{entretienController.commentaireOrgaCom}"
rows="4" cols="50">
<p:ajax process="#this"/>
</p:inputTextarea>
</h:panelGrid>
</p:tab>
</p:tabView>
</p:panel>
<p:tabView>
<p:tab title="#{bundle.Da_Divers}">
<div align="center">
<p:outputLabel for="diagnosticItem" value="Diagnostic : " />
<p:inputTextarea id="diagnosticItem" value="#
{entretienController.diagItem}" rows="8" cols="67" required="true"
requiredMessage="#{bundle.Diagnostic_Requis}">
<p:ajax process="#this"/>
</p:inputTextarea>
</h:panelGrid>
</div>
</p:tab>
</p:tabView>
</div>
</p:panel>
<div align="right">
<p:commandButton id="saveEntretienButton" value="Enregistrer"
process="entretienFormPa" update="entretienFormPa" immediate="true"
actionListener="#
{noteEntretienController.saveEntretienActionPa(entretienController,
collaborateurController)}">
<p:confirm header="Confirmation" message="Etes-vous sûr de vouloir
enregistrer l'entretien ?" />
</p:commandButton>
<p:commandButton value="Retour" action="Details"
ajax="false" />
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Oui" type="button" styleClass="ui-confirmdialog-yes" />
<p:commandButton value="Non" type="button" styleClass="ui-confirmdialog-no" />
</p:confirmDialog>
</div>
</h:form>
</ui:define>
</ui:composition>
</html>
I also tried to add validateClient="true" on the commandButton
Thank in advance !
UPDATE :
I resolved the issue without knowing what was the source. I go back to the initial example given on primefaces showcase, I added my fields one by one. Know all is good
hello I have this page which work correctly and where I change pages dynamically
from bean with include tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="50" id="top">
<ui:include src="/WEB-INF/template/header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="south" size="20">
<ui:include src="/WEB-INF/template/footer.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" size="400">
<h:form>
<f:ajax render=":centerContentPanel" execute="#this">
<h:commandLink value="page1" action="#{navigationBean.doNav}" update=":centerContentPanel">
<f:param name="test" value="/WEB-INF/pages/profil" />
</h:commandLink>
<h:commandLink value="page2" action="#{navigationBean.doNav}" process="#this">
<f:param name="test" value="/WEB-INF/pages/users" />
</h:commandLink>
</f:ajax>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" size="400">
<h:panelGroup id="centerContentPanel">
<ui:include src="#{navigationBean.pageName}.xhtml" />
</h:panelGroup>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
In the included pages I have a dialog which contain and included page also.
When I open the dialog the screen stuck and I can't change anything or press anything it become like a disabled page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:form id="form">
<p:growl id="message" showDetail="true" globalOnly="true" />
<p:dataTable var="user" value="#{usersBean.users}" paginator="true"
reflow="true" widgetVar="multipleDT" resizableColumns="true"
id="multipleDT"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" selectionMode="single"
selection="#{usersBean.selectedUser}" rowKey="#{user.util}">
<p:ajax event="rowSelect" listener="#{usersBean.onRowSelect}"
update="b4 b3 :form:pickList :form:Submit" />
<p:ajax event="rowUnselect" listener="#{usersBean.onRowUnselect}"
update="b4 b3 :form:pickList :form:Submit" />
<p:column headerText="util" filterMatchMode="contains"
filterBy="#{user.util}" sortBy="#{user.util}" reflow="true">
<h:outputText value="#{user.util}" />
</p:column>
<p:column headerText="nom" filterMatchMode="contains"
filterBy="#{user.nom}" sortBy="#{user.nom}" reflow="true">
<h:outputText value="#{user.nom}" />
</p:column>
<p:column headerText="prenom" filterMatchMode="contains"
filterBy="#{user.prenom}" sortBy="#{user.prenom}" reflow="true">
<h:outputText value="#{user.prenom}" />
</p:column>
<p:column headerText="mail" filterMatchMode="contains"
filterBy="#{user.mail}" sortBy="#{user.mail}" reflow="true">
<h:outputText value="#{user.mail}" />
</p:column>
<f:facet name="footer">
<p:commandButton id="b3" value="ajouter"
oncomplete="PF('dlg3').show();" process="#this" ajax="true"
update="#widgetVar(dlg3) multipleDT">
</p:commandButton>
<p:commandButton id="b4" value="modifier"
disabled="#{usersBean.dis}" oncomplete="PF('dlg2').show();"
ajax="true" process="#this" update="#widgetVar(dlg2) multipleDT">
</p:commandButton>
</f:facet>
</p:dataTable>
<p:pickList id="pickList" value="#{usersBean.profilNonAffecte}"
var="Profil" itemLabel="#{Profil.libProfil}" itemValue="#{Profil}"
effect="bounce" responsive="true" showSourceFilter="true"
showTargetFilter="true" filterMatchMode="contains"
disabled="#{usersBean.dis}" style="width:50%;margin-top:20px;"
converter="primeFacesPickListConverter">
<f:facet name="sourceCaption">Available</f:facet>
<f:facet name="targetCaption">Starting</f:facet>
</p:pickList>
<p:commandButton id="Submit" value="Submit" style="margin-top:5px"
action="#{usersBean.commit}" update="pickList form:message"
disabled="#{usersBean.dis}" />
</h:form>
<h:form>
<p:dialog style="font-size:12px;" widgetVar="dlg3" resizable="false"
width="800" showEffect="explode" hideEffect="explode" modal="true"
id="dlg3" dynamic="true">
<ui:include src="/WEB-INF/pages/ajoutUser.xhtml" />
</p:dialog>
</h:form>
<h:form>
<p:dialog style="font-size:12px;" widgetVar="dlg2" resizable="false"
width="800" showEffect="explode" hideEffect="explode" modal="true"
id="dlg2" dynamic="true">
<ui:include src="/WEB-INF/pages/modifUser.xhtml" />
</p:dialog>
</h:form>
</ui:composition>
dialog code
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:panelGrid columns="2" id="grid">
<p:outputLabel for="ta4" value="date début :" />
<p:calendar id="ta4" value="#{usersBean.selectedUser.dateDeb}"
showOn="button" label="date début" required="true"
binding="#{startDateComponent}" pattern="dd/MM/yyyy" navigator="true">
<p:message for="ta4" />
<p:ajax event="dateSelect" listener="#{usersBean.onDateSelect}"
update="ta4" />
</p:calendar>
<p:outputLabel for="ta5" value="date fin :" />
<p:calendar id="ta5" value="#{usersBean.selectedUser.dateFin}"
showOn="button" label="date fin" required="true" pattern="dd/MM/yyyy"
mode="popup">
<f:validator validatorId="dateRangeValidator" />
<f:attribute name="startDateComponent" value="#{startDateComponent}" />
<p:message for="ta5" />
</p:calendar>
<p:outputLabel for="ta6" value="nom :" label="nom" />
<p:inputText rows="6" cols="33" id="ta6"
value="#{usersBean.selectedUser.nom}" required="true">
<p:message for="ta6" />
</p:inputText>
<p:outputLabel for="ta7" value="prénom :" />
<p:inputText rows="6" cols="33" id="ta7"
value="#{usersBean.selectedUser.prenom}" required="true"
label="prenom">
<p:message for="ta7" />
</p:inputText>
<p:outputLabel for="ta8" value="mail :" />
<p:inputText rows="6" cols="33" id="ta8"
value="#{usersBean.selectedUser.mail}" required="true" label="mail"
validatorMessage="email format error ">
<f:validateRegex
pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*#[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
<p:message for="ta8" />
</p:inputText>
<p:outputLabel for="chk" value="Valid :" />
<p:selectBooleanCheckbox value="#{usersBean.selectedUser.valid}"
id="chk" />
<p:commandButton value="confirmer" id="ajax"
actionListener="#{usersBean.modifier}"
styleClass="ui-priority-primary" update="grid form:message form:multipleDT" >
</p:commandButton>
</h:panelGrid>
</ui:composition>
i find it the problem was modal="true" in the dialog
I have this .xhtml file. It's a data table page with three buttons (one for creating users, one for editing them and one for deleting them). Creating and deleting users are working but updating not. When I call the method actionListener="#{usuariosBean.actualizarUsuario}", I get all parameters well but not the Id, I'm getting 0 instead of the real Id of the user.
I have tried to do it in different .xhtml and it work good so I think that the problem is about the .xhtml file but... I don't know. Could anybody help me? Thanks a lot!!!
<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<ui:composition template="./../template.xhtml">
<ui:define name="content">
<p:growl id="msgs" showDetail="true" />
<h:form>
<p:commandButton update=":formCrear" icon="ui-icon-document"
title="Crear Usuario" value="Crear Usuario"
oncomplete="PF('usuarioDialogCrear').show();">
</p:commandButton>
</h:form>
<h:form id="form">
<p:dataTable var="usuario" value="#{usuariosBean.usuarios}"
paginator="true" rows="10">
<p:column headerText="Id">
<h:outputText value="#{usuario.id}" />
</p:column>
<p:column headerText="Nombre de Usuario">
<h:outputText value="#{usuario.nombreDeUsuario}" />
</p:column>
<p:column headerText="Contraseña">
<h:outputText value="#{usuario.contrasenya}" />
</p:column>
<p:column headerText="Rol">
<h:outputText value="#{usuario.rol}" />
</p:column>
<p:column headerText="" style="text-align:center; width:4%">
<p:commandButton update=":form:usuarioActualizar" id="Actualizar"
icon="ui-icon-pencil" title="Actualizar"
oncomplete="PF('usuarioDialogActualizar').show();">
<f:setPropertyActionListener value="#{usuario}"
target="#{usuariosBean.usuarioSeleccionado}" />
</p:commandButton>
</p:column>
<p:column headerText="" style="text-align:center; width:4%">
<p:commandButton update=":form:usuarioEliminar" id="Eliminar"
icon="ui-icon-close" title="Eliminar"
oncomplete="PF('confirmacion').show();">
<f:setPropertyActionListener value="#{usuario}"
target="#{usuariosBean.usuarioSeleccionado}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog header="Actualizar Usuario"
widgetVar="usuarioDialogActualizar" modal="true" showEffect="fade"
hideEffect="explode" resizable="false" width="400">
<p:outputPanel id="usuarioActualizar" style="text-align:center;"
layout="block">
<p:panelGrid columns="2">
<h:outputText value="Id " />
<p:inputText
value="#{usuariosBean.usuarioSeleccionado.id}"
style="font-weight:bold" size="37" />
<h:outputText value="Usuario: " />
<p:inputText
value="#{usuariosBean.usuarioSeleccionado.nombreDeUsuario}"
style="font-weight:bold" size="37" />
<h:outputText value="Contraseña: " />
<p:inputText
value="#{usuariosBean.usuarioSeleccionado.contrasenya}"
style="font-weight:bold" size="37" />
<h:outputText value="Rol " />
<p:inputText value="#{usuariosBean.usuarioSeleccionado.rol}"
style="font-weight:bold" size="37" />
</p:panelGrid>
</p:outputPanel>
<f:facet name="footer">
<p:commandButton update=":form, :msgs" id="btnActualizarAceptar"
icon="ui-icon-disk" title="Guardar Usuario"
value="Actualizar Usuario"
actionListener="#{usuariosBean.actualizarUsuario}"
oncomplete="PF('usuarioDialogActualizar').hide()">
</p:commandButton>
<p:commandButton id="btnActualizarCancelar" icon="ui-icon-close"
title="Cancelar" value="Cancelar" type="button"
onclick="PF('usuarioDialogActualizar').hide()">
</p:commandButton>
</f:facet>
</p:dialog>
<p:confirmDialog
message="¿Está seguro que desea eliminar el usuario?"
showEffect="bounce" hideEffect="explode" header="Eliminar Usuario"
severity="alert" widgetVar="confirmacion">
<p:outputPanel id="usuarioEliminar" style="text-align:center;"
layout="block">
<h:inputHidden value="#{usuariosBean.usuarioSeleccionado.id}" />
</p:outputPanel>
<p:commandButton id="confirmarDialogo" value="Aceptar"
icon="ui-icon-check" update=":form, :msgs"
oncomplete="PF('confirmacion').hide()"
actionListener="#{usuariosBean.eliminarUsuario}" />
<p:commandButton id="cancelarDialogo" icon="ui-icon-close"
title="Cancelar" value="Cancelar"
oncomplete="PF('confirmacion').hide()">
</p:commandButton>
</p:confirmDialog>
</h:form>
<h:form id="formCrear">
<p:dialog header="Crear Usuario" widgetVar="usuarioDialogCrear"
modal="true" showEffect="fade" hideEffect="explode"
resizable="false" width="400">
<p:outputPanel id="usuarioCrear" style="text-align:center;"
layout="block">
<p:panelGrid columns="2">
<h:outputText value="Usuario: " />
<p:inputText value="#{usuariosBean.nombreDeUsuario}"
required="true" size="37" />
<h:outputText value="Contraseña: " />
<p:inputText value="#{usuariosBean.contrasenya}" required="true"
size="37" />
<h:outputText value="Rol " />
<p:inputText value="#{usuariosBean.rol}" required="true"
size="37" />
</p:panelGrid>
</p:outputPanel>
<f:facet name="footer">
<p:commandButton update=":form, :msgs" id="btnCrearAceptar"
icon="ui-icon-disk" title="Guardar Usuario"
value="Guardar Usuario" action="#{usuariosBean.guardarUsuario}"
oncomplete="PF('usuarioDialogCrear').hide()">
</p:commandButton>
<p:commandButton id="btnCrearCancelar" icon="ui-icon-close"
title="Cancelar" value="Cancelar"
oncomplete="PF('usuarioDialogCrear').hide()">
</p:commandButton>
</f:facet>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
Well, my problem is that no dialog inside my main page is called. I.E: I have a commandButton should call "varDialogFindPacientes" but don't work. I don't know what can i do to fix it.
Look my main page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
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"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:head>
</h:head>
<h:body>
<ui:composition>
<p:dialog id="dialogCadastrar" width="900px" height="500px"
header="Cadastrar Orçamento" widgetVar="varDialogCadastrar"
modal="true" showEffect="fade" hideEffect="fade">
<h:form id="formCadastrar">
<p:panelGrid id="panelGridCadastar" styleClass="semBorda"
columns="2">
<h:outputText value="Data Emissão: " />
<p:inputText id="dataEmissao"
value="#{orcamentoMB.orcamento.dataEmissao}" readonly="true">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:inputText>
<h:outputText value="Data Validade: " />
<p:inputText id="dataValidade"
value="#{orcamentoMB.orcamento.dataValidade}" readonly="true">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:inputText>
<h:outputText value="Situação " />
<p:inputText id="situacao"
value="#{orcamentoMB.orcamento.situacao.descricao}"
readonly="true" />
<h:outputText value="Desconto (%): " />
<p:panelGrid columns="2" styleClass="semBorda">
<pe:inputNumber value="#{orcamentoMB.orcamento.desconto}"
id="desconto" symbol=" %" symbolPosition="suffix"
validatorMessage="O desconto não pode ser maior que #{orcamentoMB.maxDesconto} %">
<f:validateDoubleRange maximum="#{orcamentoMB.maxDesconto}" />
</pe:inputNumber>
<p:commandButton value="Recalcular" process="desconto"
icon="ui-icon-refresh"
update=":formCadastrar:totalGeral, :formCadastrar:totalGeralComDesconto" />
</p:panelGrid>
<h:outputText value="Observação: " />
<p:inputTextarea value="#{orcamentoMB.orcamento.observacoes}"
rows="5" cols="30" />
<h:outputText value="Dentista: *" />
<p:panel style="border:1px solid #e5e5e5;">
<p:inputText required="true"
requiredMessage="Selecione um dentista"
value="#{orcamentoMB.orcamento.dentistaOrcou.pessoaFisica.nome}"
readonly="true" size="30" id="dentistaOrcou" />
<p:commandButton icon="ui-icon-search" type="button"
onclick="varDialogFindDentistas.show()" />
</p:panel>
<h:outputText value="Paciente *" />
<p:panel style="border:1px solid #e5e5e5;">
<p:inputText required="true"
requiredMessage="Selecione um paciente"
value="#{orcamentoMB.orcamento.paciente.pessoaFisica.nome}"
readonly="true" size="30" id="paciente" />
<p:commandButton icon="ui-icon-search" type="button"
onclick="varDialogFindPacientes.show()" />
</p:panel>
</p:panelGrid>
<p:toolbar>
<p:toolbarGroup align="left">
<p:commandButton value="Add" icon="ui-icon-plus"
onclick="varDialogFindItensTabela.show()" type="button"
update=":formCadastrar:dataTableItens, :formCadastrar:salvarAceitando,:formCadastrar:salvarSemAceitar, :formCadastrar:totalGeral,
:formCadastrar:totalGeralComDesconto" />
<p:commandButton value="Del" icon="ui-icon-minus"
disabled="#{orcamentoMB.selectedItemOrcamento == null}"
actionListener="#{orcamentoMB.delItemOrcamento}"
update=":formCadastrar:dataTableItens, :formCadastrar:totalGeral,
:formCadastrar:totalGeralComDesconto, :formCadastrar:salvarAceitando,:formCadastrar:salvarSemAceitar" />
</p:toolbarGroup>
</p:toolbar>
<p:dataTable rowKey="#{item}" var="item"
value="#{orcamentoMB.itens}"
emptyMessage="Não foi encontrado nenhum registro"
id="dataTableItens"
selection="#{orcamentoMB.selectedItemOrcamento}"
selectionMode="single" rowIndexVar="rowIndex"
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'first-row' : 'second-row'}">
<p:column headerText="Nome"
sortBy="#{item.itemTabelaProcedimento.procedimento.nome}"
id="nome">
<h:outputText
value="#{item.itemTabelaProcedimento.procedimento.nome}" />
</p:column>
<p:column headerText="Valor"
sortBy="#{item.itemTabelaProcedimento.valor}" id="valor">
<h:outputText value="#{item.itemTabelaProcedimento.valor}">
<f:convertNumber currencySymbol="R$ " type="currency" />
</h:outputText>
</p:column>
<p:column headerText="Local Aplicação"
sortBy="#{item.localAplicacao.descricao}" id="localAplicacao">
<h:outputText value="#{item.localAplicacao.descricao}" />
</p:column>
<p:column headerText="Dente" sortBy="#{item.dente.descricao}"
id="dente">
<h:outputText value="#{item.dente.descricao}" />
</p:column>
<p:column headerText="Face"
sortBy="#{item.faceAplicacao.descricao}" id="face">
<h:outputText value="#{item.faceAplicacao.descricao}" />
</p:column>
</p:dataTable>
<p:panelGrid columns="2">
<h:outputText value="Total Geral: " />
<h:outputText value="#{orcamentoMB.totalGeral}" id="totalGeral">
<f:convertNumber currencySymbol="R$ " type="currency" />
</h:outputText>
<h:outputText value="Total Com Desconto: " />
<h:outputText value="#{orcamentoMB.totalGeralComDesconto}"
id="totalGeralComDesconto">
<f:convertNumber currencySymbol="R$ " type="currency" />
</h:outputText>
</p:panelGrid>
<p:toolbar>
<p:toolbarGroup align="left">
<p:commandButton icon="ui-icon-disk" value="Salvar Sem Aceitar"
id="salvarSemAceitar" disabled="#{orcamentoMB.itens.size() == 0}"
actionListener="#{orcamentoMB.salvar}"
oncomplete="if (!args.validationFailed){ varDialogCadastrar.hide() }"
update=":formOrcamentos:dataTableOrcamentos">
<f:attribute name="salvarAceitando" value="false" />
</p:commandButton>
<p:commandButton icon="ui-icon-disk" value="Salvar Aceitando"
id="salvarAceitando" disabled="#{orcamentoMB.itens.size() == 0}"
actionListener="#{orcamentoMB.salvar}"
oncomplete="if (!args.validationFailed){ varDialogCadastrar.hide() }"
update=":formOrcamentos:dataTableOrcamentos">
<f:attribute name="salvarAceitando" value="true" />
</p:commandButton>
<p:commandButton value="Cancelar" icon="ui-icon-close"
onclick="varDialogCadastrar.hide()" type="button" />
</p:toolbarGroup>
</p:toolbar>
</h:form>
</p:dialog>
</ui:composition>
</h:body>
</html>
So, i'll show a page the is called for "varDialogFindPacientes"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
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>
</h:head>
<h:body>
<ui:composition>
<p:dialog id="dialogFindPacientes" width="600px" height="auto"
header="Pesquisar Pacientes" widgetVar="varDialogFindPacientes"
modal="true" showEffect="fade" hideEffect="fade">
<h:form id="formFindPacientes">
<p:dataTable rowKey="#{paciente.id}" var="paciente"
value="#{orcamentoMB.pacientes}" paginator="true"
emptyMessage="Não foi encontrado nenhum registro" rows="20"
id="dataTablePacientes" selection="#{orcamentoMB.selectedPaciente}"
selectionMode="single" rowIndexVar="rowIndex"
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'first-row' : 'second-row'}"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">
<p:ajax event="rowDblselect" process="dataTablePacientes"
listener="#{orcamentoMB.updatePacienteFromFind}"
oncomplete="dialogFindPacientes.hide()"
update=":formCadastrar:paciente" />
<p:column headerText="Nome" sortBy="#{paciente.pessoaFisica.nome}"
filterBy="#{paciente.pessoaFisica.nome}" id="nome"
filterMatchMode="contains">
<h:outputText value="#{paciente.pessoaFisica.nome}" />
</p:column>
</p:dataTable>
</h:form>
</p:dialog>
</ui:composition>
</h:body>
</html>
EDIT 1:
I have another problem yet, the #PostConstruct from my ManagedBean is called every ajax call.
Well, I have a p:dialog that inserts a new Entity, but after this entity is saved into database the p:dataTable remains the same, the new row doesn't appear.
Look at my p:dialog:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
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>
</h:head>
<h:body>
<ui:composition>
<h:form id="formCadastrar">
<p:dialog width="900px" height="500px" header="Cadastrar Dentista"
widgetVar="dialogCadastrar" modal="true">
<p:panelGrid columns="2" styleClass="semBorda">
<p:commandButton icon="ui-icon-disk" value="Salvar"
actionListener="#{dentistaMB.salvar}"
update=":formDentistas:dataTableDentistas" />
<p:commandButton value="Cancelar" icon="ui-icon-close"
onclick="confirmCancelar.show()" type="button" />
</p:panelGrid>
<p:panelGrid id="panelGridCadastar" styleClass="semBorda"
columns="2">
<h:outputText value="Nome: *" />
<p:inputText id="nome"
value="#{dentistaMB.dentista.pessoaFisica.nome}" size="40"
required="true" requiredMessage="O Nome do Dentista é obrigatório">
</p:inputText>
<h:outputText value="CRO *" />
<p:inputText id="cro" value="#{dentistaMB.dentista.cro}" size="10"
required="true" requiredMessage="O Número do CRO é obrigatório" />
</p:panelGrid>
<p:panelGrid columns="2" styleClass="semBorda">
<p:commandButton icon="ui-icon-disk" value="Salvar"
actionListener="#{dentistaMB.salvar}"
update=":formDentistas:dataTableDentistas" />
<p:commandButton value="Cancelar" icon="ui-icon-close"
onclick="confirmCancelar.show()" />
</p:panelGrid>
<p:confirmDialog id="confirmCancelar" message="Deseja cancelar ?"
showEffect="fade" hideEffect="fade" header="Cancelar"
severity="alert" widgetVar="confirmCancelar" appendToBody="true">
<p:commandButton value="Sim" oncomplete="confirmCancelar.hide()"
actionListener="#{dentistaMB.cancelar}" />
<p:commandButton value="Não" onclick="confirmCancelar.hide()"
type="button" />
</p:confirmDialog>
</p:dialog>
</h:form>
</ui:composition>
</h:body>
</html>
And look at my p:dataTable
<h:form id="formDentistas">
<p:growl autoUpdate="true" id="growlmessages" />
<p:dataTable rowKey="#{dentista.id}" var="dentista" value="#{dentistaMB.dentistas}"
paginator="true" emptyMessage="Não foi encontrado nenhum registro"
rows="10" id="dataTableDentistas"
selection="#{dentistaMB.selectedDentista}" selectionMode="single">
<f:facet name="header">Lista de Dentistas</f:facet>
<p:column headerText="Nome" sortBy="nome" filterBy="nome" id="nome"
width="200px">
#{dentista.pessoaFisica.nome}
</p:column>
<p:column headerText="Data Nascimento" sortBy="dataNascimento"
filterBy="dataNascimento" id="dataNascimento" width="60px">
#{dentista.pessoaFisica.dataNascimento}
</p:column>
<p:column headerText="CRO" sortBy="cro" filterBy="cro" id="cro"
width="60px">
#{dentista.cro}
</p:column>
<f:facet name="footer">
<div class="align_text_left">
<p:commandButton icon="ui-icon-plus" value="Novo" id="cadastrar"
oncomplete="dialogCadastrar.show()" />
<p:column headerText="Ações" style="width:50px;">
<p:commandButton value="Alterar" icon="ui-icon-pencil" />
<p:commandButton value="Remover" icon="ui-icon-trash"
action="#{dentistaMB.deletar}"
update=":formDentistas:dataTableDentistas" />
</p:column>
</div>
</f:facet>
</p:dataTable>
</h:form>
So, what's the correct form to update the p:dataTable after a change in an entity? This example above is about an insert, but remove doesn't work either. I used the following code:
<p:commandButton value="Remover" icon="ui-icon-trash"
action="#{dentistaMB.deletar}"
update=":formDentistas:dataTableDentistas" />
in your dialog you must add an ajax event to fire update of form like:
<p:ajax event="close" listener="#{dentistaMB.load}"
update=":formDentistas" immediate="true" global="false" />
this will allow you to reload your table feed lists.
in your load method you need to update (refetch data from db) dentistas list. If you are using filtering do not forget to update your filtering list as well.
In managedbean load function you can use:
public void load(){
dentistas.clear();
filteredDentistas.clear();
dentistas.addAll(getDentistService().getDentists());
filteredDentistas.addAll(getDentistService().getDentists());
}