Question

I am trying to call a dialog box (p:dialog) from another dialog box. In my page, on clicking on a link one dialog box opens, this dialog box has two sections, one for login and another for sign up. Currently the structure of my page looks like this.

<h:form>
    <h:outputLink value="javascript:void(0)" onclick="dlg.show()" title="Login" />
</h:form>

<p:dialog id="dialog" header="Login" widgetVar="dlg" appendToBody="true" modal="true" width="750">
    <h:form id="loginForm">
        ...
    </h:form>

    <h:form id="signupForm">
        ...
        <p:commandButton id="submitButton" value="SignUp" 
            onstart="statusDialog.show();" 
            action="# {signupBean.doSignup}" 
            update="growl" 
            oncomplete="statusDialog.hide();dlg.hide();welcome.show();"/>
    </h:form>
</p:dialog>

<p:dialog header="Welcome" id="welcome" resizable="false" widgetVar="welcome" width="700" closable="false" modal ="true">

</p:dialog>

The problem I am facing is that whenever I hit submit and there are validation errors on page, the error messages are displayed and the new dialog box is shown. The new dialog box is supposed to be shown only on successfully completion of the form without any validation errors.

Where am I going wrong?

Answer 1

The validation result is in the oncomplete attribute of PrimeFaces components available by the JavaScript args.validationFailed variable which returns a boolean. Just make use of it.

oncomplete="if (!args.validationFailed) { statusDialog.hide(); dlg.hide(); welcome.show(); }"/>