I am aware that nesting is a problem with form tags. However, my page does not have nested forms. I have one form (id="menuForm") to enclose the p:menu. Next, I have a form (id="locationForm") lower in the page. I have checked the html source that is output, and there is no nesting happening.
I have one p:commandButton that I want to use to submit the form. It works occasionally, but not all of the time. Sometimes, the method fires and other times it doesn't. Can anyone poing out what I'm doing wrong?
Also--If I comment out the menu form completely it works as intended.
Thanks.
Action Method:
public String insertLocationAction(){
System.out.println("******* Method Fired.");
DatabaseManager.insertLocation(newLocation);
return "locations";
}
XHTML Page:
<?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://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<f:view>
<ui:debug rendered="#{facesContext.application.projectStage eq 'Development'}"/>
<h:head />
<p:messages />
<p:layout fullPage="true">
<p:layoutUnit position="west" size="260" header="Menu" resizable="false" closable="false">
<h:form id="menuForm">
<p:menu style="width: 240px;" >
<p:submenu label="Locations" style="width: 240px;">
<p:menuitem value="All Locations" outcome="/pages/locations.xhtml" style="width: 240px;" />
<p:menuitem value="Create New" action="#{locationBackingBean.addLocationAction}" style="width: 240px;" />
</p:submenu>
<p:submenu label="Queries" style="width: 240px;">
<p:menuitem value="Product Group Sales" outcome="/pages/productGroupSales.xhtml" style="width: 240px;" />
<p:menuitem value="Product Line Sales" outcome="/pages/productLineSales.xhtml" style="width: 240px;" />
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:form id="locationform" enctype="multipart/form-data">
<p:growl id="growl" showDetail="true" />
<p:panelGrid columns="2">
<f:facet name="header">Enter New Location Details</f:facet>
<h:outputLabel for="locationName" value="Location Name:" /> <p:inputText id="locationName" value="#{locationBackingBean.newLocation.locationName}" size="100" />
<h:outputLabel for="street1" value="Street Address1:" /> <p:inputText id="street1" value="#{locationBackingBean.newLocation.street1}" size="100"/>
<h:outputLabel for="street2" value="Street Address2:" /><p:inputText id="street2" value="#{locationBackingBean.newLocation.street2}" size="100"/>
<h:outputLabel for="city" value="City:" /><p:inputText id="city" value="#{locationBackingBean.newLocation.city}" size="40" />
<h:outputLabel for="state" value="State:" /><p:inputText id="state" value="#{locationBackingBean.newLocation.state}" size="2" />
<h:outputLabel for="country" value="Country:" /><p:inputText id="country" value="#{locationBackingBean.newLocation.country}" size="20" />
<h:outputLabel for="phone" value="Phone:" /><p:inputText id="phone" value="#{locationBackingBean.newLocation.phone}" size="15" />
<h:outputLabel for="locationType" value="Type:" /><p:inputText id="locationType" value="#{locationBackingBean.newLocation.locationType}" />
</p:panelGrid>
<p:commandButton action="#{locationBackingBean.insertLocationAction}" ajax="false" value="Save" />
</h:form>
</p:layoutUnit>
</p:layout>
</f:view>
</html>
Refer to: http://www.primefaces.org/docs/vdl/4.0/primefaces-p/commandButton.html
By default the p:commandButton processes the whole 'view'.
Add process=":locationform" to the commandButton might just need "locationform" (depends on your selector working and nested jsf components etc..
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
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.
every time if an error occurs, I get the following error message in the error page.
This is my page.xhtml :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>Esprit4Olap</title>
</f:facet>
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />
<style type="text/css">
.nestedUnit {
border:0px none !important;
}
.ui-layout-center .ui-layout-resizer {
border:1px solid #A8A8A8 !important;
}
.ui-tree-item span {
float:left !important;
}
.ui-tree {
border:0px none !important;
}
.ui-tabs {
border:0px none !important;
}
</style>
</h:head>
<h:body>
<p:layoutUnit position="west" size="200" resizable="true" collapsible="true" header="TreeNode">
<h:form>
<p:tree value="#{SchemaMan.shemaBoxses}" var="SchemaMan" selectionMode="Singel" selection="#{SchemaMan.shemaBoxse}" style="width:170px">
<p:treeNode icon="ui-icon-mail-closed">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="i" icon="ui-icon-mail-closed">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="s" icon="ui-icon-transfer-e-w">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="t" icon="ui-icon-trash">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="j" icon="ui-icon-alert">
<h:outputText value="SchemaMan"/>
</p:treeNode>
</p:tree>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<p:layout>
<p:layoutUnit position="north" size="50%" resizable="true" styleClass="nestedUnit">
<p:tabView>
<p:tab title="Schema">
<h:form>
<p:panelGrid columns="2">
<p:inputText id="Schemaname" required="true" label="SchemaName" size="40" value="#{SchemaMan.nameSchema}" />
<p:inputText id="DescSchema" required="true" label="DescSchema" size="40" value="#{SchemaMan.descSchema}" />
<p:inputText id="RoleSchema" required="true" label="RoleSchema" size="40" value="#{SchemaMan.roleSchema}" />
<p:inputText id="CaptionSchema" required="true" label="CaptionSchema" size="40" value="#{SchemaMan.captionSchema}" />
</p:panelGrid>
<p:commandButton value="Add" type="button" ></p:commandButton>
</h:form>
</p:tab>
</p:tabView>
</p:layoutUnit>
</p:layout>
</p:layoutUnit>
</h:body>
</f:view>
</html>
The error itself, however, is not related to javax.faces.component.UIOutput. It can be just any error in one of the managed beans.
and i got this erros exception:
javax.servlet.ServletException: javax.faces.component.UIOutput cannot be cast to org.primefaces.component.layout.Layout
javax.faces.webapp.FacesServlet.service(FacesServlet.java:606)
Any help is appreciated.
Thanks,
i make it like you told me :
<h:body>
<p:layout>
<p:layoutUnit position="west" size="200" resizable="true" collapsible="true" header="TreeNode">
<h:form>
<p:tree value="#{SchemaMan.shemaBoxses}" var="SchemaMan" selectionMode="Singel" selection="#{SchemaMan.shemaBoxse}" style="width:170px">
<p:treeNode icon="ui-icon-mail-closed">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="i" icon="ui-icon-mail-closed">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="s" icon="ui-icon-transfer-e-w">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="t" icon="ui-icon-trash">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="j" icon="ui-icon-alert">
<h:outputText value="SchemaMan"/>
</p:treeNode>
</p:tree>
</h:form>
</p:layoutUnit>
</p:layout>
<p:layout>
<p:layoutUnit position="center">
<p:layoutUnit position="north" size="50%" resizable="true" styleClass="nestedUnit">
<p:tabView>
<p:tab title="Schema">
<h:form>
<p:panelGrid columns="2">
<p:inputText id="Schemaname" required="true" label="SchemaName" size="40" value="#{SchemaMan.nameSchema}" />
<p:inputText id="DescSchema" required="true" label="DescSchema" size="40" value="#{SchemaMan.descSchema}" />
<p:inputText id="RoleSchema" required="true" label="RoleSchema" size="40" value="#{SchemaMan.roleSchema}" />
<p:inputText id="CaptionSchema" required="true" label="CaptionSchema" size="40" value="#{SchemaMan.captionSchema}" />
</p:panelGrid>
<p:commandButton value="Add" type="button" ></p:commandButton>
</h:form>
</p:tab>
</p:tabView>
</p:layoutUnit>
</p:layoutUnit>
</p:layout>
</h:body>
but i get this exception now :
exception
javax.servlet.ServletException: JBAS011048: Failed to construct component instance
javax.faces.webapp.FacesServlet.service(FacesServlet.java:606) !!
You have two p:layout ? Every p:layoutUnit should be inside a whole p:layout. Take into account that you can nest a p:layout inside a p:layoutUnit to make more complex layouts (and of course, every p:layout HAS to have a p:layoutUnit position="center":
<p:layout>
<p:layoutUnit position="west" size="200">
...
</p:layoutUnit>
<p:layoutUnit position="center">
<p:layout>
<p:layoutUnit position="north" size="100">
...
</p:layoutUnit>
<p:layoutUnit position="center">
...
</p:layoutUnit>
</p:layout>
</p:layoutUnit>
...
</p:layout>
Remember that if you use a p:layout for your whole page, you might be better off with p:layout fullPage="true". Cheers!
I'm attempting to use a t:radio in my rich:datatable but it's always complaining about the fact that it can't find the component. I did some googling and I have to declare the full name, but I actually think I'm doing that.
Anyone can point me what I'm doing wrong? The code (I'm not going to give a minified version because I'm guessing it's going wrong with the compositions):
letterDetailTemplate.xhtml:
<h:form id="generateLetterForm">
<ui:include src="addStandardLetterMain.xhtml" />
<ui:include src="addStandardLetterText.xhtml" />
<ui:include src="buttons.xhtml" />
</h:form>
addStandardLetterText.xhtml (the radio button is over here, in the slrDataTable):
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:e="http://minfin.regondes2/entity"
xmlns:ccffdecorate="http://java.sun.com/jsf/composite/ccffdecorate"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:l="http://minfin.regondes2/layout"
xmlns:o="http://omnifaces.org/ui"
xmlns:t="http://myfaces.apache.org/tomahawk">
<ui:param name="entityBB" value="#{letterBB}" />
<ui:param name="type" value="Dossier.Letter" />
<l:screenzone id="addStandardLetterTextPanel"
title="#{AppMessages[type.concat('.addStandardLetterText.title')]}">
<h:outputStylesheet name="letterText.css" library="stylesheets" />
<h:outputScript name="letter.js" library="scripts" />
<a4j:region>
<a4j:outputPanel id="letterTextPanel">
<h:inputTextarea id="letterText" name="letterText"
value="#{entityBB.entity.text}" styleClass="letterText" />
<script type="text/javascript">
language: '#{screen.locale.language}'
CKEDITOR.replace( 'generateLetterForm:letterTex', {
});
</script>
</a4j:outputPanel>
<h:panelGroup styleClass="rButtonPanelAlignLeft" layout="block"
rendered="#{dossierContextBB.dossierContext == 'EDIT'}">
<a4j:commandButton
value="#{AppMessages[type.concat('.add.region')]}"
actionListener="#{entityBB.findAvailableRegionStandardLetters()}"
render="slrPopupFormPanel" limitRender="true" status="ajaxStatus"
onclick="LETTER.CKUpdate()"
oncomplete="#{rich:component('addStandardLetterRegion')}.show();" />
</h:panelGroup>
</a4j:region>
<rich:popupPanel id="addStandardLetterRegion" modal="true"
onmaskclick="#{rich:component('addStandardLetterRegion')}.hide()"
autosized="true">
<f:facet name="header">
<h:outputText
value="#{AppMessages['Dossier.Letter.StandardLetter.region.popup.title']}" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('addStandardLetterCentrum')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<a4j:outputPanel id="slrPopupFormPanel">
<t:selectOneRadio id="slrOption"
value="#{standardLetterBB.selected}" layout="spread"
converter="#{standardLetterBB.converter}">
<f:selectItems value="#{entityBB.availableStandardLetterText}"
var="standardLetter" itemLabel="" itemValue="#{standardLetter}" />
</t:selectOneRadio>
<rich:dataTable id="slrDataTable"
value="#{entityBB.availableStandardLetterText}"
var="standardLetter" noDataLabel="No standard letters found"
rowKeyVar="index">
<rich:column headerClass="ListTitle">
<t:radio for="generateLetterForm:slrDataTable:slrOption" index="#{index}" />
</rich:column>
<e:column entity="#{standardLetter.dossierType}" type="#{type}"
property="type" />
<e:column entity="#{standardLetter}" type="#{type}"
property="numbering" />
<e:columnTranslatable entity="#{standardLetter}" type="#{type}"
property="text" />
</rich:dataTable>
</a4j:outputPanel>
<div class="rButtonPanel">
<h:commandButton value="#{AppMessages['general.action.add']}">
<a4j:ajax event="click" execute="generateLetterForm"
listener="#{entityBB.addMotivationToReport}"
oncomplete="#{rich:component('addStandardLetterRegion')}.hide()"
render="reportMotivationTextPanel" limitRender="true" />
</h:commandButton>
<a4j:commandButton value="#{AppMessages['general.action.cancel']}"
onclick="#{rich:component('addStandardLetterRegion')}.hide()"
limitRender="true" immediate="true" bypassUpdates="true" />
</div>
</rich:popupPanel>
</l:screenzone>
Note that this view works and renders and displays the data from the backingbean when I remove the t:radio.
The errormessage I'm getting is:
SEVERE: java.lang.IllegalStateException: Could not find component 'generateLetterForm:slrDataTable:slrOption' (calling findComponent on component 'generateLetterForm:slrDataTable:0:j_idt258')
javax.faces.FacesException: java.lang.IllegalStateException: Could not find component 'generateLetterForm:slrDataTable:slrOption' (calling findComponent on component 'generateLetterForm:slrDataTable:0:j_idt258')
Change for="generateLetterForm:slrDataTable:slrOption" to for=":generateLetterForm:slrOption" and specify id for your t:radio in datatable also. Don't forget the ":" before generateLetterForm.
I have primeface p:panel on jsf file. I apply background color with the following style on the template page (anasayfa.xhtml).
<h:head>
<style type="text/css">
.bos{background-color:red;}
</style>
</h:head>
My Jsf Page with viewscoped backing bean:
<ui:composition template="/anasayfa.xhtml">
<ui:define name="ortaAlan">
...
<p:panel styleClass="bos">
...
</p:panel>
</ui:define>
</ui:composition>
When I load page background color is seen for very shortly, then becomes transparent. CTRL+F5 has the same effect.
What is wrong here?
Thanks for helps in advance
jsf page:
<!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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="/anasayfa.xhtml">
<ui:define name="ortaAlan">
<p:panel id="rezerveleriniz">
<h:outputText value="#{rezervasyonBean.bugun.time}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText> : Rezervasyon Saatleri <br/>
<ui:repeat var="r" value="#{rezervasyonBean.kullaniciRezervasyonSaatleri}">
#{r.saatAraligi}<br/>
</ui:repeat>
</p:panel>
<h:form id="aaa">
<p:panel>
<p:panel style="float:left;">
<h:panelGrid columns="1">
<ui:repeat var="rs" value="#{rezervasyonBean.rezervasyonSaatleriListesi}">
**// !!!!!!!!!!!! Problem is here !!!!!!!!**
<p:panel styleClass="#{rezervasyonBean.isRezervasyonOnThisDay(rs) ? 'dolu' : 'bos' }">
#{rs.saatAraligi}
<h:commandButton action="#{rezervasyonBean.sec(rs,'1')}" value="+" update=":rezerveleriniz" disabled="#{rezervasyonBean.isRezervasyonOnThisDay(rs)}" />
</p:panel>
</ui:repeat>
</h:panelGrid>
<h:commandButton action="#{rezervasyonBean.kaydet()}" value="Kaydet" />
</p:panel>
<div style="clear:both;"></div>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>
template:
<!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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Görev Takip Sistemi</title>
<style type="text/css">
.ui-widget,.ui-widget .ui-widget {
font-size: 12px !important;
font-family:Arial;
}
.bos{
background-color:red;
}
.dolu{
background-color:yellow;
}
#topPanel {z-index:2 !important; }
#topPanel div{overflow:visible;}
.colStyle_panelGridForGorev{
width:225px;
}
.colStyle_panelGridForProfil{
width:100px;
}
</style>
</h:head>
<body>
<p:growl for="growlForAnasayfa" showDetail="true" life="3000" autoUpdate="true"/>
<h:form>
<p:idleMonitor timeout="900000">
<p:ajax event="idle" listener="#{anasayfaBean.indirectLogout}"/>
</p:idleMonitor>
</h:form>
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();" />
<p:dialog modal="true" widgetVar="statusDialog" header="Status"
draggable="false" closable="false">
<p:graphicImage value="/images/statusBar.gif" />
</p:dialog>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="50" id="topPanel" style="border:0px">
<h:form id="formAnaSayfaToolbar">
<p:toolbar>
<p:toolbarGroup align="left">
<p:commandButton type="submit" value="#{anasayfaBean.kullanici.kullaniciAdi} #{anasayfaBean.kullanici.kullaniciSoyadi}"
style="margin-left:200px;" action="/profil.xhtml?faces-redirect=true" ajax="false"/>
<p:commandButton type="submit" value="Gruplarım"
action="/kullanici/gruplarim.xhtml?faces-redirect=true" ajax="false" rendered="#{!anasayfaBean.daireBaskani}"/>
<p:commandButton type="submit" value="Görevlerim"
action="/gorevListele.xhtml?faces-redirect=true" ajax="false" rendered="#{!anasayfaBean.daireBaskani}"/>
<p:commandButton type="submit" value="Kullanıcı İşlemleri"
action="/daireBaskani/kullanici.xhtml?faces-redirect=true" ajax="false" rendered="#{anasayfaBean.daireBaskani}"/>
<p:commandButton type="submit" value="Grup İşlemleri"
action="/daireBaskani/grup.xhtml?faces-redirect=true" ajax="false" rendered="#{anasayfaBean.daireBaskani}"/>
<p:menuButton value="Görev İşlemleri" rendered="#{anasayfaBean.daireBaskani}">
<p:menuitem value="Yeni Görev Ekle" url="/daireBaskani/gorevEkle.btk" />
<p:menuitem value="Gorevleri Listele" url="/gorevListele.btk" />
</p:menuButton>
<p:menuButton value="Admin Paneli" rendered="#{anasayfaBean.admin}">
<p:menuitem value="Birim İşlemleri" url="/admin/birim.btk" />
<p:menuitem value="Ünvan İşlemleri" url="/admin/unvan.btk" />
</p:menuButton>
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:commandButton type="submit" value="Çıkış" icon="ui-icon-close"
action="#{anasayfaBean.logout}" ajax="false" style="margin-right:200px;"/>
</p:toolbarGroup>
</p:toolbar>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="ortaAlan">
<h:outputText value="Yukarıdaki menüden yapmak istediğiniz işlemi seçiniz." />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit position="south" size="30" resizable="true" style="border-width:0px;">
<h:form style="text-align:center; font-size:13px;">
<h:outputText value="Bilişim Sistemleri Dairesi © 2012" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="200" id="eastPanel" style="border:0px">
</p:layoutUnit>
<p:layoutUnit position="west" size="200" id="westPanel" style="border:0px">
</p:layoutUnit>
</p:layout>
</body>
</html>