Primefaces confirmDialog with EL variables and in modal Window - jsf

I have a strange problem with Primefaces' confirm Dialog.
What I need is a confirmation dialog that displays some variables im my Bean, working in a modal dialog window and firing a Bean method. But it seems I can't get the 3... :-(
Here is what I've been trying:
<p:confirmDialog header="Aviso de Confirmação"
closable="false"
appendToBody="true"
global="false"
showEffect="fade"
hideEffect="fade"
widgetVar="confirmDlg">
<h:form>
<f:facet name="message">
<h:outputText value="Confirma o registro de desistência do candidato(a) #{registrosCandidatoBean.candidatoInclusaoDesistencia.inscricao} - #{registrosCandidatoBean.candidatoInclusaoDesistencia.papelPessoa.pessoaFisica.nomeCompleto}?" />
</f:facet>
<p:commandButton value="Sim"
styleClass="ui-confirmdialog-yes"
icon="ui-icon-check"
action="#{registrosCandidatoBean.gravarDesistencia()}"
update=":formDesistencia :formMensagem:mensagemFixa"
ajax="false"
immediate="true" />
<p:commandButton value="Não"
styleClass="ui-confirmdialog-no"
icon="ui-icon-close"
onclick="confirmDlg.hide();" />
</h:form>
</p:confirmDialog>
*** This one displays the message and calls the method. But the "message" in f:facet is not displayed. Id I use the normal "message" attribute, It doesn't use the variables in my bean.
<p:confirmDialog header="Aviso de Confirmação"
closable="false"
appendToBody="true"
global="false"
showEffect="fade"
hideEffect="fade"
widgetVar="confirmDlg">
<f:facet name="message">
<h:outputText value="Confirma o registro de desistência do candidato(a) #{registrosCandidatoBean.candidatoInclusaoDesistencia.inscricao} - #{registrosCandidatoBean.candidatoInclusaoDesistencia.papelPessoa.pessoaFisica.nomeCompleto}?" />
</f:facet>
<p:commandButton value="Sim"
styleClass="ui-confirmdialog-yes"
icon="ui-icon-check"
action="#{registrosCandidatoBean.gravarDesistencia()}"
update=":formDesistencia :formMensagem:mensagemFixa"
ajax="false"
immediate="true" />
<p:commandButton value="Não"
styleClass="ui-confirmdialog-no"
icon="ui-icon-close"
onclick="confirmDlg.hide();" />
</p:confirmDialog>
*** This one displays the message and "message" in f:facet. But any Bean methods aren't called.
<p:confirmDialog header="Aviso de Confirmação"
closable="false"
global="false"
showEffect="fade"
hideEffect="fade"
widgetVar="confirmDlg">
<f:facet name="message">
<h:outputText value="Confirma o registro de desistência do candidato(a) #{registrosCandidatoBean.candidatoInclusaoDesistencia.inscricao} - #{registrosCandidatoBean.candidatoInclusaoDesistencia.papelPessoa.pessoaFisica.nomeCompleto}?" />
</f:facet>
<p:commandButton value="Sim"
styleClass="ui-confirmdialog-yes"
icon="ui-icon-check"
action="#{registrosCandidatoBean.gravarDesistencia()}"
update=":formDesistencia :formMensagem:mensagemFixa"
ajax="false"
immediate="true" />
<p:commandButton value="Não"
styleClass="ui-confirmdialog-no"
icon="ui-icon-close"
onclick="confirmDlg.hide();" />
</p:confirmDialog>
*** This one displays the message and "message" in f:facet. Apparently it calls the Bean methods, but I can't test it since the dialog is greyed and I can't click the buttons.
Can it work the way I need?
Primefaces 4.0
Thanks! :)

for the third scenario, try adding;
appendTo="#(body)"

Related

primefaces command button does not take action

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

p:selectManyMenu deselect confirmation

I try to get a confirmation dialog when i deselect an item from a mutli-select p:selectManyMenu.
<p:outputLabel for="ccs" value="CS" styleClass="toplabel"/>
<p:selectManyMenu id="ccs" value="#{ccView.selectedCSs}"
var="cs" filter="true" filterMatchMode="contains" showCheckbox="true">
<p:ajax event="change" listener="#{ccView.onCSChanged}" />
<f:selectItems value="#{ccView.CSs}" var="source" itemLabel="#{source.name}" itemValue="#{source}" />
<p:column>
<h:outputText value="#{cs.name}" />
</p:column>
</p:selectManyMenu>
now, if an item is deselected (checkbox change to unchecked) i want to show a confirmation dialog.
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
I tried it with ajax events like "unselect", "deselect", "rowUnselect"..
any idea?

p:dialog appears on bottom when p:blockUI targets it

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>

Simple pop-up after p:selectBooleanCheckbox?

I have several pages where I am using PrimeFaces checkbox in this way:
<p:column>
<f:facet name="header">
<p:selectBooleanCheckbox value="#{Bean.allChecked}">
<p:ajax process="#this" update=":form:table" listener="#{Bean.handleAllChecked}"/>
</p:selectBooleanCheckbox>
</f:facet>
...
</p:column>
I'd like to bring up an info pop-up dialog saying "This will select all items!" with only one "OK" button. How would I do that?
Have in mind that there are several pages with the same behaviour, and I'd like to avoid copy/pasting the same code over and over again if possible.
This can be achived by using primefaces commandButton and Confirmation dialog
in your xhtml file
<f:facet name="header">
<p:commandButton value="Select All" actionListener="#{testBean.handleAll}">
<p:confirm header="Select All" message="This will select all items?"
icon="ui-icon-alert" />
</p:commandButton>
</f:facet>
Add confirmation dialog code (you can create one file and just include in any xhtml )
<p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
<p:commandButton value="Yes" type="button"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="No" type="button"
styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
Managedbean
public void handleAll(ActionEvent event){
System.out.println("called only when selected yes");
}
The method handleAll will only be called if user clicks "Yes" otherwise it won't do anything.
I hope that help

JSF Primefaces row value null in Edit popup window

I am using JSF 2.0 with Primefaces 3.4.2
For some strange reason I am not able to get the value in popup dialog window when a command button of row in datatable is clicked. Not sure what am I doing wrong?
Any help is highly appreciable.
I have the following in JSF page
<p:dataTable id="dataTable" var="emp" lazy="true"
value="#{myMB.lazyModel}"
selection="#{myMB.selectedEmployee}"...>
<p:column>
<p:commandButton id="edit" update=":frmedit:editDlg" process="#this"
onmousedown="dlg.show()" icon="ui-icon-pencil"
title="Edit" >
<f:setPropertyActionListener value="#{emp}"
target="#{myMB.selectedEmployee}" />
</p:commandButton>
</p:column>
Dialog code
<h:form id="frmedit">
<p:dialog header="Employees" style="font-weight:bold"
widgetVar=Dialog" resizable="false" id="dlg"
showEffect="fade" hideEffect="fade" appendToBody="true"
modal="true" width="200" height="250">
<h:panelGrid columns="2" cellspacing="5">
<h:outputText value="Employee #" />
<h:outputText value="#{myMB.selectedEmployee.empNo}"
style="font-weight:bold" />
</h:panelGrid>
And finally in ManagedBean
#Named("myMB")
#ViewAccessScoped
private Employee selectedEmployee= new Employee();
with getters and setters
Update 1
<p:column>
<p:commandButton id="edit" update=":frmedit:display" process="#this"
title="View"
icon="ui-icon-pencil" style="border-width:0;background:none;"
onmousedown="Dialog.show()">
<f:setPropertyActionListener value="#{emp}"
target="#{myMB.selectedEmployee}" />
</p:commandButton>
</p:column>
<p:dialog header="Employees" style="font-weight:bold"
widgetVar=Dialog" resizable="false" id="dlg"
showEffect="fade" hideEffect="fade" appendToBody="true"
modal="true" width="200" height="250">
<h:form id="frmedit">
<h:panelGrid id="display" columns="2" cellspacing="5">
<h:outputText value="Employee #" />
<h:outputText value="#{myMB.selectedEmployee.empNo}"
style="font-weight:bold" />
</h:panelGrid>
</h:form>
</p:dialog>
The three main reasons why this would be the case are
The dialog was not actually ajax updated
The property listener didn't set the value. You could easily debug this by adding some logging to the setter for that property
The bean was actually recreated and the selectedEmployee property was re-initialized per your
line:
Employee selectedEmployee= new Employee();
Per your comments on the previous answer, you should not have widgetVar and id for the same dialog having the same value
My vote is on (3). You should verify that the bean is not actually being trashed and recreated (constructor or #PostConstructor logging).
Try widgetVar="dlg" instead, in <p:dialog...> , according to this Example you should call
dialog from its widgetVar attribute
so dlg.show() refers to widgetVar="dlg" not the id

Resources