closing a modalpanel programmatically

[shino]

Hi there,
I wanted to ask if someone knows a way to close a modalpanel programmatically.
I would like to use a commandbuttons action attribute to call a method of a bean which in turn closes the modalpanel. The reason I want to use a method of bean is, that I want to check for validation errors first. If there are none, the mp can be closed, otherwise it will just be rerendered.
Is there a way to do this?

Thanks in advance
Chris

[ilya_shaikovsky]

oncomplete="if #{facesContext.maximumSeveruty==null} ...hide();"

[shino]

Hi ilya,
thanks for your help. My complete and working statement now looks like this:

<a4j:commandButton
 id="ADDRESSBOOK_PORTLET_NEWADDRESSFORM_SUBMIT_A4J" type="submit"
 value="#{msgs.saveNewAddress}"
 action="#{newAddressFormBacking.submit}"
 reRender="#{param_ReRender},#{param_ERROR_ID}"
 oncomplete="if (#{facesContext.maximumSeverity==null}) Richfaces.hideModalPanel('#{param_MP_ID}');">
 </a4j:commandButton>

Unfortunately the solution of this problem only lead to the next.
When I enter incorrect data in my form and press the a4j:commandbutton shown above, the error messages are displayed, so far so good. When I close the modalpanel at this point by using my control facet it will still hold the incorrect data that caused the validation error the next time the modalpanel is called.

I debugged the application and had a look at my backing bean. As expected (and wanted) a new instance without any data -safe for the initial values- is created when I press the button that brings up the modalpanel. Still the old and invalid data shows up in the modalpanel and I can't make out where it comes from.
If the form data was valid and the submit button is clicked, the input fields are cleared the next time the modalpanel is called.
If the control facet is used to close the modalpanel before a submit button was clicked the fields are cleared too.
The values persist only if validation fails and the user exits the modalpanel by using the control facets close-button.

Here's some code:

<a4j:commandButton
 id="ADDRESSBOOK_PORTLET_NEWADDRESS_BUTTON_A4J"
 value="#{msgs.addNewAddress}"
 action="#{addressbookController.createNewAddress}"
 oncomplete="#{rich:component('ADDRESSBOOK_PORTLET_NEWADDRESS_MP')}.show()"
 reRender="ADDRESSBOOK_PORTLET_NEWADDRESS_MP"
 type="button"
 style="width:50%;">
 </a4j:commandButton>

This is the command button, that brings up the modalpanel.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">

 <rich:modalPanel id="#{param_ID}" class="#{param_StyleClass}" autosized="true" >
 <!-- JS -->
 <ui:insert name="customJS"/>

 <!-- FACETS -->
 <f:facet name="header">
 <h:outputText value="#{param_Header}" />
 </f:facet>
 <f:facet name="controls">
 <h:graphicImage id="#{param_ID}HL" value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('#{param_ID}').hide()"/>
 </f:facet>
 <ui:insert name="customFacets"/>

 <!-- CONTENT -->
 <ui:insert name="mpContent"/>
 </rich:modalPanel>
</ui:composition>

The modalpanel template.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">

 <!-- Modal panel -->
 <ui:decorate template="templates/ModalPanel.xhtml">
 <ui:param name="param_Header" value="#{msgs.addNewAddress}" />
 <ui:param name="param_StyleClass" value="addressForm_MP" />
 <ui:param name="param_ID" value="#{param_MP_ID}"/>


 <!-- Content-Area -->
 <ui:define name="mpContent">
 <!-- Address form -->
 <ui:decorate template="templates/AddressForm.xhtml">
 <ui:param name="param_AddressObject"
 value="#{newAddressFormBacking.address}" />
 <ui:param name="param_ErrorMsgs_PLC_ID"
 value="#{param_ERROR_ID}" />
 <ui:param name="param_Form_PLC_ID"
 value="#{param_FORM_ID}" />
 <ui:define name="formSubmission">
 <a4j:commandButton
 id="ADDRESSBOOK_PORTLET_NEWADDRESSFORM_SUBMIT_A4J" type="submit"
 value="#{msgs.saveNewAddress}"
 action="#{newAddressFormBacking.submit}"
 reRender="#{param_ReRender},#{param_ERROR_ID}"
 oncomplete="if (#{facesContext.maximumSeverity==null}) Richfaces.hideModalPanel('#{param_MP_ID}');">
 <f:setPropertyActionListener
 value="#{param_FORM_ID}"
 target="#{compDescHandler.formName}" />
 </a4j:commandButton>
 <a4j:commandButton
 id="ADDRESSBOOK_PORTLET_NEWADDRESSFORM_RESET_A4J" type="reset"
 value="#{msgs.resetForm}" immediate="true" />
 </ui:define>
 </ui:decorate>
 <!-- Address form -->
 </ui:define>
 <!-- Content-Area -->
 </ui:decorate>
 <!-- Modal panel -->
</ui:composition>

The implemented modalpanel.
There are three more templates involved but they just provide a common layout and the actual addressForm which is really just that: a form. If required I will post them later.

Can you help me to find out whats the cause of this problem?

Best regards,

Chris

[ilya_shaikovsky]

working sample could be found at richfaces-demo. sources could be downloaded from the repository.

http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?tab=editDataTable