Show confirmation dialog before deleting a p:dataTable entry - primefaces

I'm currently implementing a data table with a delete function in prime faces. Before deleting the user confirms his decision inside a dialog: if it's a "yes", then the "current" row (aka on which the user clicked the delete button) should be deleted. Currently the last row gets deleted irrespectable of on which row delete action has been triggered:
<p:dataTable var="var" value="#{bean.list}">
//some columns
//relevant column
<p:column id="id">
<p:commandButton id="deleteButton" onclick="PF('deleteDialog').show();" />
<p:confirmDialog id="deleteDialogId" widgetVar="deleteDialog" appendTo="#form">
<p:commandButton id="confirm" onclick="PF('deleteDialog').hide();"
actionListener="#{bean.deleteRowAction(var)}" />
<p:commandButton id="cancel" onclick="PF('deleteDialog').hide();" />
</p:confirmDialog>
</p:column>
</p:dataTable>
It seems like the actionListener of confirm button cannot access the current row by only getting var as an input. If I get rid of the dialog and trigger the action listener on deleteButton instead, everything works as expected:
// works, but no dialog
<p:dataTable var="var" value="#{bean.list}">
//some columns
//relevant column
<p:column id="id">
<p:commandButton id="deleteButton" actionListener="#{bean.deleteRowAction(var)}" />
</p:column>
</p:dataTable>
I have found How can I pass selected row to commandLink inside dataTable or ui:repeat? as well as JSF Delete entity on DataTable with p:dialog but unfortunately it didn't help.
Is there a way to somehow pass "the current" table entry onto an external button?

There is an easier way to do this, by using the p:confirmDialog. This allows you to simply add p:confirm to your p:commandButton and you're done:
<h:form>
<p:dataTable var="var" value="#{bean.list}">
<p:column id="id">
<p:commandButton id="deleteButton"
action="#{bean.deleteRowAction(var)}">
<p:confirm header="Confirmation"
message="Are you sure?"
icon="pi pi-exclamation-triangle" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:confirmDialog global="true">
<p:commandButton value="Yes" type="button"
styleClass="ui-confirmdialog-yes" icon="pi pi-check" />
<p:commandButton value="No" type="button"
styleClass="ui-confirmdialog-no" icon="pi pi-times" />
</p:confirmDialog>
</h:form>

I just use confirm right inside the column:
<p:dataTable var="item" ...
<p:column headerText="Item">
<p:commandButton action="#{myBean.deleteItem(item)}">
<p:confirm header="Confirmation" message="Delete item?" icon="ui-icon-alert"/>
</p:commandButton>
</p:column>

Related

BlockUI is not triggered when trigger is in a p:column

I am using buttons in a p:datatable and they are triggering a p:blockUI (PF 6.0)
When located in the footer of my datatable, the button does trigger the blockUI. When moved into a column, it does not trigger it
BlockUI
<p:blockUI block="blockPanel"
trigger="myForm:myTable:myButton myForm:myTable:myButton2">
Loading..<br />
<p:graphicImage name="images/loading_blue.svg" />
</p:blockUI>
Datatable
<p:panel id="blockPanel">
<h:form id="myForm">
<h:panelGrid columns="1" cellpadding="5">
<p:dataTable id="myTable" value="#{modelBean.myList}" var="entry">
<!-- Some data -->
<p:column headerText="Name">
<h:outputText value="#{entry.name}" />
</p:column>
<!-- Does not work -->
<p:column style="text-align: center">
<p:commandButton id="myButton" actionListener="#{bean.method()}" />
</p:column>
<!-- Works -->
<f:facet name="footer">
<p:commandButton id="myButton2" actionListener="#{bean.method()}" />
</f:facet>
</p:dataTable>
</h:panelGrid>
</h:form>
</p:panel>
Why ?
The following workaround did not work for me:
<p:commandLink ... onclick="bui.show()" oncomplete="bui.hide()">
...
<p:blockUI widgetVar="bui" />
As a workaround, I used pe:blockUI:
http://www.primefaces.org/showcase-ext/sections/blockui/blockPage.jsf
What I mean : You don't have any value in your datatable. Put it one, you can create a backingBean return one value and add property value=#{myBean.value}. Also you have data on you datatable ! Test it

Primefaces datatable required fields not work

I would create a check input information about specified in:
http://www.primefaces.org/showcase/ui/message/messages.xhtml
I create a dataTable with a lot required field (inputText with attribute required="true") and a p:message into datatable section.
Problem is when I click on button to save data: I don't see alert message in my page but starting execution of associated bean.
Why?
My code in .xhtml is this:
<h:form>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<p:dataTable var="myAtt"
value="#{myBean.attributes}"
rowIndexVar="myAttIndex">
<h:inputHidden value="#{myAtt.value}" rendered="#{myAtt.description == 'XXX'}" />
<p:column rendered="#{myAtt.description == 'XXX'}">
<h:outputText value="*" rendered="#{myAtt.required}" />
</p:column>
<p:column rendered="#{ myAtt.description == 'YYY'">
<p:fragment rendered="#{myAtt.description == 'ZZZ'">
<p:fragment rendered="#{myAtt.value == 'value1'}">
<p:inputText size="#{myAtt.maxLength}"
value="#{myAtt.value}"
rendered="#{myAtt.const == 't1'}"
required="true"
id="idText">
<p:ajax process="#this" event="change" update="#form"/>
</p:inputText>
<p:message for="idText"/>
</p:fragment>
</p:fragment>
</p:column>
</p:dataTable>
<br />
<p:commandButton value="Create" action="#{myBean.commit()}" process="#this" update=":MYPAGE"/>
Thanks.
You forgot to indicate an id for the h:form : <h:form id="myForm">
And in the update of the p:commandButton you have to indicate the id of the form : update=":MYPAGE :myForm"
EDIT
According to the PrimeFaces users guide 3.5, the attribute action will be called when the user clicks on the button.

PrimeFaces CommandButton is not working in Dialog

I need your help in solving the issue with the CommandButton in the dialog as I am calling a method called UpdatePrint() in the action and it is not called. The jsf page code is as follow:
<h:form id="Requests">
.
.
.
<p:commandButton update=":Requests:#{hr.dialogueName}" oncomplete="PF('#{hr.certificateDialogue}').show()" icon="ui-icon-search" title="View">
<f:setPropertyActionListener value="#{hr}" target="#{hrd.selectedRequest}"/>
</p:commandButton>
.
.
<p:dialog header="cert1" widgetVar="cert1" modal="true" showEffect="fade" hideEffect="fade" resizable="true">
<p:outputPanel id="HRCEEN" style="text-align:center;">
</p:outputPanel>
<p:commandButton value="Print" action="#{hrd.UpdatePrint}" type="button" icon="ui-icon-print" style="display:block;margin-bottom: 20px">
<p:printer target="HRCEEN"/>
</p:commandButton>
</p:dialog>
.
.
<p:dialog header="cert2" widgetVar="cert2" modal="true" showEffect="fade" hideEffect="fade" resizable="true">
<p:outputPanel id="HRSSEN" style="text-align:center;">
</p:outputPanel>
<p:commandButton value="Print" action="#{hrd.UpdatePrint}" type="button" icon="ui-icon-print" style="display:block;margin-bottom: 20px">
<p:printer target="HRSSEN"/>
</p:commandButton>
</p:dialog>
</h:form>
I tried different ways, but I wasn't successful with them as it showed me that the section in the update is not found when I am referring in the update.
<p:commandButton update=":Requests:#{hr.dialogueName}" oncomplete="PF('#{hr.certificateDialogue}').show()" icon="ui-icon-search" title="View">
<f:setPropertyActionListener value="#{hr}" target="#{hrd.selectedRequest}"/>
</p:commandButton>
The action method is not called because of the type="button" attribute - there is no submit to the server. Remove type, then the action will be triggered (the button will assume the default submit type).

How clean data in <p:overlayPanel ... when is opening or cloasing

<p:overlayPanel appendToBody="true"
id="panel_l#{level.name.hashCode()}
f{filterTypeConfiguration.filterType.name.hashCode()}"
for="conrolForm_l#{level.name.hashCode()}f
#{filterTypeConfiguration.filterType.name.hashCode()}:
button_l#{level.name.hashCode()}f
#{filterTypeConfiguration.filterType.name.hashCode()}"
dynamic="true" >
...
and in overlayPanel I have:
<p:inputText value="#{filterTypeConfiguration.textToSearch}">
<p:ajax id="ajaxFilterSearch" event="keyup" update="overlayForm_l
#{level.name.hashCode()} f#{filterTypeConfiguration.filterType.name.hashCode()}
:select_l#{level.name.hashCode()}
f#{filterTypeConfiguration.filterType.name.hashCode()}"
</p:inputText>
I need clean data in inputText when overlayPanel is opening or closing.
I didn't use p:overlayPanel yet but I am able to trigger p:dialog diaglodReturn event like, I think it should be similar like this
<p:ajax event="dialogReturn" update="#form" listener="#{backing.refreshPage}" />
Or
Example from primefaces showcase, How about add action attribute for button?
<p:commandButton id="imageBtn" value="Basic" type="button" action="#{backing.refresh}" />
<p:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
<p:graphicImage name="/demo/images/nature/nature1.jpg" width="300" />
</p:overlayPanel>

How to update value in p:dialog and display in the p:dialog

I have a datatable, and at the last column I will have an edit action, it will trigger the dialog box. However, I found the value in the dialog box is not updated. Can anybody to help on this?
My code as below. In fact the bean.currentItem.name and bean.currentItem.age should base on my selection from the table. I check the bean.currentItem is not null and is refer to my selection from preEdit method, but the value never show up in p:dialog.
<p:dataTable ....>
<p:column...
<p:column...
<p:column>
<f:facet name="header">
<h:outputLabel value="Update" />
</f:facet>
<p:remoteCommand name="preEdit" action="#{bean.preEdit}"
process="#this" update="#this #form:dlg">
<f:setPropertyActionListener target="#{bean.currentItem}"
value="#{thisItem}" />
</p:remoteCommand>
<p:commandLink styleClass="no-decor"
oncomplete="preEdit();PF('dlg').show();" value="Edit"/>
</p:column>
</p:dataTable>
<p:dialog header="#{lbl.tt_cat_upd}" widgetVar="dlg" id="dlg"
resizable="false" >
<h:outputLabel value="#{bean.currentItem.name}" />
<h:outputLabel value="#{bean.currentItem.age}" />
</p:dialog>
How about removing your p:remoteCommand and let your p:commandLink do all the work for you?
Assuming you have a h:form surrounding both your dataTable and your dialog
<p:commandLink action="#{bean.preEdit}" process="#this" update="dlg" styleClass="no-decor" oncomplete="PF('dlg').show()" value="Edit">
<f:setPropertyActionListener target="#{bean.currentItem}"
value="#{thisItem}" />
</p:commandLink>
If your dataTable is not in the same form with your dialog, you might replace update="dlg" by update=":formIdContainingDialog:dlg"