If I click on the add button (for example the "CreateCategory1" Id) to add one new product category I get the "Name field is required" validation message. This should open one dialog, where I can enter the new category name, nothing else. At this point I don't want to validate the main form, because I just want to add one new product category, which I will be using later. Why is the dialog opening validating the form? How can I avoid this?
Thank you very much!
<?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 >
<h:outputScript library="js" name="warning.js"/>
<h:form id="ProductEditForm" target="_blank">
<div class="ui-fluid">
<p:panelGrid columns="4" columnClasses="ui-grid-col-6,ui-grid-col-2,ui-grid-col-2,ui-grid-col-2" layout="grid" styleClass="ui-panelgrid-blank" >
<p:outputPanel style="height: 70px" >
<p:breadCrumb model="#{breadCrumb.productMenuModel}" style="background: inherit; border: none" />
<h2>#{productController.selected.name}</h2>
</p:outputPanel>
<p:commandButton style="height: 30px; background: #{userController.headerColor}" icon="ui-icon-check" oncomplete="javascript:saved=true" action="#{productController.update}" actionListener="#{breadCrumb.navigateProduct()}" update=":center,:growl" value="#{bundle.Save}" />
<p:commandButton style="height: 30px" icon="ui-icon-close" oncomplete="javascript:saved=true" action="#{productController.refreshSelected()}" actionListener="#{breadCrumb.navigateProduct()}" update=":center,:growl" value="#{bundle.Cancel}"/>
<p:commandButton style="height: 30px" icon="ui-icon-document" update="#([id$=ProductHistoryDateForm])" oncomplete="PF('ProuctHistoryDateDialog').show()" value="Print history" disabled="#{empty productController.selected}" />
</p:panelGrid>
<p:panelGrid columns="2" columnClasses="ui-grid-col-6,ui-grid-col-6" layout="grid" >
<p:panel>
<h3>Main info</h3>
<p:panelGrid columns="2" columnClasses="ui-grid-col-3,ui-grid-col-9" layout="grid" styleClass="ui-panelgrid-blank">
<p:outputLabel value="#{bundle.EditProductLabel_name}" for="name" />
<p:inputText id="name" value="#{productController.selected.name}" title="#{bundle.EditProductTitle_name}" required="true" requiredMessage="#{bundle.EditProductRequiredMessage_name}"/>
<p:outputLabel value="#{bundle.EditProductLabel_originalName}"/>
<p:inputText id="originalName" value="#{productController.selected.originalName}"/>
<h:outputText value="#{bundle.ViewInventoryItemLabel_serialized}"/>
<p:selectBooleanCheckbox disabled="false" value="#{productController.selected.serialized}" />
<p:outputLabel value="#{bundle.EditProductLabel_ean}" for="ean" />
<p:inputText id="ean" value="#{productController.selected.ean}" title="#{bundle.EditProductTitle_ean}" />
<p:outputLabel value="#{bundle.EditProductLabel_itemNr}" for="itemNr" />
<p:inputText id="itemNr" value="#{productController.selected.itemNr}" title="#{bundle.EditProductTitle_itemNr}" />
...
</p:panelGrid>
<h3>Sales</h3>
<p:panelGrid columns="2" columnClasses="ui-grid-col-3,ui-grid-col-9" layout="grid" styleClass="ui-panelgrid-blank">
<p:outputLabel for="defaultSupplier" value="#{bundle.EditProduct_defaultSupplier}"/>
<p:selectOneMenu id="defaultSupplier" filter="true" value="#{productController.selected.defSupplierPartner}" title="#{bundle.EditProduct_defaultSupplier}" effect="fold" editable="false">
<f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{partnerController.items}"
var="partnerDataIdItem"
itemValue="#{partnerDataIdItem}"
itemLabel="#{partnerDataIdItem.name}"/>
</p:selectOneMenu>
<p:outputLabel value="#{bundle.EditProductLabel_purchaseDeliveryTime}" for="purchaseDeliveryTime" />
<p:inputText id="purchaseDeliveryTime" value="#{productController.selected.purchaseDeliveryTime}" title="#{bundle.EditProductTitle_purchaseDeliveryTime}" />
<p:outputLabel value="#{bundle.EditProductLabel_lastPurchase}" />
<p:inputText id="lastPurchase" value="#{productController.selected.lastPurchasePrice}" />
...
</p:panelGrid>
</p:panel>
<p:panel id ="productGroups">
<h3>Product categories</h3>
<p:panelGrid columns="3" columnClasses="ui-grid-col-1,ui-grid-col-1,ui-grid-col-11" layout="grid" styleClass="ui-panelgrid-blank">
<p:commandButton id="CreateCategory1" actionListener="#{productCategoryController.prepareCreate(1)}" update="productGroups, ProductCategoryCreateForm" icon="ui-icon-plus" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
<p:commandButton id="DeleteCategory1" disabled="#{productController.selected.productCategoryId1 == null}" update="category1" actionListener="#{productCategoryController.deleteProductCategory(productController.selected.productCategoryId1)}" icon="ui-icon-minus" />
<p:selectOneMenu id="category1" value="#{productController.selected.productCategoryId1}" label="#{productController.selected.productCategoryId1.name}" effect="fold">
<f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{productCategoryController.getItemsByLevel(1)}"
var="item"
itemLabel="#{item.name}"/>
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(1)}"/>
</p:selectOneMenu>
<p:commandButton id="CreateCategory2" rendered="#{productController.selected.productCategoryId1 != null}" actionListener="#{productCategoryController.prepareCreate(2)}" update="productGroups, ProductCategoryCreateForm" icon="ui-icon-plus" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
<p:commandButton id="DeleteCategory2" disabled="#{productController.selected.productCategoryId2 == null}" update="category2" actionListener="#{productCategoryController.deleteProductCategory(productController.selected.productCategoryId2)}" icon="ui-icon-minus" />
<p:selectOneMenu id="category2" rendered="#{productController.selected.productCategoryId1 != null}" label="#{productController.selected.productCategoryId2.name}" value="#{productController.selected.productCategoryId2}" effect="fold">
<f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{productCategoryController.getItemsByLevel(2)}"
var="item"
itemLabel="#{item.name}"/>
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(2)}"/>
</p:selectOneMenu>
<p:commandButton id="CreateCategory3" rendered="#{productController.selected.productCategoryId2 != null}" actionListener="#{productCategoryController.prepareCreate(3)}" update="productGroups, ProductCategoryCreateForm" icon="ui-icon-plus" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
<p:commandButton id="DeleteCategory3" disabled="#{productController.selected.productCategoryId3 == null}" update="category3" actionListener="#{productCategoryController.deleteProductCategory(productController.selected.productCategoryId3)}" icon="ui-icon-minus" />
<p:selectOneMenu id="category3" label="#{productController.selected.productCategoryId3.name}" rendered="#{productController.selected.productCategoryId2 != null}" value="#{productController.selected.productCategoryId3}" effect="fold">
<f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{productCategoryController.getItemsByLevel(3)}"
var="item"
itemLabel="#{item.name}"/>
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(3)}"/>
</p:selectOneMenu>
<p:commandButton id="CreateCategory4" rendered="#{productController.selected.productCategoryId3 != null}" actionListener="#{productCategoryController.prepareCreate(4)}" update="productGroups, ProductCategoryCreateForm" icon="ui-icon-plus" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
<p:commandButton id="DeleteCategory4" disabled="#{productController.selected.productCategoryId4 == null}" update="category4" actionListener="#{productCategoryController.deleteProductCategory(productController.selected.productCategoryId4)}" icon="ui-icon-minus" />
<p:selectOneMenu id="category4" label="#{productController.selected.productCategoryId4.name}" rendered="#{productController.selected.productCategoryId3 != null}" value="#{productController.selected.productCategoryId4}" effect="fold">
<f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{productCategoryController.getItemsByLevel(4)}"
var="item"
itemLabel="#{item.name}"/>
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(4)}"/>
</p:selectOneMenu>
</p:panelGrid>
</p:panel>
</p:panelGrid>
</div>
</h:form>
</ui:composition>
</html>
This is NOT a direct answer but a long extensive comment on what is all wrong with this question and how the real problem could simply be narrowed down by making a [mcve]... with a simple answer at the end.
Remove the composition
Remove the h:outputScript
Remove all styling
Remove the structural divs panelGrid and more
Remove 'bundles' from label and make them static
Remove most inputs (leave one in so that it still demonstrates the problem)
Remove most buttons that open a dialog and leave one (the one you referred to) in so that it still demonstrates the problem
What it could look like then
<?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">
<h:form id="ProductEditForm" target="_blank">
<p:commandButton id="CreateCategory1" actionListener="#{productCategoryController.prepareCreate(1)}" update="productGroups, ProductCategoryCreateForm" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
<p:selectOneMenu id="category1" value="#{productController.selected.productCategoryId1}" label="Category 1">
<f:selectItem itemLabel="Select one" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{productCategoryController.getItemsByLevel(1)}" var="item" itemLabel="#{item.name}"/>
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(1)}"/>
</p:selectOneMenu>
<p:selectOneMenu id="category2" rendered="#{productController.selected.productCategoryId1 != null}" label="Category 2" value="#{productController.selected.productCategoryId2}" effect="fold">
<f:selectItem itemLabel="Select one" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{productCategoryController.getItemsByLevel(2)}" var="item" itemLabel="#{item.name}"/>
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(2)}"/>
</p:selectOneMenu>
</h:form>
</html>
You could even make it more simple by using plain p:inputText instead of p:selectOneMenus.
<?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">
<h:form id="ProductEditForm" target="_blank">
<p:commandButton id="CreateCategory1" actionListener="#{productCategoryController.prepareCreate(1)}" update="productGroups, ProductCategoryCreateForm" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
<p:inputText id="category1" value="#{productController.selected.productCategoryId1}" label="Category 1">
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(1)}"/>
</p:inputText>
<p:inputText id="category2" rendered="#{productController.selected.productCategoryId1 != null}" label="Category 2" value="#{productController.selected.productCategoryId2}">
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(2)}"/>
</p:inputText>
</h:form>
</html>
And if the problem still occurs an h:inputText with f:ajax And even an h:commandButton with an f:ajax (changing the oncomplete to onevent) , making it less PrimeFaces dependend (and still causing an error).
But now we come to it... The oncomplete that opens the dialog... Is it actually related to opening the dialog? What if you'd use a simple oncomplete="alert('Hi there');" in the commandButton? Does it fail to? 100% sure it does, so your title
Opening dialog validates the main form what I don't want
and your question
"Why is the dialog opening validating the form?"
Are both wrong... What if you remove the oncomplete completely? Still fails? Yes... Hmmmm... So it is is just related to pressing a button. Well what does a button do? It submits a form... validating it... So effectively your question becomes
"How can I prevent a commandButton from submitting and validating my whole form"
And you could also have come here by starting to remove the oncomplete in the first place, by asking yourself the question related to the title:
"IS it related to opening the dialog? What If I don't open the dialog? Where do I do that? In the oncomplete, so what if I remove that").
If you posted your new question in a search engine and added 'PrimeFaces JSF site:stackoverflow.com' to it, you'd after some reading have found:
PrimeFaces disable validation on cancel button
Which is exactly like stated in the comment. Might not be sufficient (you might need to add some other id to the process attribute of fields you do want to submit with the specific button, but you'd have a more detailed to the point question then.
You could, of course also make more than one form, submitting smaller parts
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
Related
When I use p:selectOneMenu in p:dialog, selectOneMenu's panel is detached from selectOneMenu when scrolling. I found a few similar posts, but none of those solutions work:
p:selectOneMenu dropdown part scrolls and does not stay in position
p:selectOneMenu dropdown not attached to the component inside a dialog
SelectOneMenu panel scrolls with the mouse wheel
Basically all the proposed solutions use appendTo="#this", but it doesn't work in my case. I use PF 6.2.27.
Here's a part of my dialog:
<ui:composition 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:portlet="http://java.sun.com/portlet_2_0"
xmlns:p="http://primefaces.org/ui">
<p:dialog id="dlgTest" widgetVar="dlgTestWidget" header="My dialog" closeOnEscape="true" modal="true" resizable="false"
width="1000" height="800">
<p:panelGrid id="pnlData" styleClass="common-panel-grid">
<p:row>
<p:column>
<p:fieldset legend="HEADER" toggleable="false">
<h:panelGrid id="pgUseCase" >
<p:row>
...
</p:row>
<p:row>
<p:column colspan="2">
<p:selectOneMenu id="somServices" value="#{bean.selectedService}" effect="none" disabled="#{not bean.serviceEnabled}"
converter="serviceConverter" appendTo="#this">
<f:selectItem itemLabel="" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems var="item" value="#{bean.serviceList}" itemLabel="#{item.name}" itemValue="#{item}" />
</p:selectOneMenu>
</p:column>
</p:row>
</h:panelGrid>
</p:fieldset>
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
</ui:composition>
Does anyone have some other solution to this problem?
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
When I click on my <p:selectOneMenu> the whole layout crashes. When I click outside the menu and then the menu itself again, always the layout changes. When I remove the <p:panel> the problem is gone. I see the problem is the <p:panel> in combination with the <h:panelGrid>.
How to avoid the behavior?
See my gif below!
Additional Information:
Primefaces 6.0
Primefaces "Omega" Theme
Here is my minimal code example:
<!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>
<title>Test</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="1" style="width:100%;">
<h:panelGroup layout="block">
<p:panel header="panel">
<h:panelGrid columns="1" cellpadding="5">
<h:panelGrid id="wfSelectionGrid" columns="2" >
<h:outputText value="Category:" />
<p:selectOneButton >
<f:selectItem itemLabel="1" itemValue="1" />
<f:selectItem itemLabel="2" itemValue="2" />
<f:selectItem itemLabel="3" itemValue="3" />
</p:selectOneButton>
</h:panelGrid>
<h:panelGrid columns="4">
<p:outputLabel for="wfSelectionMenu" value="Anwendungsfall:" />
<p:selectOneMenu id="wfSelectionMenu">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="AA" itemValue="AA" />
<f:selectItem itemLabel="BB" itemValue="BB" />
<f:selectItem itemLabel="CC" itemValue="CC" />
</p:selectOneMenu>
<p:commandButton id="defineXmlButton" value="to stuff" />
</h:panelGrid>
</h:panelGrid>
</p:panel>
</h:panelGroup>
</h:panelGrid>
</h:form>
</h:body>
</html>
Edit 1:
Broken down to less code, even the following sample leads to the problem:
<h:form>
<p:panel header="panel">
<h:panelGrid columns="2">
<p:outputLabel for="wfSelectionMenu" value="Anwendungsfall:" />
<p:selectOneMenu id="wfSelectionMenu">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="AA" itemValue="AA" />
<f:selectItem itemLabel="BB" itemValue="BB" />
<f:selectItem itemLabel="CC" itemValue="CC" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
</h:form>
Edit 2:
Adding colors makes it more visible which of the components change during the on click event. Now by using the attribute cellspacing and setting it to zero, the problem is gone. But is there another (better) solution?
<p:panel header="panel" style="background-color:blue;">
<h:panelGrid columns="2" style="background-color:red;" cellspacing="0" cellpadding="10">
<p:outputLabel for="wfSelectionMenu" value="Anwendungsfall:" style="background-color:green;" />
<p:selectOneMenu id="wfSelectionMenu" >
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="AA" itemValue="AA" />
<f:selectItem itemLabel="BB" itemValue="BB" />
<f:selectItem itemLabel="CC" itemValue="CC" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
Edit 3:
Using devtools - the interesting html component sizes are:
the <td> is 117*28 + 10 padding each side..
After the click its 115*28 + 10 padding each side.
Why is the component loosing those 2 px? It seems that every other component stays the same size.
Well, I have a problem that i don't know how to fix. I have a component (selectOneMenuFormaPagamento) that change another components.
I.E: When i choose a "selectOneMenuFormaPagamento" and click on commandButton, the others components (inside another dialog) should be updated but it's don't happen and i have no ideia why.
Look my JSF 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>
<h:form id="formPagamento" enctype="multipart/form-data">
<p:dialog id="dialogPagamento" width="500px" height="90px"
header="Pagamento" widgetVar="dialogPagamento" modal="true"
showEffect="fade" hideEffect="fade">
<p:panelGrid columns="2" styleClass="semBorda">
<h:outputText value="Forma de Pagamento:" />
<p:selectOneMenu id="selectOneMenuFormaPagamento"
converter="entityConverter"
value="#{orcamentoMB.historicoPagamentoOrcamento.formaPagamento}"
effect="fade" required="true"
requiredMessage="A forma de pagamento é obrigatória">
<f:selectItem itemLabel="Selecione uma Forma de Pagamento"
itemValue="" />
<f:selectItems value="#{orcamentoMB.formasPagamento}"
var="formaPagamento" itemLabel="#{formaPagamento.descricao}"
itemValue="#{formaPagamento}" />
</p:selectOneMenu>
<p:commandButton icon="ui-icon-play" value="Continuar"
id="continuarPagamento" process="selectOneMenuFormaPagamento"
update=":formPagamento:inputTextNumeroCartao, :formPagamento:inputNumberQuantidadeParcelas, :formPagamento:selectOneMenuBandeira,
:formPagamento:valorTeste"
oncomplete="if (!args.validationFailed){ dialogPagamento.hide(); dialogPagamentoFinal.show(); }" />
</p:panelGrid>
</p:dialog>
<p:dialog id="dialogPagamentoFinal" width="500px" height="200px"
header="Pagamento" widgetVar="dialogPagamentoFinal" modal="true"
showEffect="fade" hideEffect="fade">
<p:panelGrid columns="2" styleClass="semBorda">
<h:outputText value="Valor teste" />
<p:inputText
value="#{orcamentoMB.historicoPagamentoOrcamento.formaPagamento.codigo}"
id="valorTeste" />
<h:outputText value="Valor: *" />
<pe:inputNumber
value="#{orcamentoMB.historicoPagamentoOrcamento.valor}"
symbol="R$ " required="true"
requiredMessage="O valor é obrigatório" />
<h:outputText value="Número Cartão: " />
<p:inputText id="inputTextNumeroCartao"
required="#{orcamentoMB.historicoPagamentoOrcamento.formaPagamento.codigo == 'CREDITO' or
orcamentoMB.historicoPagamentoOrcamento.formaPagamento.codigo == 'DEBITO'}"
requiredMessage="O número do cartão é obrigatório"
value="#{orcamentoMB.historicoPagamentoOrcamento.numeroCartao}"
disabled="#{orcamentoMB.historicoPagamentoOrcamento.formaPagamento.codigo != 'CREDITO' and orcamentoMB.historicoPagamentoOrcamento.formaPagamento.codigo != 'DEBITO'}" />
<h:outputText value="Quantidade Parcelas: " />
<pe:inputNumber id="inputNumberQuantidadeParcelas"
decimalPlaces="0"
required="#{orcamentoMB.historicoPagamentoOrcamento.formaPagamento.codigo == 'CREDITO'}"
requiredMessage="A quantidade de parcelas é obrigatória"
value="#{orcamentoMB.historicoPagamentoOrcamento.quantidadeParcelas}"
disabled="#{orcamentoMB.historicoPagamentoOrcamento.formaPagamento.codigo != 'CREDITO'}" />
<h:outputText value="Bandeira do Cartão: " />
<p:selectOneMenu id="selectOneMenuBandeira"
required="#{orcamentoMB.historicoPagamentoOrcamento.formaPagamento.codigo == 'CREDITO' or
orcamentoMB.historicoPagamentoOrcamento.formaPagamento.codigo == 'DEBITO'}"
requiredMessage="A Bandeira do Cartão é obrigatória"
disabled="#{orcamentoMB.historicoPagamentoOrcamento.formaPagamento.codigo != 'CREDITO' and
orcamentoMB.historicoPagamentoOrcamento.formaPagamento.codigo != 'DEBITO'}"
converter="entityConverter"
value="#{orcamentoMB.historicoPagamentoOrcamento.bandeiraCartao}"
effect="fade">
<f:selectItem itemLabel="Selecione uma Bandeira" itemValue="" />
<f:selectItems value="#{orcamentoMB.bandeiras}" var="bandeira"
itemLabel="#{bandeira.descricao}" itemValue="#{bandeira}" />
</p:selectOneMenu>
<p:commandButton icon="ui-icon-disk" value="Finalizar"
actionListener="#{orcamentoMB.finalizarPagamento}"
update=":formOrcamentos:dataTableOrcamentos"
oncomplete="if (!args.validationFailed) { dialogPagamentoFinal.hide(); }" />
</p:panelGrid>
</p:dialog>
</h:form>
</ui:composition>
</h:body>
</html>
I have this code, currently working:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition 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"
template="/templates/default.xhtml">
<ui:define name="content">
<h:form id="form">
<p:dataTable id="clienti" var="c" value="#{clientiController.clienti}" rowKey="#{c.id}">
<p:column headerText="Ragione sociale">
<h:outputText value="#{c.ragioneSociale}" />
</p:column>
<p:column headerText="Codice fiscale">
<h:outputText value="#{c.codiceFiscale}" />
</p:column>
<p:column style="width:4%">
<p:commandButton
update=":formDialog:clienteEditDialog"
oncomplete="clienteEditDialog.show()"
value="Modifica"
title="Modifica">
<f:setPropertyActionListener value="#{c}" target="#{clientiController.clienteSelezionato}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:commandButton
value="Aggiorna"
actionListener="#{clientiController.aggiorna}"
update=":form:clienti"
icon="ui-icon-arrowrefresh-1-n" />
<p:commandButton
value="Nuovo Cliente"
actionListener="#{clientiController.nuovo}"
update=":formDialog:clienteEditDialog"
oncomplete="clienteEditDialog.show()" />
</h:form>
<h:form id="formDialog">
<p:dialog
header="Modifica Cliente"
widgetVar="clienteEditDialog"
id="clienteEditDialog"
showEffect="fade"
hideEffect="explode"
closable="true">
<h:panelGrid id="clienteEditDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">
<p:outputLabel for="fieldNome" value="Ragione Sociale:" />
<p:inputText id="fieldNome" value="#{clientiController.clienteSelezionato.ragioneSociale}" />
<p:outputLabel for="fieldCodice" value="Codice:" />
<p:inputText id="fieldCodice" value="#{clientiController.clienteSelezionato.codiceFiscale}" required="true" requiredMessage="Codice fiscale obbligatorio" />
</h:panelGrid>
<p:commandButton
value="Conferma modifiche"
actionListener="#{clientiController.modifica}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id!=null}" />
<p:commandButton
value="Conferma nuovo cliente"
actionListener="#{clientiController.crea}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id==null}" />
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
Now I'd really like my dialog to be modal, so I add modal=true to my .
The result is my dialog appears "under" the overlay.
After a bit searching, I found that appendToBody=true would solve my problem, so I try it and my dialog appears the right way.
But... WTF??! Buttons inside the dialog stop working!!
BUG? Or is there any solution?
Move <h:form id="formDialog"> inside the dialog
Because when you use appendToBody=true the content of the dialog being appended to the BODY of your page... And in you case its being taken outside the h:form and as you know commandButtons must reside within a h:form in order to work....
Like this
<p:dialog appendToBody="true".....
<h:form id="formDialog">
.....
When working with dialogs allays remember to place your h:forms inside the dialog...