1 Reply Latest reply on Oct 21, 2008 5:47 PM by Nick Belaevski

    Can't make a4j:support work in rich:tabPanel!

    Thai Dang Vu Apprentice

      I even wrote a cannot-be-smaller web app which uses a tabPanel and a4j:support with ontabchange event and the action of that a4j:support seems not to be called!

      web.xml

      <?xml version="1.0" encoding="UTF-8"?>
      <web-app xmlns="http://java.sun.com/xml/ns/javaee"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
       version="2.5">
       <context-param>
       <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
       <param-value>.xhtml</param-value>
       </context-param>
      
       <context-param>
       <param-name>com.sun.faces.validateXml</param-name>
       <param-value>true</param-value>
       </context-param>
      
       <context-param>
       <param-name>com.sun.faces.verifyObjects</param-name>
       <param-value>false</param-value>
       </context-param>
      
       <servlet>
       <servlet-name>Faces Servlet</servlet-name>
       <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
       <load-on-startup>1</load-on-startup>
       </servlet>
      
       <servlet-mapping>
       <servlet-name>Faces Servlet</servlet-name>
       <url-pattern>*.faces</url-pattern>
       </servlet-mapping>
      
       <context-param>
       <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>
       <param-value>com.sun.facelets.FaceletViewHandler</param-value>
       </context-param>
      
       <context-param>
       <param-name>org.ajax4jsf.SKIN</param-name>
       <param-value>blueSky</param-value>
       </context-param>
      
       <context-param>
       <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
       <param-value>server</param-value>
       </context-param>
      
       <context-param>
       <param-name>facelets.SKIP_COMMENTS</param-name>
       <param-value>true</param-value>
       </context-param>
      
       <filter>
       <display-name>RichFaces Filter</display-name>
       <filter-name>richfaces</filter-name>
       <filter-class>org.ajax4jsf.Filter</filter-class>
       </filter>
      
       <filter-mapping>
       <filter-name>richfaces</filter-name>
       <servlet-name>Faces Servlet</servlet-name>
       <dispatcher>REQUEST</dispatcher>
       <dispatcher>FORWARD</dispatcher>
       <dispatcher>INCLUDE</dispatcher>
       </filter-mapping>
      
       <listener>
       <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
       </listener>
      
      </web-app>
      

      faces-config.xml
      <?xml version='1.0' encoding='UTF-8'?>
      <faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
       version="1.2">
       <managed-bean>
       <managed-bean-name>index</managed-bean-name>
       <managed-bean-class>model.Index</managed-bean-class>
       <managed-bean-scope>session</managed-bean-scope>
       </managed-bean>
      </faces-config>

      Index.java
      package model;
      
      import org.richfaces.component.html.HtmlTabPanel;
      import org.richfaces.component.html.HtmlTab;
      
      public class Index {
       private HtmlTabPanel tabPanel;
       private HtmlTab tab1;
       private HtmlTab tab2;
       private HtmlTab tab3;
      
       public void changeTab() {
       System.out.println("Tab changed.");
       }
      
       public HtmlTabPanel getTabPanel() {
       return tabPanel;
       }
      
       public void setTabPanel(HtmlTabPanel tabPanel) {
       this.tabPanel = tabPanel;
       }
      
       public HtmlTab getTab1() {
       return tab1;
       }
      
       public void setTab1(HtmlTab tab1) {
       this.tab1 = tab1;
       }
      
       public HtmlTab getTab2() {
       return tab2;
       }
      
       public void setTab2(HtmlTab tab2) {
       this.tab2 = tab2;
       }
      
       public HtmlTab getTab3() {
       return tab3;
       }
      
       public void setTab3(HtmlTab tab3) {
       this.tab3 = tab3;
       }
      }

      index.xhtml
      <?xml version="1.0" encoding="iso-8859-1"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html 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">
      <head><title>tab panel example</title></head>
      <body>
      <a4j:form>
       <rich:tabPanel switchType="ajax" binding="#{index.tabPanel}">
       <a4j:support event="ontabchange" onsubmit="alert('onsubmit');" action="#{index.changeTab}"
       oncomplete="alert('oncomplete');"/>
       <rich:tab id="tab1" binding="#{index.tab1}" name="tab1" label="Tab 1">
       <h:outputText value="This is tab 1." style="color: red;"/>
       </rich:tab>
       <rich:tab id="tab2" binding="#{index.tab2}" name="tab2" label="Tab 2">
       <h:outputText value="This is tab 2." style="color: green;"/>
       </rich:tab>
       <rich:tab id="tab3" binding="#{index.tab3}" name="tab3" label="Tab 3">
       <h:outputText value="This is tab 3." style="color: blue;"/>
       </rich:tab>
      
       </rich:tabPanel>
      </a4j:form>
      </body>
      </html>

      When I changed tab, I can see the 2 javascript alerts from the onsubmit and oncomplete, but the changeTab method was not called!

      Does anybody has any idea of what is wrong here?