I have a bug, I have in a page, 3 <p:selectOneMenu>s and 1 <p:selectManyMenu>
They work in order, I select the first, it fills the second, the secon fill the third and the third fill s the <p:selectManyMenu>. When I start to Select the values in the <p:selectManyMenu>(holding the ctrl button) the third <p:selectOneMenu> deselects. Executing the function that fills the <p:selectManyMenu>.
Anyone have ever seen this?
I'have a lot of experience with java, but just started with JSF and PrimeFaces.
Thank you all in advance.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:form id="formPatch">
<table border="">
<tr>
<td height="180p" valign="top">
<p:panel header="Configurar diretórios para extrair Objetos do Patch" style="width: 500px; height: 170px">
<h:panelGrid columns="2">
<p:outputLabel value="Arquivo: " styleClass="format_label"
for="nomePatch" />
<p:inputText id="nomePatch" value="#{patchMB.patchBean.fileName}" styleClass="format_input" required="true"
requiredMessage="Favor preencher o campo nome do arquivo ex: confg.txt">
</p:inputText>
<p:outputLabel value="Repositórios:" styleClass="format_label" for="dirRep" />
<p:selectOneMenu id="dirRep" value="#{patchMB.patchBean.directoryRepositorio}"
style="width: 350px">
<p:message for="dirRep" />
<f:selectItem itemLabel="Selecione" itemValue="Selecione" />
<f:selectItems value="#{patchMB.directoryRepCli}" />
<f:ajax event="change" listener="#{patchMB.carregaDirProdCli}" render="dirProdCli" />
</p:selectOneMenu>
<p:outputLabel value="Prod/Clientes: " for="dirProdCli" />
<p:selectOneMenu id="dirProdCli" value="#{patchMB.patchBean.directoryProdCli}"
style="width: 350px">
<p:message for="dirGap" />
<f:selectItem itemLabel="Selecione" itemValue="Selecione" />
<f:selectItems value="#{patchMB.dirProdCli}" />
<f:ajax event="change" listener="#{patchMB.carregaDirObjetos}" render="dirObj" />
</p:selectOneMenu>
<p:outputLabel value="Dir objetos: " for="dirObj" />
<p:selectOneMenu id="dirObj" value="#{patchMB.patchBean.directoryObjetos}"
style="width: 350px">
<p:message for="dirObj" />
<f:selectItem itemLabel="Selecione" itemValue="Selecione" />
<f:selectItems value="#{patchMB.dirObjetos}" />
<f:ajax event="change" listener="#{patchMB.carregarFiles}" render="pickListArq" />
<f:ajax event="change" listener="#{patchMB.carregarSelectMany}" render="objSelectMany" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
</td>
<td>
<p:panel header="Escolha os arquivos para criação do patch" style="width: 500px">
<p:tab id="pickListTab" title="Transformadores">
<h:panelGrid columns="1">
<p:pickList id="pickListArq" value="#{patchMB.objetos}" var="pickListObj"
itemLabel="#{pickListObj}" itemValue="#{pickListObj}">
<f:facet name="sourceCaption">Selecione os objetos</f:facet>
<f:facet name="targetCaption">Objetos do Patch</f:facet>
</p:pickList>
</h:panelGrid>
</p:tab>
</p:panel>
</td>
</tr>
</table>
</h:form>
</ui:composition>
Related
I am trying to persist a form in JSF page with many inputs. in parallel I added client side validation to process before entering to the actionLisner method.
The issus is that if I make the commandbutton inside <h:form> and outside <p:panel> the validation is OK but the action does not do anything (if all the fiels are validated). If I make the commandbutton inside <p:panel> the opposite happens, the validation does not work anymore and even if some fiels are empty, the method in actionListner is called.
<?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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/template.xhtml">
<ui:define name="title">
<h:outputText value="Entretien annuel - Personnel d'Agence">
</h:outputText>
</ui:define>
<ui:define name="body">
<div align="center">
<h:form id="CollaborateurViewForm">
<h:panelGroup id="display">
<p:panel header="Détails du Collaborateur">
<p:panelGrid columns="2" rendered="#{collaborateurController.selected !=
null}">
<h:outputText value="#{bundle.ViewCollaborateurLabel_idCollaborateur}"/>
<h:outputText value="#{collaborateurController.selected.idCollaborateur}"
title="#{bundle.ViewCollaborateurTitle_idCollaborateur}"/>
</p:panelGrid>
</p:panel>
</h:panelGroup>
</h:form>
</div>
<h:form id="testForm" >
<p:panel id="entretienFormPa" header="Entretien annuel - Personnel d'Agence">
<div align="center">
<p:panelGrid columns="2">
<p:panel header="Détails de l'entretien">
<p:outputLabel for="collaborateursItem" value="Entretien mené par :"/>
<p:selectManyMenu id="collaborateursItem" filter="true" filterMatchMode="contains"
showCheckbox="true"
value="#{entretienController.entretienMenePar}">
<p:ajax process="#this"/>
<f:selectItems id="entretienMenePar" value="#
{collaborateurController.itemsAvailableSelectMany}"
var="entretienMeneParItem"
itemValue="#{entretienMeneParItem}"/>
</p:selectManyMenu>
</p:panel>
</p:panelGrid>
<p:panel header="Saisie des notes de l'entretien">
<p:tabView>
<p:tab title="#{bundle.Personnel_Organisation_Commerciale}">
<h:panelGrid columns="2" cellpadding="10" cellspacing="10">
<p:outputLabel value="#
{bundle.Personnel_Organisation_Commerciale_Comprehension}" for="noteItem11"/>
<p:selectOneButton id="noteItem11" value="#
{entretienController.note11}"
required="true"
requiredMessage="#
{bundle.NoteEntretien_Requise}">
<f:selectItems value="#
{entretienController.listeNotesPossibles}"
var="noteItem"
itemValue="#{noteItem}"/>
<p:ajax process="#this"/>
</p:selectOneButton>
<p:outputLabel
value="#{bundle.Personnel_Organisation_Commerciale_Actions}" for="noteItem12"/>
<p:selectOneButton id="noteItem12" value="#
{entretienController.note12}"
required="true"
requiredMessage="#
{bundle.NoteEntretien_Requise}">
<f:selectItems value="#
{entretienController.listeNotesPossibles}"
var="noteItem"
itemValue="#{noteItem}"/>
<p:ajax process="#this"/>
</p:selectOneButton>
<p:outputLabel for="commentaireOrgaCom" value="Commentaire de suivi : " style="font-weight: bold"/>
<p:inputTextarea id="commentaireOrgaCom" value="#{entretienController.commentaireOrgaCom}"
rows="4" cols="50">
<p:ajax process="#this"/>
</p:inputTextarea>
</h:panelGrid>
</p:tab>
</p:tabView>
</p:panel>
<p:tabView>
<p:tab title="#{bundle.Da_Divers}">
<div align="center">
<p:outputLabel for="diagnosticItem" value="Diagnostic : " />
<p:inputTextarea id="diagnosticItem" value="#
{entretienController.diagItem}" rows="8" cols="67" required="true"
requiredMessage="#{bundle.Diagnostic_Requis}">
<p:ajax process="#this"/>
</p:inputTextarea>
</h:panelGrid>
</div>
</p:tab>
</p:tabView>
</div>
</p:panel>
<div align="right">
<p:commandButton id="saveEntretienButton" value="Enregistrer"
process="entretienFormPa" update="entretienFormPa" immediate="true"
actionListener="#
{noteEntretienController.saveEntretienActionPa(entretienController,
collaborateurController)}">
<p:confirm header="Confirmation" message="Etes-vous sûr de vouloir
enregistrer l'entretien ?" />
</p:commandButton>
<p:commandButton value="Retour" action="Details"
ajax="false" />
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Oui" type="button" styleClass="ui-confirmdialog-yes" />
<p:commandButton value="Non" type="button" styleClass="ui-confirmdialog-no" />
</p:confirmDialog>
</div>
</h:form>
</ui:define>
</ui:composition>
</html>
I also tried to add validateClient="true" on the commandButton
Thank in advance !
UPDATE :
I resolved the issue without knowing what was the source. I go back to the initial example given on primefaces showcase, I added my fields one by one. Know all is good
I'm working on primefaces and i can't understand this error.
My all xhtml code
My xhtml code :
<ui:composition template="/layout/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
>
<ui:define name="content">
<h:form id="formTab">
<p:commandButton value="Ajouter" oncomplete="PF('addNewDialog').show()" />
<p:dataTable var="tasktype" value="#{taskTypeBean.allTaskTypes}" id="taskType" selection="#{taskTypeBean.selectedTaskType}" selectionMode="single" rowKey="#{tasktype.reference}">
<p:column headerText="Reference">
<h:outputText value="#{tasktype.reference}" />
</p:column>
<p:column headerText="Description">
<h:outputText value="#{tasktype.description}" />
</p:column>
<p:column headerText="Prix Hors Taxe">
<h:outputText value="#{tasktype.htPrice}" />
</p:column>
</p:dataTable>
<p:contextMenu for="taskType">
<p:menuitem value="Modifier" action="#{taskTypeBean.updateDialog()}" update=":updateForm:udpatePanel" />
<p:menuitem value="Supprimer" action="#{taskTypeBean.deleteTaslType()}" update="taskType" />
</p:contextMenu>
</h:form>
<p:dialog widgetVar="updateDialog" modal="true" appendTo="#(body)">
<h:form id="updateForm">
<p:growl id="growlModif" showDetail="true" sticky="true" />
<p:panelGrid columns="2" id="udpatePanel">
<p:outputLabel for="reference" value="Reference :"/>
<p:inputText id="reference" required="true" requiredMessage="Entrez une reference" disabled="true" value="#{taskTypeBean.taskToUpdate.reference}"/>
<p:outputLabel for="description" value="Description :"/>
<p:inputText id="description" required="true" requiredMessage="Entrez une description" value="#{taskTypeBean.taskToUpdate.description}"/>
<p:outputLabel for="HTprice" value="HTprice :"/>
<p:inputText id="HTprice" required="true" requiredMessage="Entrez un prix hors taxe" value="#{taskTypeBean.taskToUpdate.htPrice}"/>
<p:commandButton value="Modifier" id="modifier" action="#{taskTypeBean.updateTaskType}" update=":formTab:taskType" oncomplete="PF('updateDialog').hide()" styleClass="ui-priority-primary" />
</p:panelGrid>
</h:form>
</p:dialog>
<p:dialog widgetVar="addNewDialog" modal="true" appendTo="#(body)">
<h:form>
<p:growl id="growlAdd" showDetail="true" sticky="true" />
<p:panelGrid columns="2">
<p:outputLabel for="reference" value="Reference :"/>
<p:inputText id="reference" required="true" requiredMessage="Entrez une reference" value="#{taskTypeBean.newReference}"/>
<p:outputLabel for="description" value="Description :"/>
<p:inputText id="description" required="true" requiredMessage="Entrez une description" value="#{taskTypeBean.newDescription}"/>
<p:outputLabel for="HTprice" value="HTprice :"/>
<p:inputText id="HTprice" required="true" requiredMessage="Entrez un prix hors taxe" value="#{taskTypeBean.newHTprice}"/>
<p:commandButton value="Ajouter" id="ajouter" action="#{taskTypeBean.addNewTaskType}" update=":formTab:taskType" oncomplete="PF('addNewDialog').hide()" styleClass="ui-priority-primary" />
</p:panelGrid>
</h:form>
</p:dialog>
</ui:define>
There is 3 differents form in this page
So, we can see and i have this issue :
javax.servlet.ServletException: MenuItem must be inside a form element
javax.faces.webapp.FacesServlet.service(FacesServlet.java:606)
org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
I built this page with an template very basic, i can't understand this problem.
Thanks for your help
Hello guys i have a problem updating some components, i am using JSF, Primefaces 5.3, Hibernate.
i Have this tab that contains a datatable: tab 1 and i have this other tab tab 2 what i want to do is when i change Farmaceutica column in tab 2 and click Guardar Cambios i want to update the datatable of the tab 1. I can update the datatabase and when i logout and login again the change is there but i want the change without logout.
This is my admin.xhtml:
<h:form id="frm">
<p:growl id="growl" life="3500" sticky="false" showDetail="true" />
<div class="navbar color-bar"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
<p:tabView id="tabs">
<p:tab title="Estado asignaciones">
<p:panel id="panelEstado">
<h:form id="formDta">
<p:dataTable
value="#{estadoAsignaciones.listaEstadoAsignaciones}"
var="data" paginator="true" rowKey="#{data.idAuditor}"
rows="10" selectionMode="single"
selection="#{estadoAsignaciones.estadoAsignaciones}">
<p:ajax event="rowSelect"
listener="#{estadoAsignaciones.onRowSelect()}"
onstart="PF('blockUIWidget').show()"
oncomplete="PF('overPnl').show()" update="frm" />
<p:column headerText="Auditor">
<h:outputLabel
value="#{data.nombreAuditor} #{data.apellidoAuditor}" />
</p:column>
<p:column headerText="Farmacéutica">
<h:outputLabel value="#{data.farmaceuticaAsignada}" />
</p:column>
<p:column headerText="Progreso">
<p:progressBar value="#{data.porcentaje}"
labelTemplate="{value}%" id="avanceBar" style="width:80%" />
</p:column>
</p:dataTable>
</h:form>
</p:panel>
<p:overlayPanel id="panelOver" widgetVar="overPnl"
showEffect="fade" hideEffect="fade" dismissable="false"
showCloseIcon="true">
<p:panel id="avance" header="Avance auditoria"
class="space robotome">
<p:progressBar id="avanceBar"
value="#{estadoAsignaciones.porcentajeValue}"
style="width:100%" labelTemplate="{value}%" />
</p:panel>
<p:panel id="tiempo" header="Tiempo" class="space robotome">
<h:outputLabel
value="Fecha inicio: #{estadoAsignaciones.fecha}" />
<br />
<h:outputLabel
value="Fecha Actual: #{estadoAsignaciones.fechaActual}" />
<br />
<h:outputLabel
value="Hora inicio: #{estadoAsignaciones.hora}" />
<br />
<h:outputLabel
value="Tiempo transcurrido: #{estadoAsignaciones.calHoraDif} horas" />
</p:panel>
<p:panel id="auditor" header="Auditor" class="robotome">
<p:outputLabel
value="Nombres: #{estadoAsignaciones.getEstadoAsignaciones().nombreAuditor}" />
<br />
<p:outputLabel
value="Apellidos: #{estadoAsignaciones.getEstadoAsignaciones().apellidoAuditor}" />
</p:panel>
</p:overlayPanel>
<p:blockUI block="frm" widgetVar="blockUIWidget">
<p:graphicImage name="imgs/loading.gif" width="50" height="50" />
</p:blockUI>
</p:tab>
<p:tab title="Asignaciones">
<p:dataTable id="dtA"
value="#{asignacionesBean.seleccionAuditores}" var="auditor"
paginator="true" rows="5">
<p:column headerText="Auditor">
<h:outputText value="#{auditor.nombreAuditor}" />
</p:column>
<p:column headerText="Farmaceutica">
<p:selectOneMenu value="#{auditor.idFarmaceutica}">
<f:selectItem itemLabel="#{data.farmaceutica}"
noSelectionOption="true" itemDisabled="true" itemValue="" />
<f:selectItems
value="#{asignacionesBean.mapSeleccionFarmaceuticas}" />
</p:selectOneMenu>
</p:column>
<p:column>
<p:commandButton value="Guardar cambios" update=":frm"
actionListener="#{asignacionesBean.guardarRespuestaAsignaciones(auditor)}"
process="#this"
onclick="PF('blockUIWidgetAsignaciones').hide()"
onsuccess="PF('blockUIWidgetAsignaciones').show()" />
</p:column>
</p:dataTable>
I appreciate your help.
I could not understant why you are using form inside form. Delete all forms except the main one.
In your first tab, add id to your datatable. and put prependId=false to your panel grid as below.
<p:panel id="panelEstado" prependId="false">
<p:dataTable id="firstTable" value="#{estadoAsignaciones.listaEstadoAsignaciones}"
var="data" paginator="true" rowKey="#{data.idAuditor}"
rows="10" selectionMode="single" selection="#{estadoAsignaciones.estadoAsignaciones}">
Then in Farmaceutica column in tab 2 change code like below
<p:selectOneMenu value="#{auditor.idFarmaceutica}">
<f:selectItem itemLabel="#{data.farmaceutica}" noSelectionOption="true" itemDisabled="true" itemValue="" />
<f:selectItems value="#{asignacionesBean.mapSeleccionFarmaceuticas}" />
<p:ajax event="valueChange" update=":firstTable"/>
</p:selectOneMenu>
in Guardar Cambios change your code to this one.
<p:commandButton value="Guardar cambios" update=":firstTable" actionListener="#{asignacionesBean.guardarRespuestaAsignaciones(auditor)}" process="#this"
onclick="PF('blockUIWidgetAsignaciones').hide()" onsuccess="PF('blockUIWidgetAsignaciones').show()" />
This question already has an answer here:
Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors
(1 answer)
Closed 7 years ago.
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>
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.
I am using primefaces in my project. When I used the component in one of the .xhtml page I am getting the following error message :
" Tag Library supports namespace: http://primefaces.org/ui, but no tag was defined for name: panelMenu"
I am using the primefaces 3.3.1 jar .
Code snippet:
<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:p="http://primefaces.org/ui">
<h:head>
<title>Welcome to OTV_JSF_Spring_Hibernate_Project</title>
<style type="text/css">
h1{
font-family:"Times New Roman";
font-size:7px;
}
pre{
font-family:"Times New Roman";
font-size:25px;
font-style:bold;
align:center;
}
</style>
</h:head>
<h:body>
<h:form>
<p:layout style="min-width:300px;min-height:700px;" id="layout">
<p:layoutUnit position="east" resizable="true" size="300" minSize="40" maxSize="300">
<p:panelMenu style="width:200px">
<p:submenu label="Create Form">
<p:menuitem value="New Form" actionListener="" icon="ui-icon-disk" />
<p:menuitem value="Current Form" actionListener="" icon="ui-icon-arrowrefresh-1-w" />
<p:menuitem value="Form Templates" actionListener="" icon="ui-icon-arrowrefresh-1-w" />
</p:submenu>
<p:submenu label="Publish Form" >
<p:menuitem value="Home" actionListener="" ajax="false" icon="ui-icon-close"/>
<p:menuitem value="Docs" actionListener="" ajax="false" icon="ui-icon-close"/>
</p:submenu>
<p:submenu label="Users Profile">
<p:menuitem value="Add New User" actionListener="" ajax="false" icon="ui-icon-close"/>
<p:menuitem value="Edit User Profile" actionListener="" ajax="false" icon="ui-icon-close"/>
<p:menuitem value="Remove Users" actionListener="" ajax="false" icon="ui-icon-close"/>
<p:menuitem value="View Users Report" actionListener="" ajax="false" icon="ui-icon-close"/>
</p:submenu>
<p:separator />
</p:panelMenu>
</p:layoutUnit>
<p:layoutUnit position="center">
<h1><font size = "6"><h:outputLabel for="createform" value="Create New Form"/></font></h1>
<hr width="98%"></hr>
<table>
<tr>
<td width="30%"><pre><h:outputLabel for="name" value="Name of the form : " /></pre></td>
<td align="left"><p:inputText id="name" value="#{questionMB.formName}" label="Name of the form">
</p:inputText>
<p:message id="formMsg" for="name" display="icon"/>
</td>
</tr>
<tr>
<td width="30%"><pre><h:outputLabel for="desc" value="Description of the form : " /></pre></td>
<td align="left"><p:inputTextarea rows="4" cols="60" value="#{questionMB.formDesc}"/>
</td>
</tr>
<tr>
<td width="30%"><pre><h:outputLabel for="question" value="Question : " /></pre></td>
<td align="left">
<p:accordionPanel>
<p:tab title="Godfather Part I">
<h:panelGrid columns="2" cellpadding="10">
<p:inputText id="question" value="#{questionMB.questionText}">
<f:validateLength minimum="5" />
<p:ajax event="blur" update="questionMsg" />
</p:inputText>
<p:message id="questionMsg" for="question" display="icon"/>
</h:panelGrid>
</p:tab>
</p:accordionPanel>
</td>
</tr>
<tr>
<td width="30%"><pre><h:outputLabel for="answer" value="Answer Type : " /></pre></td>
<td align="center">
<h:panelGrid columns="2" rows="1" style="margin-bottom:10px" cellpadding="5">
<p:selectOneRadio id="options" value="#{questionMB.answerType}">
<f:selectItem itemLabel="Text field" itemValue="Text field" />
<f:selectItem itemLabel="Combo box" itemValue="Combo box" />
<f:selectItem itemLabel="Radio button" itemValue="Radio button" />
<f:selectItem itemLabel="Check box" itemValue="Check box" />
<f:selectItem itemLabel="Date box" itemValue="Date box" />
<f:selectItem itemLabel="Y/N Button" itemValue="Y/N Button" />
</p:selectOneRadio>
</h:panelGrid>
</td>
</tr>
<tr></tr><tr></tr><tr></tr>
<tr>
<td></td><td></td>
<td><p:commandButton id="addNewQuestion" value="Add New Question" action="#{questionMB.addNewQuestion}" ajax="true"/>
</td>
</tr>
<tr>
<td></td><td></td>
<td><p:commandButton id="addQuestion" value="Save" action="#{questionMB.addQuestion}" ajax="true"/>
<p:commandButton id="submitQuestion" value="Submit" action="#{questionMB.saveandsubmitForm}" ajax="false"/></td>
</tr>
</table>
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
</html>
You get that error because p:panelMenu is not in 3.3.1 version. It is introduced in 3.4.
Check the documention of 3.3.1 here