CODEWITHSUNDEEP
formsrichfacesjsf-1.2richfaces-modal
S. Moreno
S. Moreno

Reputation: 536

Close Rich:modalPanel after save correctly

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

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>

Upvotes: 0

Views: 878

Answers (2)

Vasil Lukach
Vasil Lukach

Reputation: 3748

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');}"

Upvotes: 0

S. Moreno
S. Moreno

Reputation: 536

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}" />

Upvotes: 0

Related Questions