我在 Primefaces 选项卡中遇到问题。由于某种原因，选项卡无法正确显示。这是源代码的一部分：
<?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>
<p:tabView id="tabView" dynamic="true">
<p:tab id="tba1" title="General">
<h:panelGrid>
<h:form id="general">
<table>
<ui:repeat var="ud" value="#{DCProfileTabGeneralController.dataList}">
<tr>
<td>Component ID</td>
<td>
<h:outputText value="#{ud.componentstatsid}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.componentstatsid}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
..............................
<tr>
<td>Power Capacity Watt</td>
<td>
<h:outputText value="#{ud.powercapacitywatt}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.powercapacitywatt}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Description</td>
<td>
<h:outputText value="#{ud.description}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.description}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
</ui:repeat>
</table>
</h:form>
</h:panelGrid>
</p:tab>
<p:tab id="tab2" title="Servers">
<h:panelGrid>
<h:form id="zones" >
<p:growl id="growl" showDetail="true" sticky="true" />
<!-- The sortable data table -->
<h:dataTable onmouseover="addOnclickToDatatableRows();" id="dataTable" headerClass="columnHeader" value="#{DCProfileTabZonesController.dataList}" binding="#{table}" 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>
<!-- Row number -->
..............................
<h:column>
<f:facet name="header">
<h:commandLink value="Description" style="text-decoration:none; color:white; background-color:black">
<f:ajax render="@form" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.description}" />
</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:commandButton id="newzone" styleClass="lbimage" value="New Zone" action="#{DCProfileTabZonesController.navigateToNewZone()}">
<f:ajax render="@form"></f:ajax>
</h:commandButton>
<script type="text/javascript" src="resources/js/tabs.js"></script>
</h:form>
</h:panelGrid>
</p:tab>
<p:tab id="tab3" title="HVAC">
<h:panelGrid>
<h:form id="hvac" >
<p:growl id="growl" showDetail="true" sticky="true" />
<!-- The sortable data table -->
<h:dataTable onmouseover="addOnclickToDatatableRows();" id="dataTable" headerClass="columnHeader" value="#{DCProfileTabHVACController.dataList}" binding="#{table}" var="item">
<!-- Check box -->
<h:column>
<f:facet name="header">
<h:selectBooleanCheckbox style="margin-left: 0px;" value="#{DCProfileTabHVACController.mainSelectAll}" class="checkall" >
<f:ajax listener="#{DCProfileTabHVACController.selectAll}" render="@form" />
</h:selectBooleanCheckbox>
</f:facet>
<h:selectBooleanCheckbox onclick="highlight(this)" value="#{DCProfileTabHVACController.selectedIds[item.componentstatsid]}" >
<!-- if the user deselects one row deselect the main checkbox -->
<f:ajax listener="#{DCProfileTabHVACController.deselectMain}" render="@form" />
</h:selectBooleanCheckbox>
<!-- Click on table code -->
<h:outputLink id="lnkHiddenh" value="HVACProfile.jsf" style="text-decoration:none; color:white; background-color:black">
<f:param name="id" value="#{item.componentstatsid}" />
</h:outputLink>
</h:column>
<!-- Row number -->
<h:column>
<f:facet name="header">
<h:outputText value="№" />
</f:facet>
<h:outputText value="#{table.rowIndex + DCProfileTabHVACController.firstRow + 1}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="HVAC ID" actionListener="#{DCProfileTabHVACController.sort}" style="text-decoration:none; color:white; background-color:black">
<f:attribute name="sortField" value="COMPONENTSTATSID" />
<f:ajax render="@form" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.componentstatsid}" />
</h:column>
............................
<h:column>
<f:facet name="header">
<h:commandLink value="Date Deployed" actionListener="#{DCProfileTabHVACController.sort}" style="text-decoration:none; color:white; background-color:black">
<f:attribute name="sortField" value="DATEDEPLOYED" />
<f:ajax render="@form" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.datedeployed}" />
</h:column>
</h:dataTable>
<!-- The paging buttons -->
<h:commandButton styleClass="bimage" value="first" action="#{DCProfileTabHVACController.pageFirst}"
disabled="#{DCProfileTabHVACController.firstRow == 0}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="prev" action="#{DCProfileTabHVACController.pagePrevious}"
disabled="#{DCProfileTabHVACController.firstRow == 0}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="next" action="#{DCProfileTabHVACController.pageNext}"
disabled="#{DCProfileTabHVACController.firstRow + DCProfileTabHVACController.rowsPerPage >= DCProfileTabHVACController.totalRows}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="last" action="#{DCProfileTabHVACController.pageLast}"
disabled="#{DCProfileTabHVACController.firstRow + DCProfileTabHVACController.rowsPerPage >= DCProfileTabHVACController.totalRows}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>
<h:outputText value="Page #{DCProfileTabHVACController.currentPage} / #{DCProfileTabHVACController.totalPages}" />
<br />
<!-- The paging links -->
<ui:repeat value="#{DCProfileTabHVACController.pages}" var="page">
<h:commandLink value="#{page}" actionListener="#{DCProfileTabHVACController.page}"
rendered="#{page != DCProfileTabHVACController.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 == DCProfileTabHVACController.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="#{DCProfileTabHVACController.rowsPerPage}" size="3" maxlength="3" />
<h:commandButton styleClass="bimage" value="Set" action="#{DCProfileTabHVACController.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="#{DCProfileTabHVACController.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 HVAC -->
<h:commandButton id="newhvac" styleClass="lbimage" value="New HVAC" action="#{DCProfileTabHVACController.navigateToNewHVAC()}">
<f:ajax render="@form"></f:ajax>
</h:commandButton>
<script type="text/javascript" src="resources/js/tabs.js"></script>
</h:form>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
</div>
</div>
</div>
</h:body>
</html>
这是我得到的结果：
我想我在标签的某个地方有问题，但我找不到它。你能帮我解决这个问题吗？
PS 在 Firebug 我得到这个错误：
TypeError: document.getElementById("form:dataTable") is null