Question

I’ve a popup overlay page using JQuery. It has some fields and a submit button.
Upon submit, the values of the popup should be server-side-validated. If all the values are successful, the popup page should close.

What i did is to validate the fields using <f:ajax> then check if there are error messages in the backing bean using javascript. The javascript closes the popup if there are no error messages logged, and does nothing if errors are found.

Currently, what happens is that the popup closes before the listener is invoked.

Is there a way so that the ajax listener is invoked before the javascript onevent validation?

Here is the commandLink that calls the validation:

<h:commandLink id="submitButton" value="submit">
    <f:ajax execute="popupPage" 
         render="popUpDetails popupMessages"
         onevent="closePopupDialogIfNoErrors"
         listener="#{controller.saveAndValidatePageValues}" />
</h:commandLink>

And here is the jquery script used in the onevent event:

function closePopupDialogIfNoErrors(){
    if( #{backingBean.messages.size() == 0} ){
        $("#popupDialog").dialog('close');
    }
};

Answer 1

The function attached to the onevent attribute will actually be invoked three times. One time before the ajax request is been sent, one time after the ajax response is been arrived and one time when the ajax response is successfully processed. You should be checking the status property of the given data argument for that.

function onEventFunction(data) {
    var status = data.status; // Can be 'begin', 'complete' and 'success'.

    switch (status) {
        case 'begin': // On before the ajax request is sent.
            // ...
            break;

        case 'complete': // On after the ajax response is arrived.
            // ...
            break;

        case 'success': // On after the HTML DOM is updated (re-rendered).
            // ...
            break;
    }
}

However, in your particular case you seem to want evaluate EL in the JS function. This is not going to work that way. You’d basically need to re-render the whole JS function in order to re-evaluate the EL properly.

Your best bet is to put an inline script in one of the components referenced in the render attribute. E.g.

<h:panelGroup id="popupMessages">
    <script>if (#{empty bean.messages}) $("#popupDialog").dialog('close');</script>
    ...
</h:panelGroup>