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>
Related
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>
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>
Iam using primefaces 4.0 .I want to use dialog box . When i used it its printing the dialog content in the same page on load itself .Dialog box not opening
<h:panelGrid columns="1" cellpadding="5">
<p:commandButton id="basic" value="Basic" onclick="dlg.show()" type="button" />
</h:panelGrid>
<p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
also tried
in facesconfig.xml
org.primefaces.application.DialogActionListener
org.primefaces.application.DialogNavigationHandler
org.primefaces.application.DialogViewHandler
Thanks in advance
I missed adding
h:head
Thanks all for your response
I use the dynamic overlayPanel of primefaces inside one p:tab inside one p:dialog like this :
<p:dialog id="dialog" modal="true" header="Nouveau Article"
widgetVar="dlg">
<h:form prependId="false" enctype="multipart/form-data">
<p:tabView id="monpanel">
<p:tab id="tab1" title="Informations">
....
</p:tab>
<p:tab id="tab2" title="Prix">
....
</p:tab>
<p:tab id="tab3" title="Stock et fournisseurs">
<h:outputLabel value="" /><h:outputLabel value="" /><h:outputLabel value="" />
<p:commandButton id="carBtn" value="Selectionner Fournisseurs" type="button" />
<p:overlayPanel appendToBody="true" my="left top" id="carPanel" for="carBtn" hideEffect="fade"
dynamic="true">
<p:dataTable id="table" var="car" rowKey="#{car.fournisseurId}"
value="#{articlesMB.listfournisseurs}" selection="#{articlesMB.selectedFournisseurs}"
rows="10" paginator="true" >
<p:column selectionMode="multiple" style="width:20px" />
<p:column headerText="Id">
<h:outputText value="#{car.fournisseurId}" />
</p:column>
<p:column headerText="Nom">
<h:outputText value="#{car.personne.nom}" />
</p:column>
</p:dataTable>
</p:overlayPanel>
</p:tab>
</p:tabView>
<p:commandButton id="article-ajouter"
update=":messages monpanel :articlesdata"
action="#{articlesMB.ajouter}" value="add" />
</h:form>
</p:dialog>
in the first time it works fine, but when I click on the add button and the validation failed (for any cause) and I click on dynamic button of overlaypanel, it appears but when I check or uncheck one of rows of datatable it disappear, I don't know the cause
do you have any idea how to resolve this problem
You cammandButton should use 'process' attribute, you specify component to submit info(not specify overlay).
For ex:
<p:inputText id="txttest" required="true" value="" />
<p:commandButton process="txttest" id="article-ajouter"
update=":messages monpanel :articlesdata"
action="#{articlesMB.ajouter}" value="add" />
The reason your overlay panel only works once is because you update the panel that holds the command button that overlayPanel is attached to.
It is a bug in overlayPanel emerged after PF 5. You can fix this without resorting process attribute, I think solutions like this reduces the readability of the code.
If you define a widgetVar to overlayPanel, say 'carPanelWDG', and call PF('carPanelWDG').loadContents() function in the onComplete event of the command button everything just works. And even if there is no comment explaining the reason why you did such a thing, anyone can interpret this easily.