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?

herry · Answer 1 · 2013-12-17T07:08:19.203

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:

enter image description here

I hope this answer help to you find solution!

I think you meant `onstart` instead of `oncomplete` (result is same). It doesn't work -- dialog is shown with no text and icon (because it is run not via p:confirm) and in the background behind the dialog it can be seen that editing has been finished already. So, this dialog doesn't block the rowEdit event. — Oleg Efimov, Dec 15 '13 at 17:04
So you want to adjust dynamically text of confirmDialog. I will update my answer. Please check it! — herry, Dec 15 '13 at 19:36
The most critical problem is that row editing isn't blocked by the dialog -- on the part of the screen not obscurred by it I can see that editing has been finished (controls V and X disappeared, and pencil appeared back). — Oleg Efimov, Dec 16 '13 at 13:17
Yes are you right. I think you are want to merge p:dataTable with p:confirmDialog. I will edit my answer. — herry, Dec 17 '13 at 06:54

show confirmDialog before rowEditor updates the model

1 Answers1

Server-side:

Client-side: