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>
<h:commandButton styleClass="bimage" value="prev" action="#{DCProfileTabZonesController.pagePrevious}"
disabled="#{DCProfileTabZonesController.firstRow == 0}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
<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>
<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>
<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>
<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;" />
<!-- 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.
