34

I have a form inside a dialog which I close by clicking on commandbutton with ajax ,

like this

<h:commandButton value="Add" action="#{myBean.addSomething(false)}"
    id="add_something_id" >
    <f:ajax render="@form someTable" execute="@form"
        onevent="closeAddNewSomethingDialogIfSucceeded"></f:ajax>
</h:commandButton>

and here is the js code for closing the dialog

    function closeAddNewSomethingDialogIfSucceeded(data) {
        if(data.status === 'success') {
            $("#dialog_id").dialog("close");
        }
    }

No problems till here...

Now I changed some of the dialog form fields into required="true" and now I want to prevent the closing of the dialog of i got validation errors...

But the ajax data.status still reaches its success state , and I can't figure out what indication of validation failure I can hook on...

any ideas?

Thanks to BalusC answer I did the following:

in JSF , added :

    <h:panelGroup id="global_flag_validation_failed_render">
        <h:outputText id="global_flag_validation_failed" value="true" 
            rendered="#{facesContext.validationFailed}"/>
    </h:panelGroup>

the f:ajax was changed into

<f:ajax render="@form someTable global_flag_validation_failed_render"

and in js added the following check

if(data.status === 'success') {
    if($("#global_flag_validation_failed").length === 0){
         $("#dialog_id").dialog("close");
    }
}
Daniel
  • 36,833
  • 10
  • 119
  • 200

4 Answers4

62

Not specifically for required="true", but you can check by #{facesContext.validationFailed} if validation has failed in general. If you combine this with checking if the button in question is pressed by #{not empty param[buttonClientId]}, then you can put it together in the rendered attribute of the <h:outputScript> as follows:

<h:commandButton id="add_something_id" binding="#{add}" value="Add" action="#{myBean.addSomething(false)}">
    <f:ajax execute="@form" render="@form someTable" />
</h:commandButton>
<h:outputScript rendered="#{not empty param[add.clientId] and not facesContext.validationFailed}">
    $("#dialog_id").dialog("close");
</h:outputScript>

(note that you need to make sure that the script is also re-rendered by f:ajax)

A bit hacky, but it's not possible to handle it in the onevent function as the standard JSF implementation doesn't provide any information about the validation status in the ajax response.

If you happen to use RichFaces, then you could just use EL in the oncomplete attribute of the <a4j:xxx> command button/link. They are namely evaluated on a per-request basis instead of on a per-view basis as in standard JSF and PrimeFaces:

<a4j:commandButton ... oncomplete="if (#{!facesContext.validationFailed}) $('#dialog_id').dialog('close')" />

Or if you happen to use PrimeFaces, then you could take advantage of the fact that PrimeFaces extends the ajax response with an additional args.validationFailed attribute which is injected straight in the JavaScript scope of the oncomplete attribute:

<p:commandButton ... oncomplete="if (args &amp;&amp; !args.validationFailed) $('#dialog_id').dialog('close')" />

(note that &amp; is been used instead of &, because & is a special character in XML/XHTML)

Or you could use the PrimeFaces' RequestContext API in the bean's action method to programmatically execute JavaScript in the rendered view.

RequestContext.getCurrentInstance().execute("$('#dialog_id').dialog('close')");

No conditional checks are necessary as the bean's action method won't be invoked anyway when the validation has failed.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • 1
    Thank! eventually I used relied on the #{facesContext.validationFailed} (I wasn't aware of it) I used it in a render condition of simple outputext... and later on In the js code i checked for that outputtext existence using the jquery .length ... – Daniel Mar 11 '12 at 08:18
  • You're welcome. For an overview of implicit EL objects in JSF, see also [this](http://balusc.blogspot.com/2011/09/communication-in-jsf-20.html#ImplicitELObjects). – BalusC Mar 11 '12 at 12:33
  • 1
    @BalusC Does facesContext.validationFailed applies for conversion failures too ? Is it true if conversion is failed ? – Bren Oct 30 '13 at 22:32
  • @Bren Yes. According to the Java EE 6 FacesContext documentation, "validationFailed() Sets a flag which indicates that a conversion or validation error occurred while processing the inputs." (http://docs.oracle.com/javaee/6/api/javax/faces/context/FacesContext.html#validationFailed()) – Andrew Apr 19 '17 at 19:18
  • Note that you don't have to use &&... You can instead use "and"... – Andrew Apr 19 '17 at 19:20
  • @Andrew You're confusing JS with EL. – BalusC Apr 28 '17 at 09:18
  • @BalusC You are correct. I must have used EL in a different attribute. – Andrew Apr 28 '17 at 15:36
2

Two things 1) Checking for an error in the 'onevent' function

Surely you have a message tag for the mandatory field?

<h:message id="m-my-field-id" for="my-field-id" errorClass="error-class"/>

So you can check for the error-class something like

var message = $('#m-my-field-id');

if(message.hasClass('error-class'){
    //do this
}
else{
  //do that
}

2) The DOM isn't up to date on success

Yes, I can see the message on the page in Firefox, yet jQuery tells me it is not there.

I have found that using the smallest possible timeout is sufficient to fix this

setTimeout(
    function(){
    setErrorStyle(source.attr('id'));
    },
   1
);
Federico klez Culloca
  • 26,308
  • 17
  • 56
  • 95
Neil Stevens
  • 825
  • 1
  • 9
  • 11
2

I think you should take a look at PrimeFaces' RequestContext. This would help you trigger client-side code on the server side.

Divyesh Kanzariya
  • 3,629
  • 3
  • 43
  • 44
Mr.J4mes
  • 9,168
  • 9
  • 48
  • 90
0

@BalusC

in your example code the clientId of the button is not set as a param because it is a AJAX request. So

not empty param[add.clientId] is always false.

But this works:

param['javax.faces.source'] eq add.clientId

(tested with jsf-impl-2.2.12.redhat-1)

regards