How to display dialog only on complete of a successful form submit

13
votes

I have a form with 2 required input fields and a command button which shows a dialog:

<p:commandButton id="showDialogButton" value="Enregistrer" 
    action="#{DEQbean.Ajouter()}" update="@form"
    oncomplete="dialogaboutDEQ.show()" />

<p:dialog id="reamrquesDEQ" widgetVar="dialogaboutDEQ" header="Informations"
    width="400" closable="false" resizable="false" showEffect="clip"
    hideEffect="clip" modal="true" appendToBody="true">

    <p:messages id="messages" showDetail="true" autoUpdate="true"/>
    <p:commandButton value="OK" action="DEQlist" />    
</p:dialog>

I would like to show the dialog only when the validation has passed and the action method is executed. However, when the required input fields are empty and the action method is thus not executed, the dialog is still shown.

How do I display the dialog only on complete of a successful form submit?

1
validationjsfprimefacesdialog
Firstly: Rework your question. It is hard to decipher what you are asking for. You will definitively get more attention if your format everything nicely and try to be as clear as possible. However, if I interpreted your question right the answers to this question might help. – Jens
@Jens: question was already edited 10 minutes before your comment. – BalusC
Sorry, I did not notice that. I started editing the question myself but gave it up when I realized it is not only some English shortcomings. Then I wrote my comment. How do you decide to edit the question yourself and when to ask the OP to do this? I am sure Adriano could have done better than that. And looking at your edit it was not only some "cleanup" of bad english. Where is Adrianos motivation to strive to do better on the next question? – Jens

1 Answers

23
votes

The PrimeFaces ajax response puts an args object in the JS scope which has a validationFailed property. You could just check for that in the oncomplete.

<p:commandButton ... oncomplete="if (args &amp;&amp; !args.validationFailed) dialogaboutDEQ.show()" />

If you're performing validation in action method instead of in a normal validator, and you can't rework that, then you need to manually call FacesContext#validationFailed().

See also:

A different alternative is to use RequestContext#execute() inside action method to programmatically instruct PrimeFaces to execute the given piece of JS code. So, instead of the oncomplete, you could also do this in action method:

RequestContext.getCurrentInstance().execute("dialogaboutDEQ.show()");

If the validation fails, then the action method is not invoked and then this would also not be executed.

See also:

Again a different alternative is to use the dialog's visible attribute. Your command button is apparently updating the whole form including the dialog (even though the dialog is at its own badly declared with appendToBody="true" which would cause it to not be inside the parent form anymore; i.e. it must have appendToBody="false" or have its own form, but ala). You could check e.g. on FacesContext#isPostback() and FacesContext#isValidationFailed() if a successful postback is performed:

<p:dialog ... visible="#{facesContext.postback and not facesContext.validationFailed}">

See also: