1 Reply Latest reply on Feb 17, 2011 6:20 AM by jolacitrouille

    AjaxValidator updating TabPanel style

    jolacitrouille Newbie

      Hi guys,

       

      I am facing a little problem using <rich:ajaxValidator/>.. Basically I have a couple of fields inside 2 tabs and some of these fields have an ajaxValidator associated to them which checks the Hibernate Validator constraints that I set. I used a <rich:message> to dispay the validation message and everything works fine. Now, I would like to change the corresponding tab color when a field doesn't pass the validation. To do so I used an actionListener on my <rich:ajaxValidator/> which goes through the components tree to the closest HtmlTab and set its style. Here is my code:

       

      /* JSF page */

      <h:panelGroup id="tabsContainer">

        <rich:tabPanel switchType="client">

       

          <rich:tab label="1">

            <h:inputText value="Name" id="nameField" >

              <rich:ajaxValidator event="onblur" reRender="tabsContainer" ajaxListener="#{myBean.ajaxValidatorListener}" />

            </h:inputText>

          </rich:tab>

       

          <rich:tab label="2">

          </rich:tab>

       

        </rich:tabPanel>

      </h:panelGroup>

       

      /* myBean */

      private static UIComponent getParentHtmlTab(UIComponent component) {

           if (component instanceof HtmlTab){

                return component;

                    }

       

                    UIComponent htmlTabComponent = null;

                    if (component.getParent() != null) {

                        htmlTabComponent = getParentHtmlTab(component.getParent());

                    }

       

                    return htmlTabComponent;

      }

       

      public void ajaxValidatorListener(AjaxEvent event) {

           FacesContext f = FacesContext.getCurrentInstance();

       

           Iterator<String> itClientIds = f.getClientIdsWithMessages();

           while (itClientIds.hasNext()) {

                                   UIComponent component = f.getViewRoot().findComponent(itClientIds.next());

                                   UIComponent htmlTab = getParentHtmlTab(component);

                                   if (htmlTab != null) {

                                       ((HtmlTab) htmlTab).setStyle("background-color: red;");

                                       return;

                                   }

           }

      }

       

      Unfortunately this doesn't work, because the reRender <rich:ajaxValidator/> doesn't seem to be processed.. However, if I add a <a4j:commandButton/> with a reRender on my tabsContainer, the <h:panelGroup/> is updated and becomes red.

       

      <a4j:commandButton value="ReRender" reRender="tabsContainer" />

       

      Does somebody see why my reRender isn't processed? Or has a solution to my general problem (change tab color when validation fails)?