I have a form with a datatable inside it . In one of the columns is a button to delete that row. That button has a primefaces confirm dialog attached to it.
<h:form id="form" style="text-align: -webkit-center">
<p:dataTable id="preferenceConfigs" var="preferenceConfig"
value="#{preferenceManagementBackingBean.preferenceConfigs}">
<p:column style="width:6rem; text-align: center">
<p:commandButton update=":form"
title="#{msgs['common.delete.userpreference.button']}"
icon="fa fa-trash"
action="#{preferenceManagementBackingBean.invalidatePreferenceConfig(preferenceConfig)}">
<p:confirm header="Confirmation" message="#{msgs['common.dialog.preference.config.warning']}"
icon="fa fa-exclamation-circle" escape="false"/>
</p:commandButton>
</p:dataTable>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" style="text-align-last: center">
<p:commandButton value="#{msgs['common.dialog.confirm.yes']}" type="button"
styleClass="ui-confirmdialog-yes" icon="fa fa-check"/>
<p:commandButton value="#{msgs['common.dialog.confirm.no']}" type="button"
styleClass="ui-confirmdialog-no" icon="fa fa-times"/>
</p:confirmDialog>
</h:form>
Everything works fine until I change the language on the page through a commandLink. They are located in a masterLayout file above this one:
<h:form id="generalSettingsForm">
<ul id="language">
<li><h:commandLink
action="#{languageSessionBean.changeLanguage('en')}" value="EN"
class="blgm_lSwitch" id="EN"/></li>
<li><h:commandLink
action="#{languageSessionBean.changeLanguage('nl')}" value="NL"
class="blgm_lSwitch" id="NL"/></li>
<li><h:commandLink
action="#{languageSessionBean.changeLanguage('fr')}" value="FR"
class="blgm_lSwitch" id="FR"/></li>
</ul>
</h:form>
public void changeLanguage(String language) {
locale = new Locale(language);
findCurrentFacesContext().getViewRoot().setLocale(locale);
}
This refreshes the page and displays the correct language. However pressing the remove button now automatically performs the action without any sign of the confirmation dialog. Only if I open another dialog (that is present in the JSF page) and return, will the confirmation shows its face again...
The dev console gives me the following error:
VM1391 components.js.xhtml:13 Uncaught TypeError: Cannot read property 'style' of undefined
at c.show (VM1391 components.js.xhtml:13)
at c.showMessage (VM1391 components.js.xhtml:13)
at Object.confirm (VM1391 components.js.xhtml:1)
at Object.confirm (VM1390 core.js.xhtml:1)
at HTMLButtonElement.onclick (preferenceManagement.xhtml:58)
Any insight?
Seems that confirmDialog doesn't play well with ajax updating.
Normally a language change means that all the parts of the page must be updated, so there is no benefit in using partial updating.
The easy way to solve it is to set ajax to false on your commandLinks:
<h:commandLink action="#{languageSessionBean.changeLanguage('fr')}"
value="FR" class="blgm_lSwitch" id="FR" ajax="false" />
After some more googling, it seems to be an issue with primefaces 6.2 with the following behaviour:
confirmDialog does not show, an error is logged on console (TypeError:
this.jqEl is undefined)
This was fixed in 6.2.2. I cannot test this myself since all minor releases are for paying users only. As a workaround, I'll try a custom dialog. You can probably also use primefaces 7.0
official github with reproducer
Could you try to put the p:confirmDialog out of the form? Something like this:
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" style="text-align-last: center">
<p:commandButton value="#{msgs['common.dialog.confirm.yes']}" type="button"
styleClass="ui-confirmdialog-yes" icon="fa fa-check"/>
<p:commandButton value="#{msgs['common.dialog.confirm.no']}" type="button"
styleClass="ui-confirmdialog-no" icon="fa fa-times"/>
</p:confirmDialog>
<h:form id="form" style="text-align: -webkit-center">
<p:dataTable id="preferenceConfigs" var="preferenceConfig"
value="#{preferenceManagementBackingBean.preferenceConfigs}">
<p:column style="width:6rem; text-align: center">
<p:commandButton update=":form" icon="fa fa-trash"
title="#{msgs['common.delete.userpreference.button']}"
action="#{preferenceManagementBackingBean.invalidatePreferenceConfig(preferenceConfig)}">
<p:confirm header="Confirmation" message="#{msgs['common.dialog.preference.config.warning']}"
icon="fa fa-exclamation-circle" escape="false"/>
</p:commandButton>
</p:dataTable>
</h:form>
Using the version primefaces 6.2 the same thing happened to me, then searching hard I found this solution that worked perfectly, I hope it helps someone, in the web xml add:
<context-param>
<param-name>primefaces.MOVE_SCRIPTS_TO_BOTTOM</param-name>
<param-value>true</param-value>
</context-param>
Related
I working with primefaces 6.2 on JavaEE 8 .
I have a basic dialog with a commandbutton created a modal over that .(Sory for bad english !)
I want to close modal without closing basic dialog .
How can fix this problem ?
<p:dialog header="Basic Dialog" id="user-management" widgetVar="user-management" width="700px" height="300px" resizable="false">
<p:toolbar>
<f:facet name="left">
<p:commandButton type="button" title="Add" icon="ui-icon-plus" onclick="PF('userDialog').show();"/>
</f:facet>
</p:toolbar>
<p:spacer/>
<p:dataTable value="#{userGroupBean.userSet}" var="user">
// Show user information
</p:dataTable>
</p:dialog>
<p:dialog header="User"
widgetVar="userDialog"
closeOnEscape="true"
resizable="true"
modal="true"
showEffect="fade"
hideEffect="fade"
height="auto"
width="auto">
<h:panelGrid columns="2">
// Some inputs ...
</h:panelGrid>
<p:spacer/>
<div class="dialog-footer">
<p:commandButton value="Save"
oncomplete="PF('userDialog').hide();"
process="#form"
update="user-management"
action="#{userGroupBean.save}"/>
</div>
</p:dialog>
The basic dialog is not 'closed' it is updated via update="user-management" and hence the html that is returned from the server is put in the html dom in with the dialog in the default state: closed. You have several options:
Don't update the dialog but update it's contents (my prefered solution) by adding e.g. a panel inside it and update that
Set a flag in a beanand use visible="#{mybean.dialogIsVisibleFlag}"
in the oncomplete of the ajax call do a PF('user-management').show()
I just upgraded to JSF 2.3 & Wildfly 14 (from 2.0 and 13) and primefaces 6.2.5.
I noticed a strange behavior when i use a command button. I have 2 forms and when a push the button of the first form, the input of the second form is validated and the error (in this case required errors) are displayed in a p:message :
<h:form id="form1" prependId="false">
<p:commandButton id="save" value="Save" actionListener="#{myBean.save()}" update="#form">
<f:actionListener binding="#{myBean.reloadResults()}" />
</p:commandButton>
<p:messages id="msgs" severity="error,warn" escape="false">
<p:autoUpdate />
</p:messages>
...
</h:form>
<p:dialog >
<h:form id="form2" >
<p:messages severity="error,warn" escape="false">
<p:autoUpdate />
</p:messages>
<div>
<p:calendar id="myDate" value="#{myBean.myDate}" required="true" />
</div>
...
</h:form>
</p:dialog>
I was expecting only the content of the first form to be processed and validated. This was the case with wildfly 13 and jsf 2.0.
Any idea?
You have not specified attribute process in your command button. Default value of this is #all which will validate all Forms.
Please use process="#form" to avoid validation and process of other form.
Updated code is as below:
<p:commandButton id="save" value="Save" actionListener="#{myBean.save()}" update="#form" process="#form">
<f:actionListener binding="#{myBean.reloadResults()}" />
</p:commandButton>
I have to apologize for not posting the entire code but it would have been to big. I found out what the problem was. It's related to this bug:
https://github.com/primefaces/primefaces/issues/4122
I have a panelgrid of 4 columns but with 10 elements in it.
The whole ajax communication was then broken. Fix is coming in PF 6.3
I am using confirm component of Primefaces 6.1. The problem is that I have several commandButton inside a dataGrid. When clicking on a commandButton, the confirmDialog is called but always with the first commandButton as the source.
Has anyone already encountered this issue ?
Many thanks.
Here is my xhtml code :
<p:dataGrid id="units" var="unit" value="#{programmeView.unites}" columns="3" layout="grid"
paginator="false" styleClass="dataGridUnits" rowIndexVar="unitIndex">
<p:panel styleClass="panelUnite">
<p:commandLink value="#{unit.nom}" action="#{uniteView.loadPage(unit.id)}" ajax="false" />
<p:commandButton id="deleteUnitBtn" styleClass="deleteButton" icon="fa fa-close"
actionListener="#{programmeView.deleteUnite(unit)}" update="units">
<p:confirm header="#{props.deleteUnit}" message="#{props.deleteUnitConfirmMsg}" icon="fa fa-warning"
disabled="#{unit.systemes.isEmpty()}" />
</p:commandButton>
<p:tooltip for="deleteUnitBtn" value="#{props.deleteUnit}" position="top"/>
</p:panel>
</p:dataGrid>
I have a primefaces datascroller containing list of accordionPanels in it. I am using 'loader' facet for lazy loading. On clicking more the next chunk of data is listed. The problem is, if I click a commandButton inside the accordion tab, the 'loader' facet stops working. This is my code:
<p:dataScroller layout="block"
value="#{bean.mainList}" var="manvo" chunkSize="3" lazy="true">
<f:facet name="loader">
<p:commandButton type="button" value="More" process="#this" />
</f:facet>
<p:accordionPanel activeIndex="1" dynamic="true" scrollHeight="auto">
<p:tab title="#{manvo.releaseName} >> #{manvo.tcName}">
<p:commandButton value="TestIt" actionListener="#{bean.testSubmit()}" update="#form"/>
</p:tab>
</p:accordionPanel>
I'm trying to call a confirmation dialog on a p:menuitem:
<p:menuitem value="#{text['button.archive']}" actionListener="#{tasksbacking.archive}" icon="ui-icon-locked">
<p:confirm header="#{text['button.archive.confirm.header']}"
message="#{text['button.archive.confirm.message']}"
icon="ui-icon-alert"/>
</p:menuitem>
but according to the documentation in Primefaces 5:
At the moment p:confirm is supported by p:commandButton and p:commandLink
Is there any way to do this?
I have found better workaround here.
In two words - include commandlink into menuitem like this:
....
<p:menuitem>
<p:commandLink>
<p:confirm>
</p:confirm>
</p:commandLink>
</p:menuitem>
....
And you can use global confirmation with this setup. It tested with PF 5.1. Also, it looks like soon it will be implemented in PrimeFaces.
I've come up with this question today. After a bit of try and error, and respecting the information out of the already posted links in the comments, if tried to do the following, and unexpectedly, this works for me. I'm on PF 5.3
<p:menuitem value="Löschen"
actionListener="#{importerDefinitionView.deleteSelectedFile()}"
update="messages">
<p:confirm header="Datei Löschen"
message="Soll die Datei wirklich gelöscht werden?"
icon="ui-icon-alert" />
</p:menuitem>
The relating confirm-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>