i need help with this. I have a 'form' which call a p:dialog through p:commandButton. That p:dialog include other p:commandButton, but that second button does not take any action, which is weird for me, because the first button works fine.
The code:
<ui:define name="body">
<br/>
<br/>
<br/>
<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
<p:graphicImage value="/resources/Images/ajax-loader.gif" alt="Por favor espere..." />
</p:dialog>
<h:form id="BuscarEmpresaForm">
<h:panelGroup id="display">
<h:panelGrid columns="2" style="margin-left: 10px;">
<p:outputLabel value="#{bundle.BuscarEmpresaBuscarLabel}" />
<h:outputLabel/>
<h:selectOneRadio id="idBusquedaRadio" value="#{cupoController.radioButtonBusqueda}">
<f:selectItem itemLabel="#{bundle.BuscarEmpresaCodigoLabel}" itemValue="Codigo" />
<f:selectItem itemLabel="#{bundle.BuscarEmpresaNombreLabel}" itemValue="Nombre" />
</h:selectOneRadio>
<h:outputLabel/>
<p:inputText id="empresa" value="#{cupoController.empresaTextoBusqueda}" required="true" requiredMessage="El campo es requerido"/>
<!--THIS BUTTON WORKS-->
<p:commandButton value="Buscar" actionListener="#{cupoController.prepareCreateEmpresa()}" action="#{cupoController.searchEmpresa()}" oncomplete="PF('dlg1').show();" update=":confirmDialogEmpresa">
</p:commandButton>
<p:message for="empresa"/>
</h:panelGrid>
</h:panelGroup>
</h:form>
<p:dialog id="dialog1" header="Mensaje" widgetVar="dlg1" minHeight="40" modal="true" appendTo="#(body)">
<h:form id="confirmDialogEmpresa">
<h:panelGroup id="display">
<h:panelGrid columns="2" rendered="#{cupoController.selectedEmpresa.codcor != null}">
<p:outputLabel value="Empresa encontrada, Continuar?"/>
<h:outputLabel/>
<p:outputLabel value="Nombre: #{cupoController.selectedEmpresa.razonsocial}"/>
<h:outputLabel/>
<p:outputLabel value="RUC: #{cupoController.selectedEmpresa.ruc}"/>
<h:outputLabel/>
<!--THIS BUTTON DOES NOT WORK-->
<p:commandButton value="Si" action="#{cupoController.buscarCupo}" icon="ui-icon-check"/>
<p:commandButton value="No" onclick="dlg1.hide();" icon="ui-icon-close" update="#none"/>
</h:panelGrid>
<h:panelGrid columns="2" rendered="#{cupoController.selectedEmpresa.codcor == null}" >
<p:outputLabel value="Empresa no encontrada"/>
<h:outputLabel/>
<p:messages />
<h:outputLabel/>
<p:commandButton value="Aceptar" onclick="dlg1.hide();" icon="ui-icon-close" update="#none"/>
</h:panelGrid>
</h:panelGroup>
</h:form>
</p:dialog>
</ui:define>
I have done some attempts replacing p:commandButton for h:commandButton but have same results.
An image showing what code outs
Thanks in advance.
I found the problem and is related to the topic: Backing beans (#ManagedBean) or CDI Beans (#Named)?
In my case i was confused. I was mixing CDI annotations with JSF annotations in the managed bean related, producing a strange behavior. Finally i have fixed letting just JSF annotations.
Core: JSF 2.0, PrimeFaces 5.0, GlassFish 4.1
Related
I have a dialog which is contains two listboxes, one checkbox and one button. I try to pass values of these components to backing bean.
<p:dialog header="Add" widgetVar="dlgAdd" resizable="false"
id="dlgAddId" showEffect="fade" modal="true">
<h:form id="dlgAddForm">
<p:panelGrid columns="2">
<p:outputLabel>Name*</p:outputLabel>
<p:selectOneMenu id="addname" value="#{notificationsSettingManagedBean.customerUserEmailSetting.userNameSurname}" effect="fold">
<f:selectItems value="#{notificationsSettingManagedBean.customerUserNameSurnameList}" />
</p:selectOneMenu>
<p:outputLabel>Email-ID*</p:outputLabel>
<p:selectOneMenu id="addsurname" value="" effect="fold">
<f:selectItems value="#{notificationsSettingManagedBean.customerUserEmailsList}" />
</p:selectOneMenu>
</p:panelGrid>
<p:panel>
<div align="center">
<p:outputLabel>Email Notifications</p:outputLabel>
</div>
</p:panel>
<p:panelGrid columns="2" style="width: 100%;text-align: center;">
<p:outputLabel>Order Submitted</p:outputLabel>
<p:selectBooleanCheckbox value="#{notificationsSettingManagedBean.customerUserEmailSetting.orderSubmit}"/>
</p:panelGrid>
<div align="center">
<p:commandButton
actionListener="#{notificationsSettingManagedBean.saveCustomerEmailSettings}"
immediate="true" value="Save" ajax="true"
oncomplete="dlgAddId.hide();" />
</div>
</h:form>
</p:dialog>
On notificationsSettingManagedBean, i create customerUserEmailSetting object which is contains get and set methods of userNameSurname,customerUserEmailsList and ordersubmit.
Problem is when try to get this data on saveCustomerEmailSettings method on backing bean i see that these data are null. How can i pass them to backing bean?
i have a problem with the display of a dialog on a click. It's a obvious one but i can't spot the bug. I've been stuck on this for days, it's crazy. Can you help me please.
<h:form id="form">
<p:commandButton
rendered="#{characterBean.characterSession.characterName ne null}"
value="#{characterBean.characterSession.title.titleName}"
icon="fa fa-fw fa-edit" onclick="PF('dlg').show();"
update="#form"/>
<p:dialog id="titleDetail" header="#{i18n['title.yourTitles']}"
widgetVar="dlg" dynamic="true" closable="false" resizable="false"
showEffect="fade" hideEffect="fade">
<h:panelGroup>
<p:messages autoUpdate="true" />
<h:selectOneMenu id="titleSelect" converter="#{titleConverter}"
value="#{characterBean.characterSession.title}">
<f:selectItems value="#{characterBean.titleUnlocked}" var="t"
itemValue="#{t}" itemLabel="#{t.titleName}" />
</h:selectOneMenu>
<hr />
<h:panelGrid columns="2" style="width: 100%; text-align:center">
<p:commandButton value="#{i18n['general.submit']}"
icon="fa fa-check"
actionListener="#{characterBean.updateCharacterTitle}"
oncomplete="PF('dlg').hide();" update="#form" />
<p:commandButton value="#{i18n['general.cancel']}"
icon="fa fa-close" action="#{characterBean.submitCancel}"
oncomplete="PF('dlg').hide();" update="#form" process="#this" />
</h:panelGrid>
<p:remoteCommand name="updateForm()" process="#this" update="#form" />
</h:panelGroup>
</p:dialog>
</h:form>
The core problem is essentially this:
<h:form>
<p:commandButton onclick="PF('dlg').show();" update="#form"/>
<p:dialog widgetVar="dlg">
...
</p:dialog>
</h:form>
The default state of <p:dialog> is hidden.
The onclick shows the dialog.
The update updates the entire content of the <h:form>.
The <p:dialog> is also included in the update.
So, the <p:dialog> gets hidden again.
There are several solutions:
Don't let update include the <p:dialog>.
<h:form>
<h:panelGroup id="outsideDialog">
<p:commandButton onclick="PF('dlg').show();" update="outsideDialog"/>
</h:panelGroup>
<p:dialog widgetVar="dlg">
...
</p:dialog>
</h:form>
Replace onclick by oncomplete as it runs after the update.
<h:form>
<p:commandButton update="#form" oncomplete="PF('dlg').show();" />
<p:dialog widgetVar="dlg">
...
</p:dialog>
</h:form>
Move <p:dialog> outside the <h:form> and give it its own <h:form>.
<h:form>
<p:commandButton update="#form :dlg" oncomplete="PF('dlg').show();" />
</h:form>
<p:dialog id="dlg" widgetVar="dlg">
<h:form>
...
</h:form>
</p:dialog>
or, depending on whether you actually need to update the dialog's contents or not
<h:form>
<p:commandButton onclick="PF('dlg').show();" update="#form" />
</h:form>
<p:dialog widgetVar="dlg">
<h:form>
...
</h:form>
</p:dialog>
The recommended solution is 3.
See also:
Execution order of events when pressing PrimeFaces p:commandButton
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
p:commandbutton action doesn't work inside p:dialog
I have a PrimeFaces dialog, that has two command buttons that executes some code in the backing bean. I want to block the dialog within the action.
I managed to do it using blockUI, but when the blockUI is present, and I open the dialog, it appears at the bottom of the page.
If I remove the blockUI component, the dialog opens at the center of the page, as I want. But I want it to be centered and with the blockUI.
<p:dialog header="Attention" id="dialog" position="center"
widgetVar="dialog" modal="true" closable="false"
dynamic="true" closeOnEscape="false">
<div class="internal-margin-top">
<h:outputText value="Location" styleClass="ui-outputtext" />
<p:inputText value="#{activityBean.location}"
id="inputLocation" maxlength="15">
</p:inputText>
</div>
<div class="internal-margin-bottom">
<p:commandButton id="closureYes" value="Yes"
styleClass="btn-green"
onstart="PF('block').show();"
oncomplete="PF('dialog').hide(); PF('block').hide();"
action="#{activityBean.processItem()}" process="#all">
</p:commandButton>
<p:commandButton id="closureNo" value="No"
styleClass="btn-red"
onstart="PF('block').show();"
oncomplete="PF('dialog').hide(); PF('block').hide();"
action="#{activityBean.processActivity()}" process="#all" />
</div>
</p:dialog>
<p:blockUI block="scrapDialog" widgetVar="block">
<p:graphicImage library="images" name="loading_bar.gif" />
</p:blockUI>
Thanks in advance.
Example with a centered modal dialog:
<p:dialog header="Header" position="center" widgetVar="wv_dialog" modal="true" closable="false" dynamic="true" closeOnEscape="false">
<h:form id="dialogform">
<p:panelGrid columns="1">
<p:inputText value="test"/>
<p:inputText value="test"/>
<p:inputText value="test"/>
<p:inputText value="test"/>
</p:panelGrid>
<p:commandButton id="closebutton"
value="Close"
oncomplete="PF('wv_dialog').hide();"
action="#{testBean.actionTest()}"
process="#form"/>
<p:blockUI block="dialogform" trigger="closebutton"/>
</h:form>
</p:dialog>
I'm using PrimeFaces 4.0 and I'm trying to use a dialog to change password.
I used password component to do this job It does n't work in a dialog but It works fine when I'm not using Dialog.
Here is my code
<h:form>
<p:dialog widgetVar="changePw" resizable="true" appendTo="#(body)"
modal="true" closable="false" id="changePw">
<p:panel header="change password">
<p:messages id="messages" showDetail="true" showSummary="false"
autoUpdate="true" />
<h:panelGrid columns="2" id="matchGrid">
<h:outputLabel for="pwdNew" value="New: *" />
<p:password id="pwdNew" value="#{passwordBean.newPw}" feedback="true"
match="pwdConf" required="true"
validatorMessage="Pw does n't matches"
requiredMessage="Value required">
</p:password>
<p:messages showDetail="true" showSummary="false" autoUpdate="true"
for="pwdNew" />
<h:outputLabel for="pwdConf" value="Confirm Password: *" />
<p:password id="pwdConf" value="#{passwordBean.newPwConfirmation}"
feedback="true" required="true"
validatorMessage="invalid password"
requiredMessage="Value required">
<f:validateRegex pattern="[A-Za-z0-9]{8,60}" />
</p:password>
</h:panelGrid>
</p:panel>
<p:separator></p:separator>
<p:commandButton value="Save" update="matchGrid"
process="#this" ajax="true"
actionListener="#{passwordBean.changePw}"
styleClass="ui-confirmdialog-yes"
oncomplete="changePw.hide();"
icon="ui-icon-check" />
<p:commandButton value="Cancel" process="#this"
onclick="changePw.hide();" styleClass="ui-confirmdialog-no"
icon="ui-icon-close" />
</p:dialog>
...
Thank for any suggestion !
If you use a 'appendTo="#(body)"', you need a form IN the dialog as can be read in the PrimeFaces documentation. But make sure that it is in the original xhtml NOT nested!
In addition, the process="#this" on the buttons prevent the other inputs to be submitted (this also won't work outside the dialog, so you most likely did not have that there). So remove that as well
I try to add recaptcha in the Roo-generated xhtml:
<p:dialog id="createDialog" header="#{messages.label_create} Person" modal="true" widgetVar="createDialogWidget" dynamic="true" visible="#{personBean.createDialogVisible}" resizable="true" maximizable="true" showEffect="fade" hideEffect="explode">
<p:ajax event="close" update=":dataForm:data" listener="#{personBean.handleDialogClose}" />
<p:outputPanel id="createPanel">
<h:form id="createForm" enctype="multipart/form-data">
<h:panelGrid id="createPanelGrid" columns="3" binding="#{personBean.createPanelGrid}" styleClass="dialog" columnClasses="col1,col2,col3" />
<p:captcha id="createReCaptcha" theme="white"/>
<p:commandButton id="createSaveButton" value="#{messages.label_save}" action="#{personBean.persist}" update="createPanelGrid :growlForm:growl" />
<p:commandButton id="createCloseButton" value="#{messages.label_close}" onclick="createDialogWidget.hide()" type="button" />
</h:form>
</p:outputPanel>
</p:dialog>
And no recaptha is shown.... Where I am wrong?
Remove the dynamic="true" from your p:dialog