7 Replies Latest reply on Sep 24, 2012 2:32 PM by Dave seenam

    rich:tabPanel switchTpye=ajax loads all tabs on startup

    Ralph Soika Apprentice

      Hi,

       

      I have a form with a rich:tabPanel. I want to load the content of the tabs (which is heavy database query) only when the user clicks on a tab. I set switchtype to 'ajax'.

      But the content of all tabs is loaded on each click - independent if the tab content is shown or not.

       

      My code looks like this:

      {code:xml}

      <rich:tabPanel switchType="ajax">

          <rich:tab header="tab1">

           .....

          </rich:tab>

          <rich:tab header="tab2">

              <rich:dataTable columns="2"  value="#{analyzerMB.total}" var="record">

               ......

           </rich:tab>

      </rich:tabPanel>

      {code}

      My backing bean method analyzerMB.getTotal() is triggered on page load and every tab-click. I expected that swichType=ajax will avoid this :-/

      I found this older issue with an workaround:

       

      https://issues.jboss.org/browse/RF-3512

       

      Is this the only way to avoid loading content form different tabs each time?

       

      Thanks for help

        • 1. Re: rich:tabPanel switchTpye=ajax loads all tabs on startup
          Dave seenam Newbie

          i am seeing the same issue. Did you ever find a resolution for this ? I see that all my tabs content is loaded at first. I am using Richfaces 4.2.2 even if i enclose the tab content in a subview with rendered = false.

          • 2. Re: rich:tabPanel switchTpye=ajax loads all tabs on startup
            Dave seenam Newbie

            looks like the issue listed here -

            • 3. Re: rich:tabPanel switchTpye=ajax loads all tabs on startup
              Brendan Healey Master

              An approach to consider for implementing this efficiently is to only load the data required for a specific tab when it is

              selected in an itemChangeListener.

               

              You should never be accessing the database in a getter, I only ever use IDE generated getters & setters in my

              application and load data just in time.

               

               

              <rich:tabPanel id="tabs" switchType="ajax"

                                    itemChangeListener="#{bean.tabChange}"

                                    activeItem="#{bean.activeTab}">

                   <rich:tab name="tab1" header="Department List">

                           <rich:dataTable value="#{bean.departmentList}" ...

              ...

               

              private List<Department> departmentList;

              private String activeTab;

               

              public void tabChange(ItemChangeEvent event) {

                      String newTab = event.getNewItemName();

                      switch (newTab) {

                          case "tab1":

                               departmentList = ... database query ...

                              break;               

                          case "tab2":

                              break;

              ...

              }

               

              One slightly annoying point with this approach is that the first tab has to be treated differently because the itemChangeListener

              doesn't execute when the page is first loaded (I think it should). So for the first tab you need to use f:event type="preRenderView"

              and add any reload code to the listener, instead of or in addition to putting it in the case statement in the itemChangeListener.

               

              This approach does not require activeItem but note that if you use tabPanel immediate="true" (to avoid validation errors on

              input components when you change tabs) then activeItem stops working - so if you use activeItem for other reasons then a

              workaround is to add lines like activeItem = "tab1"; in each case statement.

               

              Regards,

              Brendan.

               

               

               


              Java Enterprise Developer


              JSF Richfaces Ajax Java 6/7 (scjp) EE 6 HTML CSS JavaScript jQuery MySQL JPA Hibernate Eclipselink

              Spring Oracle SQL JPQL Sybase EJB CDI Glassfish Apache JAX-RS Primefaces UNIX Paypal and more..

              • 4. Re: rich:tabPanel switchTpye=ajax loads all tabs on startup
                ravi j Newbie

                Hi, there are couple of things can be tried.

                 

                1) Use itemchangelistener in rich:tabpanel while navigating to the tab and  load the data that is necessay for the the tab by invoking tab specific backing bean.

                 

                2) use <ui:include src="#{tabpath}"/> in rich:tab content the src can be dynamically set in the itemchangelisetner.

                 

                Thans

                Ravi J

                • 5. Re: rich:tabPanel switchTpye=ajax loads all tabs on startup
                  Brendan Healey Master

                  > 1) Use itemchangelistener in rich:tabpanel while navigating to the tab and  load the data that is necessay for the the tab by invoking tab specific backing bean.

                   

                  Why didn't I think of that?

                  • 6. Re: rich:tabPanel switchTpye=ajax loads all tabs on startup
                    ravi j Newbie

                    Hi,

                     

                    The data of the first tab can be loaded in the constructor of that bean(BeanOne) and later in itemchangelistener while navigating to that tab.

                     

                     

                    public void intializeBeansOnTabEnter(ItemChangeEvent itemChangeEvent) throws

                    ServiceException{

                       String newTab = itemChangeEvent.getNewItem().getId();

                       UITab uitab =(UITab) itemChangeEvent.getNewItem();

                       FacesContext context = FacesContext.getCurrentInstance();

                       switch (newTab) {

                                case "tab1":

                                   BeanOne beanone = (BeanOne ) context

                                     .getApplication().evaluateExpressionGet(context,

                                      "#{BeanOne }",BeanOne.class);

                                   beanone .initialize();

                                    break;               

                                case "tab2":

                                    break;

                     

                    }

                       // clears the components state so that they will be binded with latest data

                       clearRegion(uitab);

                    }

                     

                    For us the requirement was to load the data from DB everytime the user enters the TAB.

                     

                    Unnecessary loading of the TABs content, backing beans can be avoided using  below one.  set ajaxrendered= false on the components to avoid unnecessary rendering .

                     

                    2) use <ui:include src="#{tabsBean.tabTwopath}"/> in rich:tab content the src can be dynamically set in the backing bean.

                     

                    /**

                    * Returns Tab 2 Path

                    *

                    @return

                    */

                    public

                    String geTabTwoPath(){

                      if

                     

                    (uiTabPanel.getActiveItem().equals("tab2")){

                      return tab2.xhtml;

                    }

                    }

                     

                    I just wanted to bring up one issue since it is switchtype=ajax.

                     

                    I have noticed one issue using switchtype=ajax in tabpanel.  to use switchtype=ajax , entire tabpanel should be placed in one h:form. here is the problem.

                     

                    since it is a single form, if the tabs are heavy, then loading the popups in the tabs takes time even though we are using limitrender=true, ajaxrender=false.

                     

                    We have heavy tabs in the rich:tabpanel and it is effecting the performance. If the tabs are not that heavy then loading time is quick.

                    I wonder to use window modal dialog over rich:popuppanel for the popups in rich:tabpanel when switchtype=ajax for heavy tabs.

                     

                    Thanks & Regards

                    Ravi

                     

                     

                     

                     

                    • 7. Re: rich:tabPanel switchTpye=ajax loads all tabs on startup
                      Dave seenam Newbie

                      thanks for the reply. I am going to have a look at these approaches and let you know how it turns out. while I have your attention do you see this issue ? i posted this question in a different forum. But i am reposting that question here

                       

                      I have a rich faces tabPanel configured like this. I am using rich faces 4.2


                      <rich:tabPanel activeItem="#{bean.activeTab" switchType="server" itemChangeListener="#{bean.changeTab}">

                       

                           <rich:tab name="tab1" header="tabname1" onheaderclick="showPleaseWait()">

                                ......

                           </rich:tab>

                       

                           <rich:tab name="tab2" header="tabname2" onheaderclick="showPleaseWait()">

                                ......

                           </rich:tab>

                       

                      </rich:tabPanel>

                       

                      now everything works correctly. however what i am noticing is that when I swtich tabs for a moment both tabs become inactive (both the tabs appear as not selected) and no content shows up under the tabs and then page refreshes as expected and the selected tab is active with its content correctly displayed. it is just that as soon as i select a tab, for a second, both tabs become inactive (almost like some client script is doing so) until the server response comes back.

                       

                      Has anyone else noticed this and how to get rid of this ?