Default tab is first tab, Tab is never re-rendered to reflect the change when user select new tab

Question

This is my composite component name file is tab.xhtml

     <composite:interface>   
    <composite:attribute name="totalTabs"/>     
     <composite:attribute name="tabNameList" required="true"/>        
     </composite:interface>  

 <composite:implementation>
  <div id="#{cc.id}" columns="#{cc.attrs.totalTabs}"styleClass="adjustTabsTableColumnMargin">
        <ui:repeat id="repeat" var="tabItem" value="#{cc.attrs.tabNameList}" varStatus="status">
            <h:commandLink  id="dynamicTabs" tabindex = "#{status.index + 1}" title="#{tabItem.title}" value="#{tabItem.name}" styleClass = "#{tabItem.isSelected?'tabSelected':'tabPane'}" >
                <f:setPropertyActionListener name="tabs.tabIndex" value="#{status.index + 1}"/>
                <f:ajax execute="#{@this}" listener="#{tabs.handleTabChange(tabItem, cc.attrs.tabNameList)}" render="@form"/>
            </h:commandLink>
        </ui:repeat>
    </div>
</composite:implementation>

In the backing bean name is tabs, in a session Scope.

    public void handleTabChange(TabBean tabItem, List<TabBean> tabBeanList){

       for(TabBean tab: tabBeanList){

            if(tabItem.tabName.equal(tab.tabName){
              tab.setIsSelected(true);
            }else{
              tab.setIsSelected(false);
        }
    }

and the tabBean is just a regular bean in session scope with setter, getter, included

       TabBean(String tabname, String title, String id, boolean select){
           this.tabname = tabname;
           this.title = title;
           this.id = id;
           this.select = select;
       }
       public void setIsSelected(boolean value){this.selected = value;}
       public boolean getIsSelected(){ return this.selected;}

@PostContruct
public List<TabBean> getTabPaneList(){

    List<TabBean> tabList = new ArrayList<TabBean>();
    TabBean tab = new TabBean("name1", "title1", "tab1", true);
    tabList.add(tab);
    tab = new TabBean("name2", "title2", "tab2", false);
    tabList.add(tab);

    return tabList;

}

in my main display.xhtml file tag is:

    <ui:composition 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:c="http://java.sun.com/jsp/jstl/core"
            xmlns:tp="http://ui.pax"
            template="/WEB-INF/layouts/standard_layout.xhtml"
            xmlns:uitags="http://java.sun.com/jsf/composite/uitags">

            <h:form id="formId" prePendid="false">
               <uitag:tab id ="tabTags" tabNameList="#{tab.getTabNameList}" />
            </h:form>


    </ui:composition>

I would like the tab to change color when user select new tab, f:ajax is not re-rendered a set of tabs when user select new tab,it was kept the default tab is first tab I used the id :tabTags:tabTags in the render attribute but there is an exception contains an unknown id ':tabTags:tabTags - cannot locate it in the context of the component dynamicTabs, f:ajax accept only the @form attribute value, anyone have any idea, Baulse do you have any idea?thanks, this question took me couple days already, and I am in hot seat now.

it's really hard to understand you.. please check your syntax. is the method handleTabChange() executed? I suggest you use firebug to determine the ID of the component you want to update — damian, Sep 03 '12 at 15:50
the handleTabChange() method is worked because I have a System.out.println which print out every time the I select a new tab — Dylan, Sep 04 '12 at 12:08
I do not have the error 'cannot locate it in the context of the component' I known the component ID from down to children h:commandLink, I removed the prePendId='false' and set the absolute namingcontainerId base from the formId to the children, but the tabs is still not re-rendered. — Dylan, Sep 04 '12 at 12:20
the Issue have been resolved because i used the @PostContruct in the method getTabPaneList this annotation causing the method re-called everytime f:ajax render the form then reset the List back to the original without update the new value, I do not know why? BalusC do you know why? — Dylan, Sep 04 '12 at 14:19

Default tab is first tab, Tab is never re-rendered to reflect the change when user select new tab

0 Answers0