PrimeFaces Tabview 第二个选项卡不显示 - 有条件

Question

我遇到了一个不寻常的问题，该页面包含左侧的 Tree 和右侧的 TabView。到目前为止，我已经实施了 2 个选项卡。如果第一个选项卡是 "Profile"，那么第二个选项卡 "Users" 不会显示（选项卡标题在那里，但选中后选项卡下没有内容）。如果我切换顺序并将 "Users" 放在第一位，那么两个选项卡都会显示。

我尝试更改 "Users" 上的内容 - 我首先使用 accordionPanel，然后认为 TabView 和 Accordion 上的选项卡可能变得混乱并将其更改为 dataList。 "Users" 面板中的内容似乎无关紧要。

我将展示 xhtml 代码何时有效，何时无效。

用户面板不显示：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   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:rich="http://richfaces.org/rich"
   xmlns:t="http://myfaces.apache.org/tomahawk"
   xmlns:p="http://primefaces.org/ui"
   xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"   
   xmlns:cust="http://memarden.com">

<link href="CSS/navigation.css" rel="stylesheet" type="text/css" />

<h:body>
   <h3>#{text['organization']}</h3>
   <ui:composition template="template-restricted.xhtml">
      <ui:define name="body_content">
         <h:form id="mainForm">
            <div id="title" class="sl-title">Manage Schools - #{manageOrgHierarchy.selectedOrganization.displayString}</div>
            <div class="sr-content">
            <div class="ui-grid ui-grid-responsive"><div class="ui-grid-row">
             <div class="ui-grid-col-4"><p:panel layout="block">
            <p:toolbar><f:facet name="left">
               <p:commandButton  
                  title="New Root Org"
                  icon="fa fa-folder-open" 
                  rendered="#{userSession.isAdmin}"
                  process="@form"
                  update="@form"
                  action="#{manageOrgHierarchy.createNewRootOrg}" />
               <p:commandButton      
                  title="#{text['new.item']}"
                  icon="fa fa-folder-open" 
                  process="@form"
                  update="@form"
                  action="#{manageOrgHierarchy.createNewSubOrg}" />
               <p:commandButton      
                  title="#{text['delete']}"
                  icon="fa fa-trash"
                  process="@form"
                  update="@form"
                  disabled="#{not manageOrgHierarchy.canBeDeleted}"
                  action="#{manageOrgHierarchy.delete}" />
               <p:commandButton      
                  title="#{text['save']}"
                  icon="fa fa-save" 
                  process="@form"
                  update="@form"
                  action="#{manageOrgHierarchy.save}" />
            </f:facet></p:toolbar>
              <p:tree
                    id="orgTree"
                    value="#{manageOrgHierarchy.rootNodes}"
                  selectionMode="single"
                      selection="#{manageOrgHierarchy.selectedNode}"
                      style="ui-grid-col-2"
                       var="node">
                     <p:ajax event="select" update="mainForm" listener="#{manageOrgHierarchy.nodeSelected}" />
                     <p:ajax event="unselect" update="mainForm" listener="#{manageOrgHierarchy.nodeUnselected}" />
                 <p:ajax event="expand" listener="#{manageOrgHierarchy.nodeExpanded}" />
                 <p:ajax event="collapse" listener="#{manageOrgHierarchy.nodeCollapsed}" />
                  <p:treeNode type="OrganizationHierarchy">
                     <h:outputText value="#{node.nickName}" />
                   </p:treeNode>
              </p:tree></p:panel>
         </div>
         <div class="ui-grid-col-8">
         <p:tabView>
            <p:tab title="#{text['profile']}">
            <p:panelGrid columns="2" layout="grid">
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="name" value="#{text['name']}" />
                  <p:inputText id="name" value="#{manageOrgHierarchy.editOrg.nickName}" />
               </p:panelGrid>
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="phone" value="#{text['phone']}" />
                  <p:inputText id="phone" value="#{manageOrgHierarchy.editOrg.phone}" />
               </p:panelGrid>
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="address" value="#{text['address']}" />
                  <p:inputText id="address" value="#{manageOrgHierarchy.editOrg.address}" />
               </p:panelGrid>
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="city" value="#{text['city']}" />
                  <p:inputText id="city" value="#{manageOrgHierarchy.editOrg.city}" />
               </p:panelGrid>
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="state" value="#{text['state']}" />
                  <p:inputText id="state" value="#{manageOrgHierarchy.editOrg.state}" />
               </p:panelGrid>
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="postalCode" value="#{text['post.code']}" />
                  <p:inputText id="postalCode" value="#{manageOrgHierarchy.editOrg.postalCode}" />
               </p:panelGrid>
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="country" value="#{text['address.country']}" />
                  <p:inputText id="country" value="#{manageOrgHierarchy.editOrg.country}" />
               </p:panelGrid>
            </p:panelGrid>
            <h:panelGroup>
               <p:commandButton      
                  value="#{text['cancel']}"
                  icon="fa fa-trash"
                  process="@form"
                  update="@form"
                  action="#{manageOrgHierarchy.cancelEditOrg}" />
               <p:commandButton      
                  value="#{text['save']}"
                  icon="fa fa-save" 
                  process="@form"
                  update="@form"
                  action="#{manageOrgHierarchy.saveEditOrg}" />
            </h:panelGroup>
            </p:tab>
            <p:tab title="#{text['users']}">
            <p:dataList value="#{manageOrgHierarchy.userPermissions}" var="p">
               <p:panelGrid columns="2">
                  <cust:avatarOutput owner="#{p.user}" session="#{userSession}"/>
                  <p:panelGrid columns="1">
                     <h:outputText value="#{p.user.displayString}" />
                     <h:outputText value="#{p.user.name}" />
                  </p:panelGrid>
               </p:panelGrid>
            </p:dataList>
            </p:tab>
            <p:tab title="#{text['lessons']}"></p:tab>
            <p:tab title="#{text['reports']}"></p:tab>
         </p:tabView></div></div></div>
         </div>
        </h:form>
      </ui:define>
   </ui:composition>
</h:body>
</html>

两个面板都有效：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   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:rich="http://richfaces.org/rich"
   xmlns:t="http://myfaces.apache.org/tomahawk"
   xmlns:p="http://primefaces.org/ui"
   xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"   
   xmlns:cust="http://memarden.com">

<link href="CSS/navigation.css" rel="stylesheet" type="text/css" />

<h:body>
   <h3>#{text['organization']}</h3>
   <ui:composition template="template-restricted.xhtml">
      <ui:define name="body_content">
         <h:form id="mainForm">
            <div id="title" class="sl-title">Manage Schools - #{manageOrgHierarchy.selectedOrganization.displayString}</div>
            <div class="sr-content">
            <div class="ui-grid ui-grid-responsive"><div class="ui-grid-row">
             <div class="ui-grid-col-4"><p:panel layout="block">
            <p:toolbar><f:facet name="left">
               <p:commandButton  
                  title="New Root Org"
                  icon="fa fa-folder-open" 
                  rendered="#{userSession.isAdmin}"
                  process="@form"
                  update="@form"
                  action="#{manageOrgHierarchy.createNewRootOrg}" />
               <p:commandButton      
                  title="#{text['new.item']}"
                  icon="fa fa-folder-open" 
                  process="@form"
                  update="@form"
                  action="#{manageOrgHierarchy.createNewSubOrg}" />
               <p:commandButton      
                  title="#{text['delete']}"
                  icon="fa fa-trash"
                  process="@form"
                  update="@form"
                  disabled="#{not manageOrgHierarchy.canBeDeleted}"
                  action="#{manageOrgHierarchy.delete}" />
               <p:commandButton      
                  title="#{text['save']}"
                  icon="fa fa-save" 
                  process="@form"
                  update="@form"
                  action="#{manageOrgHierarchy.save}" />
            </f:facet></p:toolbar>
              <p:tree
                    id="orgTree"
                    value="#{manageOrgHierarchy.rootNodes}"
                  selectionMode="single"
                      selection="#{manageOrgHierarchy.selectedNode}"
                      style="ui-grid-col-2"
                       var="node">
                     <p:ajax event="select" update="mainForm" listener="#{manageOrgHierarchy.nodeSelected}" />
                     <p:ajax event="unselect" update="mainForm" listener="#{manageOrgHierarchy.nodeUnselected}" />
                 <p:ajax event="expand" listener="#{manageOrgHierarchy.nodeExpanded}" />
                 <p:ajax event="collapse" listener="#{manageOrgHierarchy.nodeCollapsed}" />
                  <p:treeNode type="OrganizationHierarchy">
                     <h:outputText value="#{node.nickName}" />
                   </p:treeNode>
              </p:tree></p:panel>
         </div>
         <div class="ui-grid-col-8">
         <p:tabView>
            <p:tab title="#{text['users']}">
            <p:dataList value="#{manageOrgHierarchy.userPermissions}" var="p">
               <p:panelGrid columns="2">
                  <cust:avatarOutput owner="#{p.user}" session="#{userSession}"/>
                  <p:panelGrid columns="1">
                     <h:outputText value="#{p.user.displayString}" />
                     <h:outputText value="#{p.user.name}" />
                  </p:panelGrid>
               </p:panelGrid>
            </p:dataList>
            </p:tab>
            <p:tab title="#{text['profile']}">
            <p:panelGrid columns="2" layout="grid">
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="name" value="#{text['name']}" />
                  <p:inputText id="name" value="#{manageOrgHierarchy.editOrg.nickName}" />
               </p:panelGrid>
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="phone" value="#{text['phone']}" />
                  <p:inputText id="phone" value="#{manageOrgHierarchy.editOrg.phone}" />
               </p:panelGrid>
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="address" value="#{text['address']}" />
                  <p:inputText id="address" value="#{manageOrgHierarchy.editOrg.address}" />
               </p:panelGrid>
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="city" value="#{text['city']}" />
                  <p:inputText id="city" value="#{manageOrgHierarchy.editOrg.city}" />
               </p:panelGrid>
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="state" value="#{text['state']}" />
                  <p:inputText id="state" value="#{manageOrgHierarchy.editOrg.state}" />
               </p:panelGrid>
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="postalCode" value="#{text['post.code']}" />
                  <p:inputText id="postalCode" value="#{manageOrgHierarchy.editOrg.postalCode}" />
               </p:panelGrid>
               <p:panelGrid columns="1" layout="grid">
                  <p:outputLabel for="country" value="#{text['address.country']}" />
                  <p:inputText id="country" value="#{manageOrgHierarchy.editOrg.country}" />
               </p:panelGrid>
            </p:panelGrid>
            <h:panelGroup>
               <p:commandButton      
                  value="#{text['cancel']}"
                  icon="fa fa-trash"
                  process="@form"
                  update="@form"
                  action="#{manageOrgHierarchy.cancelEditOrg}" />
               <p:commandButton      
                  value="#{text['save']}"
                  icon="fa fa-save" 
                  process="@form"
                  update="@form"
                  action="#{manageOrgHierarchy.saveEditOrg}" />
            </h:panelGroup>
            </p:tab>
            <p:tab title="#{text['lessons']}"></p:tab>
            <p:tab title="#{text['reports']}"></p:tab>
         </p:tabView></div></div></div>
         </div>
        </h:form>
      </ui:define>
   </ui:composition>
</h:body>
</html>

Answer 1

这是由声明了 jquery.js 库的菜单部分中不相关的 javascript 引起的。当我删除有问题的导入时，所有奇怪的 Primefaces 错误都消失了。似乎声明其他 jquery 库会干扰 Primefaces 代码。

PrimeFaces Tabview 第二个选项卡不显示 - 有条件

PrimeFaces Tabview 2nd tab not displaying - conditionally

jsf

tabs

primefaces