Close Rich:modalPanel after save correctly

Question

I have a form with a button that opens a Rich:modalPanel with another form inside and two buttons at bottom; Close and Save.

Close: executes onclick="#{rich:component('mp')}.hide() and hides the modalPanel.
Save: validates the fields of the forms shows an error if is not complete, if the form is correct saves in db. reset the form but not close the Rich:modalPanel.

I want to close the Rich:modalPanel only if the form is ok and saves but i cant do it. I tried with:

Inserting Javascript:

<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}" onclick="#{rich:component('mp')}.hide()"/><br />

and

<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}" oncomplete="#{rich:component('mp')}.hide()"/><br />

Using only RichFaces:

<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}">
    <rich:componentControl for="mp" operation="hide" event="onclick" />
</a4j:commandButton><br />

and

<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}">
    <rich:componentControl for="mp" operation="hide" event="oncomplete" />
</a4j:commandButton><br />

But this codes always closes (or hide) the modalPanel, not only if the save is complete. Is it another way to close this modalPanel only if the save is ok?.

The Error popup is:

<a4j:outputPanel ajaxRendered="true">
    <h:messages id="error" styleClass="error"></h:messages>
</a4j:outputPanel> 

 <rich:modalPanel id="panel2" width="350" height="100" zindex="4000" showWhenRendered="${persona.hayErrores || persona.exito}">
    <f:facet name="header">
        <h:panelGroup>
            <h:outputText value="${msg.error}" rendered="#{persona.hayErrores}"></h:outputText>
            <h:outputText value="${msg.info}" rendered="#{persona.exito}"></h:outputText>
        </h:panelGroup>
    </f:facet>
    <f:facet name="controls">
        <h:panelGroup>
            <h:graphicImage value="/estilos/general/img/iconos/close.png" style="cursor:pointer" id="hidelink2"/>
            <rich:componentControl for="panel2" attachTo="hidelink2" operation="hide" event="onclick"/>
        </h:panelGroup>
    </f:facet>
     <a4j:outputPanel ajaxRendered="true">
        <h:outputText value="#{persona.listaErrores}" rendered="#{persona.hayErrores}" styleClass="error"/>
        <h:outputText value="#{msg.personaExito}" rendered="#{persona.exito}"/>
      </a4j:outputPanel>
</rich:modalPanel>

score 0 · Accepted Answer · answered Sep 08 '15 at 12:20

Solved:

Just adding another rich:componentControl with conditions in popup message showing validation.

// If its wrong, only closes this popup
<rich:componentControl for="panel2" attachTo="hidelink2" operation="hide" event="onclick" rendered="#{persona.hayErrores}" />
// If its ok, closes this popup and 'mp' modalPanel
<rich:componentControl for="panel2,mp" attachTo="hidelink2" operation="hide" event="onclick" rendered="#{persona.exito}" />

score 0 · Answer 2 · answered Sep 08 '15 at 18:40

You can use oncomplete attribute of a4j:commandButton, like

<a4j:commandButton action="#{persona.guardarAuxiliar}"
                    oncomplete="Richfaces.hideModalPanel('mp')"
                    value="#{msg.guardar}" reRender="personaForm" />

or with condition

oncomplete="if (#{!yourAction.hasErrors}) Richfaces.hideModalPanel('mp')"

Classical case with checking validation errors

oncomplete="if (#{facesContext.maximumSeverity == null}) {Richfaces.hideModalPanel('mp');}"

Close Rich:modalPanel after save correctly

2 Answers2