Question

I’m working on JSF tabs example which use lazy loading:

<h:form prependId="false">
    <h:panelGroup id="tabs" layout="block">
        <ul>
            <c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
                <li><a href="##{tab.tabid}" onclick="$('#button_#{tab.tabid}').click()">#{tab.tabid}</a></li>
                <h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{DatacenterProfileController.switchPages(tab.tabid)}" style="display:none">
                    <f:ajax render="tabs"></f:ajax>
                </h:commandButton>  
            </c:forEach>
        </ul>

        <c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
            <h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq DatacenterProfileController.selectedTab}">
                <ui:include src="#{tab.tabfilename}"></ui:include>
            </h:panelGroup>
        </c:forEach>
    </h:panelGroup>
</h:form>

List<TabObject> tabs = new ArrayList<>();

    @PostConstruct
    public void init() {
        tabs.add(new TabObject("DCProfileTabZones.xhtml", "Zones"));
        tabs.add(new TabObject("DCProfileTabHVAC.xhtml", "HVAC"));
        tabs.add(new TabObject("DCProfileTabISPs.xhtml", "ISPs"));

    }
    String selectedTab = "Zones";

    public String getSelectedTab() {
        return selectedTab;
    }

    public void setSelectedTab(String selectedTab) {
        this.selectedTab = selectedTab;
    }

    public String switchPages(String selTab) {
        selectedTab = selTab;
        return selectedTab;
    }


    public List<TabObject> gettabs() {
        return tabs;
    }

    public void setTabs(List<TabObject> tabs) {
        this.tabs = tabs;
    }


    public class TabObject {

        String tabfilename;
        String tabid;

        public String gettabfilename() {
            return tabfilename;
        }

        public void settabfilename(String tabfilename) {
            this.tabfilename = tabfilename;
        }

        public String getTabid() {
            return tabid;
        }

        public void settabid(String tabid) {
            this.tabid = tabid;
        }

        public TabObject(String tabfilename, String tabid) {
            super();
            this.tabfilename = tabfilename;
            this.tabid = tabid;
        }
    }

I noticed a very strange bug. I have three tabs: Zones, HVAC, ISPs. If I have the same jsf pages when I click on the tab the JSF page with the same name will be opened. Can you help me to fix this bug?

Answer 1

Your question is not entirely clear, but I’m gonna go out on a limb and suggest you use ui:repeat (UI Repeat Tutorial) for your iteration and be sure you’re NOT using a @RequestScoped bean for your Ajax. Use an @ViewScoped bean instead.