1

I'm having an unusual problem with a page which contains a Tree on the left, and a TabView on the right. I have implemented 2 tabs so far. If the first tab is "Profile", then the 2nd tab, "Users" does not display (the tab title is there, but when selected there is no content under the tab). If I switch the order and put "Users" first, then both tabs display.

I tried changing the content on "Users" - I first used an accordionPanel, then thought perhaps the tabs on TabView and Accordion were getting confused and changed it to a dataList. The content in the "Users" panel doesn't seem to matter.

I'll show the xhtml code when it works, and when it doesn't.

Users panel does not show:

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

Both panels work:

<?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>
Ramesh
  • 613
  • 1
  • 10
  • 28

1 Answers1

0

This was caused by unrelated javascript in a menu section which declared a jquery.js library. When I removed the offending import, all of the strange Primefaces errors went away. It seems declaring other jquery libraries interferes with Primefaces code.

Ramesh
  • 613
  • 1
  • 10
  • 28