It has been a very long time I wrote this code, but I thought I would share it with you as it is quite useful.

If like me, you are an adept of RichFaces, you might have already seen and used the modal panel functionality. By default, a modal panel is used to display a message, but what if you actually want to display a form within it? How nice would it be if, for example, you could put your login form in a modal panel instead of opening a new page?

With the following steps, you will be able to achieve this:

• First, get the maximum severity in the message queue:

  <a4j:outputPanel ajaxRendered="true">
      <h:form style="display:none" id="maximumSeverityForm">
          <h:inputHidden id="maximumSeverity"
              value="#{facesContext.maximumSeverity.ordinal}"/>
      </h:form>
  </a4j:outputPanel>
  

  This form has to be placed on all your pages using an include for example. This form will basically get refreshed on every postback and will contain the maximum severity in the message queue or null if the queue is empty.

• Create a JavaScript method which reads the maximumSeverity hidden field:

  function ajaxRequestContainsErrors() {
      return document.getElementById("maximumSeverityForm:maximumSeverity").value > 0;
  }
  

  This method has to also be included in all the pages.

• Finally, use the following code for the “Submit” button in your form:

  <a4j:commandButton action="#{userBean.loginAction}" value="Submit" oncomplete="if (!ajaxRequestContainsErrors()) {Richfaces.hideModalPanel('loginModalPanel');}"/>
  

  This button is actually checking if there is no error before closing the modal panel.