I need your help in refreshing the Dialog content on commandButton click as it is keeping the old values by default and it is not refreshing. My Code is:
<h:form id="Requests">
<p:dataTable id="PendingRequests" var="hr" value="#{hrd.pendingRequests}">
<p:commandButton id="submitbutton" update=":Requests:#{hr.dialogueName} "
oncomplete="PF('#{hr.certificateDialogue}').show()">
<f:setPropertyActionListener value="#{hr}" target="#{hrd.selectedRequest}"/>
</p:commandButton>
</p:dataTable>
<p:dialog id="cert1" header="cert1" widgetVar="cert1" modal="true" showEffect="fade"
hideEffect="fade" resizable="true">
<p:outputPanel id="SS1" style="text-align:center;" autoUpdate="true">
</p:outputPanel>
</p:dialog>
<p:dialog id="cert2" header="cert2" widgetVar="cert2" modal="true" showEffect="fade"
hideEffect="fade" resizable="true">
<p:outputPanel id="SS2" style="text-align:center;" autoUpdate="true">
</p:outputPanel>
</p:dialog>
</h:form>
Related
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 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
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
I am trying to move a p:dialog out of a h:form, because I have read that this is the preferred way (however I'd like to understand the reason, because my p:dialog inside a form works well in my application).
The only difficulty is that the dialog title needs to be updated dynamically. The dialog is shown when a button in a p:dataTable is clicked.
Here is my old xhtml (before the changes), that's working fine:
<p:dataTable var="event" value="#{eventBean.lazyModel}" selection="#{eventBean.selectedEvent}" />
...
<p:column headerText="#{msgs.Persons}">
<p:commandButton value="#{msgs.ViewPersons}" update=":viewPersonsForm" oncomplete="viewPersonsDlg.show()">
<f:setPropertyActionListener value="#{event}" target="#{eventBean.selectedEvent}" />
</p:commandButton>
</p:column>
</p:dataTable>
<h:form id="viewPersonsForm">
<p:dialog modal="true" widgetVar="viewPersonsDlg" dynamic="true" header="#{eventBean.selectedEvent.name}" >
...
</p:dialog>
</h:form>
And here is the new xhtml, with eventBean#setSelectedEvent() that is not invoked.
<p:dataTable var="event" value="#{eventBean.lazyModel}" selection="#{eventBean.selectedEvent}" />
...
<p:column headerText="#{msgs.Persons}">
<p:commandButton value="#{msgs.ViewPersons}" update=":viewPersonsDlgId" oncomplete="jQuery('#viewPersonsDlgId .ui-dialog-title').text('#{eventBean.selectedEvent.name}');viewPersonsDlg.show()">
<f:setPropertyActionListener value="#{event}" target="#{eventBean.selectedEvent}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog modal="true" id="viewPersonsDlgId" widgetVar="viewPersonsDlg" dynamic="true" >
...
</p:dialog>
So, again, why in the second scenario eventBean#setSelectedEvent() is not invoked? And, if possible, why the first scenario is not optimal?
It is not restricted to use p:dialog inside a h:form since it can work in some cases, but most of the time you will find yourself struggling with some unexpected behaviour with that, here are some explanations :
Why not to place p:dialog inside h:form 1
Why not to place p:dialog inside h:form 2
The problem in your case is that jQuery method in oncomplete is called before the value is set with f:setPropertyActionListener. To avoid this use the same solution as you used in your first case. So :
<p:dataTable var="event" value="#{eventBean.lazyModel}" selection="#{eventBean.selectedEvent}" />
...
<p:column headerText="#{msgs.Persons}">
<p:commandButton value="#{msgs.ViewPersons}" update=":viewPersonsDlgId" oncomplete="viewPersonsDlg.show()">
<f:setPropertyActionListener value="#{event}" target="#{eventBean.selectedEvent}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog modal="true" id="viewPersonsDlgId" widgetVar="viewPersonsDlg" dynamic="true" header="#{eventBean.selectedEvent.name}" >
...
</p:dialog>
No need to use jQuery here.
I had the same problem (pf 3.5):
<p:tabView id="cashFlowTabContainer" style="width:100%" activeIndex="0"
widgetVar="cashFlowTabContainerVar">
<p:tab title="#{labels['cashflow_incoming']}">
<p:outputPanel id="incomingPanel">
<p:dataTable value="#{cashFlowController.incomingCashFlows}"
var="cashFlow">
<p:column headerText="#{labels.cashflow_actions}">
<p:commandButton value="Edit"
action="# {cashFlowController.editIncoming}" update="#form" oncomplete="editInputVar.show();">
<f:setPropertyActionListener value="#{cashFlow}"
target="#{cashFlowController.selectedIncoming}" />
</p:commandButton>
</p:column>
and this was my dialog:
<p:dialog id="editInput" header="Dynamic Dialog"
widgetVar="editInputVar" resizable="false" draggable="false"
modal="true">
<p:panel>
<h:panelGrid columns="2" cellpadding="5">
...
<h:outputText value="#{labels.cashflow_description}:" />
<h:inputText
value="#{cashFlowController.selectedIncoming.description}" />
So... This way the setter was NEVER called. Then I noticed that if I emptied the dialog the setter was called.
So I solved it by putting a "rendered" statement on the panel:
<p:dialog id="editInput" header="Dynamic Dialog"
widgetVar="editInputVar" resizable="false" draggable="false"
modal="true">
<p:panel **rendered="#{cashFlowController.selectedIncoming != null}"**>
<h:panelGrid columns="2" cellpadding="5">
I guess there's a null pointer that is not logged anywhere... anyway this way it works :)