Prevent p:dialog close using h:commandButton

Question

I have a problem with p:dialog. I am using it as a part of my JSF 2.2 application:

<p:dialog id="cpaDialog" width="300px" widgetVar="changePasswordAdmin" header="#{msg['account.password.change']}" draggable="false" resizable="false">
    <h:form id="changePasswordAdminForm">
        <h:commandButton immediate="true" value="#{msg['cancel']}" onclick="PF('changePasswordAdmin').hide();"/>
        <p:commandButton id="submitCpa" update="changePasswordAdminForm" value="#{msg['submit']}" action="#{accountEditBean.changeAdminPassword()}" oncomplete="if (args &amp;&amp; !args.validationFailed) changePasswordAdmin.hide()"/>

        <!-- THERE ARE REQUIRED FIELD -->

    </h:form>
</p:dialog>

Currently I am using p:commandButton to submit my form and close the dialog if validation passes with success. The problem is I would like to use h:commandButton there. You'll probably ask why. Case is simple. I need this button to look like a standard h:commandButton without any Primefaces style classes applied.

Probably you'll tell me: 'remove all the styleclasses from the primefaces button'. I know it's possible (but not so effective) I would prefer to use h:commandButton here if it's possible.

I tried this:

<h:commandButton id="submitCpa" value="#{msg['submit']}" action="#{accountEditBean.changeAdminPassword()}" >
    <f:ajax onevent="if (args &amp;&amp; !args.validationFailed) changePasswordAdmin.hide()"/>
</h:commandButton>

My problem with using this non-primefaces button is that it closes the dialog each time I press it, not depending on validation success.

Does anyone know how to use h:commandButton in this specific case?

Daniel Teleginski Camargo Daniel Teleginski Camargo · Accepted Answer · 2014-02-03T15:51:00

The problem occurs because of a Uncaught Reference Error: args is not defined. That error is responsible for making the dialog close.

My suggestion here is that you delegate the dialog close action to a Managed Bean using something like:

org.primefaces.context.RequestContext context = RequestContext.getCurrentInstance();
context.execute("changePasswordAdmin.hide()");

And your button can be rendered like this:

<h:commandButton id="submitCpa" value="#{msg['submit']}"  >
    <f:ajax listener="#{accountEditBean.changeAdminPassword()}" execute="changePasswordAdminForm" render="changePasswordAdminForm" />
</h:commandButton>

Prevent p:dialog close using h:commandButton

1 Answers