5 Replies Latest reply on May 3, 2011 12:05 PM by Stefano Barretta

    rich:tabPanel selectedTab via js-Richfaces-method

    nimo stephan Master

      I know, I can bind the selectedTab-Property via property:

       

      {code}rich:tabPanel id="myTabPanel" headerAlignment="right" switchType="ajax" selectedTab="#{bean.property}">
              
              <rich:tab id="myTab1">
                ...
               </rich:tab>
      
                <rich:tab id="myTab2">
                ...
               
      </rich:tab>
      
      </rich:tabPanel>{code}
      
      
      





      this works.


      However, I want to switch the tab via a javascript-like method in Richfaces.

      For example:


      {code}<rich:tabPanel id="myTabPanel" headerAlignment="right" 
      switchType="ajax" selectedTab="myTab1">
      
           <rich:tab id="myTab1">
      
                <aj4:commandLink onclick="Richfaces.selectTab('myTab2')" value="switch to myTab2"/>
              
            </rich:tab>
      
         <rich:tab id="myTab2">
      
                ...
      </rich:tab>
      </rich:tabPanel>
      {code}
      
      
      

       

      Is that possible? Where can I find the javascript-Richfaces.Methods for tabPanel ? Does something like

      Richfaces.selectTab('myTab2')

      exists?

        • 1. Re: rich:tabPanel selectedTab via js-Richfaces-method
          Ilya Shaikovsky Master

          in Tab Panel scripts there is

           

          RichFaces.switchTab = function(pane,tab,value)

           

          method.

           

          It's undocumented but safe to use now because branch in stabilization phase and api will not be changed.

          • 2. Re: rich:tabPanel selectedTab via js-Richfaces-method
            nimo stephan Master

            hello,

             

            thank you it works for client, when having switchType=client:

             

            {code}

            <a4j:commandLink onclick="RichFaces.switchTab('myTabPanel','to_tab', from_tab')" value="switch to" />.

            {code}

             

            How can I switch via switchType=ajax ?

             

            (by the way, I cannot find the "search button" for finding older threads - where is it?)

            • 3. Re: rich:tabPanel selectedTab via js-Richfaces-method
              Ilya Shaikovsky Master
              using ajax mode it would be easier I think to works with selectedTab attribute management.
              1 of 1 people found this helpful
              • 4. Re: rich:tabPanel selectedTab via js-Richfaces-method
                Stefano Barretta Newbie

                Hi,

                i've problem with the same context.

                 

                When I click the a4j:commandButton the property singleTab & selectedTab is setting

                but in my bean pc_Istanza the getter selectedTab is not call and the Tab not switch why?

                 

                this is istanza.xhtml

                [...]
                  <h:form id="istanzaForm" styleClass="form" enctype="multipart/form-data">
                                    <rich:tabPanel switchType="ajax" id="tabPanelIstanza" selectedTab="#{pc_Istanza.selectedTab}">
                                              <rich:tab id="#{label.tabIstanza}" label="Dati Istanza">
                        <a4j:include viewId="tabIstanza.xhtml" />
                                              </rich:tab>
                                              <rich:tab id="#{label.tabPianoAmmortamento}" label="Piano Ammortamento" disabled="#{istanzaBean.singleTab}">
                                                             <a4j:include viewId="tabPianoAmmortamento.xhtml" />
                                              </rich:tab>
                                    </rich:tabPanel>
                          </h:form>
                [...] 
                

                 

                this is tabIstanza.xhtml

                [...]

                //dataTable
                <a4j:commandButton type="submit" value="Salva" status="waitStatus" 
                                                        styleClass="commandExButton" id="buttonSalva" action="nextTab">
                                                             <a4j:actionparam id="paramSingleTab" value="false" assignTo="#{istanzaBean.singleTab}" />
                       <a4j:actionparam id="paramSelectedTab" value="#{label.tabPianoAmmortamento}" assignTo="#{pc_Istanza.selectedTab}" />
                                              </a4j:commandButton>
                [...]
                

                 

                this is faces-config.xml

                [...]

                <navigation-rule> 
                                       <from-view-id>/tabIstanza.xhtml</from-view-id> 
                              <navigation-case> 
                                          <from-outcome>nextTab</from-outcome> 
                                          <to-view-id>/tabPianoAmmortamento.xhtml</to-view-id> 
                              </navigation-case> 
                           </navigation-rule>
                [...]
                

                 

                this is Istanza.java alias pc_Istanza

                [...]

                public class Istanza extends PageCodeBase {
                          private String selectedTab;
                
                 public void setSelectedTab(String selectedTab) {
                                    this.selectedTab = selectedTab;
                          }
                
                 public String getSelectedTab() {
                                    return selectedTab;
                          }
                }
                [...]
                

                 

                I used RichFaces 3.1.6GA and jsf 1.1 on websphere application server 6.1

                • 5. Re: rich:tabPanel selectedTab via js-Richfaces-method
                  Stefano Barretta Newbie

                  Ok I found the solution

                  in my a4j:commandButton i just add the tag reRender="tabPanelIstanza"  and now works!!!

                  Thanks to me :-)