show confirmDialog before rowEditor updates the model

Question

I'm using PrimeFaces dataTable and rowEditor in pretty default way:

<p:dataTable id="payments-table" var="apayment" value="#{payment.payments}" editable="true">
    <p:ajax event="rowEdit" listener="#{payment.update}"/>

    ...

</p:dataTable>

I'd like a confirmation dialog to show itself on clicking to the 'check' button of rowEditor.

I know it's possible using JS confirm function (thanks to Show a confirm message before <p:rowEditor> updates the model on click of "OK" button):

<p:ajax event="rowEdit" listener="#{payment.update}" onstart="return confirm('Save changes?')"/>

But I would like the dialog to conform to the UI theme, confirmDialog component being the best candidate. Alas, I don't know how to use it here. I tried the following and it won't work (simply no confirmation occurres):

<p:ajax event="rowEdit" listener="#{payment.update}">
    <p:confirm header="Remove payment" message="Remove payment?" icon="ui-icon-trash"/>
</p:ajax>
....
<p:confirmDialog global="true">
    <h:form id="form-payment-confirm">
        <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"/>
    </h:form>
</p:confirmDialog>

Any ideas?

Answer 1

I think you can use in this case simple widgetVar and call show() or hide() functions. Here is your modified code:

<p:ajax event="rowEdit" listener="#{tableBean.onRowEdit}" oncomplete="myDialog.show()"/>

I use PF 3.5 and can't find global parameter in p:confirmDialog. May be it is new feature. So I simple deleted it of my code. Here is modified confirmDialog:

<p:confirmDialog widgetVar="myDialog" closeOnEscape="true" appendToBody="true" closable="true">
                <h:form id="form-payment-confirm">
                    <p:commandButton value="Yes" type="button" update="@form" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
                    <p:commandButton value="No" type="button" onclick="myDialog.hide()" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
                </h:form>
            </p:confirmDialog>

Please try and adjust this confirm dialog code! May be unnecessary code for update form or hide()...

---

EDIT:

If you want to dynamically adjust text message of confirmDialog, you can adjust from server-side. Perhaps it is not best solution. I think the second way is it adjust from client-side by JQuery.

Server-side:

The ajax event is same. It call onRowEdit listener which adjust simple String attribute. For example the bean containt:

String myDialogMessage = "Default message";
//getter and setter

 public void onRowEdit(RowEditEvent event) {
        myDialogMessage="Are you sure?";
    }

and the dialog containt message property:

<p:confirmDialog widgetVar="myDialog" closeOnEscape="true" appendToBody="true" closable="true" message="{tableBean.myDialogMessage}"> 

Client-side:

You can use repleaceWith function of JQuery:

<script>
  jQuery("myDialog.p").replaceWith(....
</script>

Of course need to develop more business logic to client-side, more functions. Maybe the server-side solution is faster.

Please try it!

---

Based on your comment, I edited:

I find this in 4.0 user' guide:

When pencil icon is clicked, row is displayed in editable mode meaning input facets are displayed and output facets are hidden. Clicking tick icon only saves that particular row and cancel icon reverts the changes, both options are implemented with ajax interaction. Another option for incell editing is cell editing, in this mode a cell switches to edit mode when it is clicked, losing focus triggers an ajax event to save the change value.

So ajax event works when row is change. Here is dataTable events which can you catch:

I hope this answer help to you find solution!