Home:ALL Converter>Tabs in JSF page are not working

Tabs in JSF page are not working

Ask Time:2012-09-22T23:54:57         Author:Peter Penzov

Json Formatter

I have a problem which I cannot solve. When I open JSF tab and I try to click on the buttons the page is not working.

Main page:

<?xml version='1.0' encoding='UTF-8' ?>
<!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" xml:lang="en" lang="en"    
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <ui:insert name="header">           
            <ui:include src="header.xhtml"/>         
        </ui:insert>
        <style type="text/css">
            .settingsHashMap { font: 80% "Trebuchet MS", sans-serif;}
        </style>
    </h:head>
    <h:body>
        <h1><img src="resources/css/images/icon.png" alt="DX-57" /> Rack Management Center</h1>
        <!-- layer for black background of the buttons -->
        <div id="toolbar" style="margin: 0 auto; width:100%; height:30px; position:relative;  background-color:black">
            <!-- Include page Navigation -->
            <ui:insert name="Navigation">           
                <ui:include src="Navigation.xhtml"/>         
            </ui:insert>
        </div>  
        <div id="logodiv" style="position:relative; top:35px; left:0px;"> 
            <h:graphicImage alt="Datacenter Profile" style="position:relative" value="resources/images/logo_datacenter_profile.png" />
        </div>
        <div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px">

            <div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px">

                <div id="settingsHashMapz" class="settingsHashMap" style="width:1150px; height:400px; position:absolute; top:20px; left:1px">

                    <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>

                </div>   

            </div>  
        </div>
    </h:body>
</html>

Tab page:

<?xml version='1.0' encoding='UTF-8' ?>
<!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" xml:lang="en" lang="en"    
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>

    </h:head>
    <h:body>
        <ui:composition>
            <h:panelGroup>
                <h:form id="zones" >
                    <p:growl id="growl" showDetail="true" sticky="true" />
                    <!-- The sortable data table -->
                    <h:dataTable onmouseover="addOnclickToTabsDatatableRows();" id="dataTable" headerClass="columnHeader" value="#{DCProfileTabZonesController.dataList}" binding="#{zones}" var="item">
                        <!-- Check box -->
                        <h:column>
                            <f:facet name="header">
                                <h:selectBooleanCheckbox style="margin-left: 0px;" value="#{DCProfileTabZonesController.mainSelectAll}" class="checkall" >
                                    <f:ajax listener="#{DCProfileTabZonesController.selectAll}" render="@form" />
                                </h:selectBooleanCheckbox>
                            </f:facet>
                            <h:selectBooleanCheckbox  onclick="highlight(this)" value="#{DCProfileTabZonesController.selectedIds[item.datacenterid]}" >
                                <!-- if the user deselects one row deselect the main checkbox -->
                                <f:ajax listener="#{DCProfileTabZonesController.deselectMain}" render="@form" />
                            </h:selectBooleanCheckbox>
                            <!-- Click on table code -->  
                            <h:outputLink id="lnkHidden" value="ZoneProfile.jsf" style="text-decoration:none; color:white; background-color:black">
                                <f:param name="id" value="#{item.datacenterid}" />
                            </h:outputLink>
                        </h:column>
                        ............

                    </h:dataTable>

                    <!-- The paging buttons -->
                    <h:commandButton styleClass="bimage" value="first" action="#{DCProfileTabZonesController.pageFirst}"
                                     disabled="#{DCProfileTabZonesController.firstRow == 0}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;

                    <h:commandButton styleClass="bimage" value="prev" action="#{DCProfileTabZonesController.pagePrevious}"
                                     disabled="#{DCProfileTabZonesController.firstRow == 0}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;

                    <h:commandButton styleClass="bimage" value="next" action="#{DCProfileTabZonesController.pageNext}"
                                     disabled="#{DCProfileTabZonesController.firstRow + DCProfileTabZonesController.rowsPerPage >= DCProfileTabZonesController.totalRows}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;    

                    <h:commandButton styleClass="bimage" value="last" action="#{DCProfileTabZonesController.pageLast}"
                                     disabled="#{DCProfileTabZonesController.firstRow + DCProfileTabZonesController.rowsPerPage >= DCProfileTabZonesController.totalRows}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;

                    <h:outputText value="Page #{DCProfileTabZonesController.currentPage} / #{DCProfileTabZonesController.totalPages}" />
                    <br />

                    <!-- The paging links -->
                    <ui:repeat value="#{DCProfileTabZonesController.pages}" var="page">
                        <h:commandLink value="#{page}" actionListener="#{DCProfileTabZonesController.page}"
                                       rendered="#{page != DCProfileTabZonesController.currentPage}" style="text-decoration:none;color:white;">
                            <f:ajax render="@form" execute="@form"></f:ajax>   
                        </h:commandLink>
                        <h:outputText value="#{page}" escape="false"
                                      rendered="#{page == DCProfileTabZonesController.currentPage}" style="text-decoration:none;color:gray;"/>
                    </ui:repeat>
                    <br />

                    <!-- Set rows per page -->
                    <h:outputLabel for="rowsPerPage" value="Rows per page" />
                    <h:inputText id="rowsPerPage" value="#{DCProfileTabZonesController.rowsPerPage}" size="3" maxlength="3" />
                    <h:commandButton styleClass="bimage" value="Set" action="#{DCProfileTabZonesController.pageFirst}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;
                    <h:message for="rowsPerPage" errorStyle="color: red;" />

                    <!-- hidden button -->
                    <h:commandButton id="deleterow" value="HiddenDelete" action="#{DCProfileTabZonesController.deleteSelectedIDs}" style="display:none">
                        <f:ajax render="@form"></f:ajax>
                    </h:commandButton>

                    <!-- the delete button -->
                    <h:button styleClass="bimage" value="Delete" onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" />&nbsp;

                    <!-- New Zone -->
                    <h:button id="newzone" styleClass="lbimage" value="New Zone" outcome="/NewZone.xhtml"/>

                    <script type="text/javascript" src="resources/js/tabs.js"></script> 
                </h:form>         
            </h:panelGroup>
        </ui:composition>
    </h:body>
</html>

When I remove the ui:composition tag and I insert all the code into one page the buttons are working.

Author:Peter Penzov,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/12545319/tabs-in-jsf-page-are-not-working
yy