Primefaces selectOneMenu in dialog breaks when scrolling - jsf

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?

Related

Opening dialog validates the main form what I don't want

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?

Update selected Item in Primefaces selectOneMenu from commandButton

i have a reset Button and want to select a default value
in the selectOneMenu component when the button is pressed.
I tried different posts, but don't get it working.
here is my page:
<?xml version="1.0" encoding="UTF-8"?>
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="${pageContext.request.contextPath}/templates/default.xhtml">
<ui:define name="content">
<h:form>
<h1>Maschinenverwaltung</h1>
<p:panelGrid id="editMachinePanelGrid" style="margin-top:200px"
rendered="true">
<f:facet name="header">
<p:row>
<p:column colspan="4">Maschinenverwaltung</p:column>
</p:row>
<p:row>
<p:column colspan="4">Maschine</p:column>
</p:row>
</f:facet>
<p:row>
<p:column colspan="2">
<p:commandButton id="createModeButton2" ajax="true" type="reset"
actionListener="#{machineController.setCreateMode('true')}"
value="Neuanlage" update="machineName, deleteMachine" onclick="PF('machineSelector').selectItem(id='noMachine')">
</p:commandButton>
</p:column>
<p:column colspan="2">
<p:spacer></p:spacer>
</p:column>
</p:row>
<p:row></p:row>
<p:row>
<p:column colspan="2">
<p:selectOneMenu id="machineSelector"
value="#{machineController.currentMachine}" required="true"
var="m" effect="puff" converter="MachineConverter">
<f:selectItem itemLabel="Maschine auswählen" itemValue="" id="noMachine"/>
<f:selectItems value="#{machineController.allMachines}"
var="machine" itemLabel="#{machine.name}" itemValue="#{machine}" />
<p:column>
#{m.name}
</p:column>
<p:ajax listener="#{machineController.machineSelected}"
update="machineName">
</p:ajax>
</p:selectOneMenu>
</p:column>
<p:column colspan="2"
rendered="#{machineController.deleteMachineDisabled()}">
<p:spacer></p:spacer>
</p:column>
<p:column rendered="#{!machineController.deleteMachineDisabled()}">
<p:commandButton id="deleteMachine"
action="#{machineController.deleteCurrentMachine()}"
value="löschen"
disabled="#{machineController.deleteMachineDisabled()}"
rendered="#{!machineController.deleteMachineDisabled()}" />
</p:column>
</p:row>
<p:row>
<p:column colspan="2">Maschinenbezeichnung: </p:column>
<p:column colspan="2">
<p:inputText value="#{machineController.currentMachine.name}"
id="machineName"></p:inputText>
</p:column>
</p:row>
<p:row>
<p:column colspan="2">
<p:commandButton value="Speichern" partialSubmit="true"
process="editMachinePanelGrid"
action="#{machineController.saveMachine()}"></p:commandButton>
</p:column>
<p:column colspan="2">
<p:spacer></p:spacer>
</p:column>
</p:row>
</p:panelGrid>
<h:messages id="messages" />
</h:form>
</ui:define>
<ui:define name="title">Maschinenverwaltung</ui:define>
</ui:composition>
I know, that i have to use the selectValue() Method, but don't know
how to address the Parameter to select the value:
<f:selectItem itemLabel="Maschine auswählen" itemValue="" id="noMachine"/>
I am using Primefaces 5.1
best regards
Heiko
To reset the p:selectOneMenu on client side, you may use the client side API:
First set a widget name for you menu like this:
<p:selectOneMenu widgetVar="wv" ... />
Now you may access and set the value of the menu via the client side API easily:
<p:commandButton
onclick="PF('wv').selectValue('');"
/>
Note that the given value in the selectValue-method should be the value defined by the itemValue-attribute of your select item. As it is empty in your case (itemValue="") you may just pass the empty String '' as value, as shown above.
Unrelated:
I guess your select item should have set the attribute noSelectionOption='true' instead of (only) having set the item value to the empty String.

Is it possible to disable f:event type=“preRenderView” listener on fileupload primefaces

I have a fileUploader which disappears after partial site refresh
Here is my xhtml file
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
template="/WEB-INF/templates/traleerdf-template.xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns="http://www.w3.org/1999/xhtml">
<ui:define name="content">
<f:metadata>
<f:event type="preRenderView"
listener="#{registration.loadRegistrationDetails()}" ></f:event>
</f:metadata>
<p:ajaxStatus onstart="PF('statusDialog').show();" onsuccess="PF('statusDialog').hide();"/>
<p:dialog modal="true" widgetVar="statusDialog" header="Saving"
draggable="false" closable="false">
<p:graphicImage value="/images/ajax-loader.gif"/>
</p:dialog>
<h:form id="form" enctype="multipart/form-data">
<p:panelGrid id="detail" columns="1" >
<p:dataTable var="reg" id="datatable" value="#{registration.registrationDTOs}" rows="12">
<p:column headerText="Name" style="width:5%">
<p:outputLabel value="#{reg.sourceName}"/>
</p:column>
<p:column headerText="Path Prefix" style="width:5%">
<p:outputLabel value="#{reg.pathPrefix}"/>
</p:column>
<p:column headerText="Template File" style="width:30%">
<p:commandButton id="templateButton" value="Get Template" oncomplete="tempDlg.show();" process="#this" title="Template File"
update=":topForm:form:growl :topForm:form:tempId">
<f:setPropertyActionListener value="#{reg}" target="#{registration.registrationDTO}" />
</p:commandButton>
</p:column>
<p:column style="width:2%" headerText="Update">
<p:commandButton id="selectButton" update=":topForm:form:growl :topForm:form:display" process="#this" oncomplete="regDialog.show()" icon="ui-icon-search" title="Edit">
<f:setPropertyActionListener value="#{reg}" target="#{registration.registrationDTO}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog header="Registration Detail" widgetVar="regDialog" resizable="false" id="regDlg" showEffect="fade" hideEffect="explode" modal="true">
<p:panelGrid id="display" columns="2" style="margin:0 auto;" >
<p:outputLabel id="lblEndpoint" for="txtEndpoint" value="#{msg['Registration.Endpoint']}"/>
<h:outputText id="txtEndpoint" value="#{registration.registrationDTO.endpoint}"/>
<p:outputLabel id="lblSourceName" for="txtSourceName" value="#{msg['Registration.sourceName']}"/>
<p:inputText required="true" id="txtSourceName" value="#{registration.registrationDTO.sourceName}" requiredMessage="Source name not entered"/>
<p:outputLabel id="lblPathPrefix" for="txtPathPrefix" value="#{msg['Registration.pathPrefix']}"/>
<p:inputText disabled="true" required="true" id="txtPathPrefix" size="20" value="#{registration.registrationDTO.pathPrefix}" requiredMessage="Path prefix is required"/>
<p:outputLabel id="lblTemplateFile" for="txtTemplateFile" value="#{msg['Registration.templateFile']}"/>
<p:fileUpload required="true" id="txtTemplateFile" fileUploadListener="#{registration.uploadTemplateFile}" requiredMessage="Template File required"
mode="advanced" widgetVar="txtTemplateFile" value="#{registration.registrationDTO.templateFile}" update=":topForm:form:growl">
</p:fileUpload>
<h:panelGroup>
<p:commandButton icon="ui-icon-disk" id="btnUpdte" update=":topForm:form:growl :topForm:form:panel" ajax="true" action="#{registration.updateRegistration()}" style="margin-right:20px;"
value="Update" >
</p:commandButton>
</h:panelGroup>
</p:panelGrid>
</p:dialog>
<p:dialog header="Template Dialog" widgetVar="tempDlg" modal="true" height="100" showEffect="fade" hideEffect="explode">
<p:panelGrid id="tempId" style="margin:0 auto;" columns="2">
<p:outputLabel id="TemplateFileLbl" for="TemplateFile" value="#{msg['Registration.templateFile']}"/>
<h:outputText value="#{registration.registrationDTO.templateFile}" id="TemplateFile"/>
</p:panelGrid>
</p:dialog>
</p:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
The upload button will open a new dialog which allows the user to edit the fields and can upload a new template file.
My Problem is every time the upload button in the dialog is clicked, f:event method method is invoked which is expected as it is of type prerender but is there anyway to avoid this event call for the fileupload because it is overwriting the template file name I uploaded. (prerender method is making a call to db to get the list of details which in the case overriding the template file.)
From the namespaces you're using, I presume you're using JSF 2.2. In this version, you can have
<f:viewAction action="#{registration.loadRegistrationDetails()}"/>
The viewAction tag is not executed on postback by default.

JSF2 - Primefaces - Partial update with command button not works when updating a nested panel

I’m trying to update a part of my page using the following command:
<p:commandButton id="bntNewAddress" immediate="true"
value="New Address" disabled="false" icon="ui-icon-document"
process="#this" update=":main_form:createPanelDetailsAddress"
action="#{issuerComponent.initAddNewAddress}">
</p:commandButton>
When I click the button, the panel "createPanelDetailsAddress" is not updated. On the other side when I use update=":main_form”, the panel is updated (but all other panels inside the main_form are updated also)
The panel I want to update is included in a panel named “createPanel”.
Could anyone have idea why update=":main_form:createPanelDetailsAddress" doesn't work in my case ?
I use primefaces3.5 and Mojarra JSF 2.1.7
Here is the code I used:
public String initAddNewAddress(){
renderCreatePanelDetailsAddress = true;
return null;
}
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" template="/template.xhtml">
<ui:define name="content">
<h:form id="main_form">
<p:panel id="createPanel" rendered="true">
<p:messages id="msgCreate" />
<p:panel id="createPanelDetails"
header="#{issuerMsgs['issuer.createArea.title']}">
<h:panelGrid border="0" columns="6">
<h:outputText value="#{issuerMsgs['issuer.issuerCode.title']}:" />
<p:inputText required="true"
value="#{issuerComponent.updateIssuer.issuerCode}"
label="issuer_issuerCode">
</p:inputText>
<h:outputText value="#{issuerMsgs['issuer.description.title']}:" />
<p:inputText required="true"
value="#{issuerComponent.updateIssuer.description}"
label="issuer_description">
</p:inputText>
</h:panelGrid>
</p:panel>
<p:spacer height="10" />
<p:panel id="panelListAddress"
header="#{addressMsgs['address.createArea.title']}">
<p:dataTable id="addresslist" var="address"
value="#{issuerComponent.addressList}" paginator="false" rows="10">
<p:column>
<f:facet name="header">
<h:outputText value="#{addressMsgs['address.tel.title']}" />
</f:facet>
<h:outputText value="#{address.tel}" />
</p:column>
</p:dataTable>
<p:spacer height="22" width="0" />
<p:commandButton id="bntNewAddress" immediate="true"
value="New Address" disabled="false" icon="ui-icon-document"
process="#this" update=":main_form:createPanelDetailsAddress"
action="#{issuerComponent.initAddNewAddress}">
</p:commandButton>
</p:panel>
<p:panel id="createPanelDetailsAddress"
header="#{addressMsgs['address.createArea.title']}"
rendered="#{issuerComponent.renderCreatePanelDetailsAddress}">
<ui:include src="createAddress.xhtml"></ui:include>
<p:commandButton value="Add"
rendered="#{issuerComponent.renderBtnAddAddress}" disabled="false"
icon="ui-icon-document" process="#this,createPanelDetailsAddress"
update=":main_form" action="#{issuerComponent.addNewAddress}"
actionListener="#{addressComponent.addNewComposite}">
<f:setPropertyActionListener
value="#{addressComponent.updateAddress}"
target="#{issuerComponent.address}" />
</p:commandButton>
</p:panel>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
Your update will fail because
rendered="#{issuerComponent.renderCreatePanelDetailsAddress}"
will evaluate to false the first time the view is rendered. As a result the component is not in the DOM tree the first time the view is rendered.
Ajax updates work by locating a specific component (by id) in the DOM and replacing it with new markup. Your panel was never in the DOM to begin with, so there's nothing to update with ajax.
To remedy, you need to wrap the <p:panel/>with another component and make that component the target of your ajax update
<p:outputPanel id="container" layout="none">
<p:panel id="createPanelDetailsAddress" header="# addressMsgs['address.createArea.title']}" rendered="#issuerComponent.renderCreatePanelDetailsAddress}">
<ui:include src="createAddress.xhtml"></ui:include>
<p:commandButton value="Add"
rendered="#{issuerComponent.renderBtnAddAddress}" disabled="false"
icon="ui-icon-document" process="#this,createPanelDetailsAddress"
update=":main_form" action="#{issuerComponent.addNewAddress}"
actionListener="#{addressComponent.addNewComposite}">
<f:setPropertyActionListener
value="#{addressComponent.updateAddress}"
target="#{issuerComponent.address}" />
</p:commandButton>
</p:panel>
</p:outputPanel>

Modal dialogs BUG

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...

Resources