In this page this part get called twice. I can't see the reason for this. The problem this leads to is that the selections in the selectonemenu will get reset and then return the incorrect result for the second call.
ServiceSeries is a session bean.
Can anyone tell me why this double call happens?
<c:forEach var="list" items="#{serviceSeries.getSeriesForPlayerInfo(club.name, player.stringID, st, calendarBean)}">
<!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:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/WEB-INF/templates/template.xhtml">
<ui:define name="content">
<h:form>
<div id="left">
<h:commandLink action="player" value="Gå till spelare" />
<br />
<h:commandLink action="club" value="Gå till Klubb" />
<br />
<h:commandLink action="serieType" value="Gå till Serie typ" />
<br />
<h:commandLink action="serie" value="Gå till En serie" />
<br />
<h:commandLink action="serieTotal" value="Gå till Serie Total" />
<br />
<h:commandLink action="showAverages" value="Gå till snittlista" />
<br />
</div>
<div id="right">
<div id="pageHeader">Snitt information</div>
<h:panelGrid columns="2">
Spelare
<p:selectOneMenu value="#{player}"
converter="playerConverter" id="playerList">
<f:selectItem itemLabel="---" noSelectionOption="true" />
<f:selectItems value="#{servicePlayer.allPlayers}"
var="n"
itemValue="#{n}"
itemLabel="#{n.combinedName}"
itemLabelEscaped="true"/>
</p:selectOneMenu>
<h:outputText value="Klubb"></h:outputText>
<p:selectOneMenu id="ClubMenu" value="#{club.name}">
<f:selectItems value="#{serviceHCP.clubs}" />
</p:selectOneMenu>
<h:outputText value="Serietyp"></h:outputText>
<p:selectOneMenu value="#{st}"
converter="serieTypeConverter" id="serieTypeList">
<f:selectItem itemLabel="---" noSelectionOption="true" />
<f:selectItems value="#{serviceSerieType.serieTypes}"
var="st"
itemValue="#{st}"
itemLabel="#{st.serie_type}"
itemLabelEscaped="true"/>
</p:selectOneMenu>
<h:outputText value="Startdatum"></h:outputText>
<p:calendar value="#{calendarBean.date1}" id="popupButtonCal" showOn="button" pattern="yyyy-MM-dd HH:mm:ss" >
</p:calendar>
<h:outputText value="Slutdatum"></h:outputText>
<p:calendar value="#{calendarBean.date2}" id="popupButtonCal2" showOn="button" pattern="yyyy-MM-dd HH:mm:ss" >
</p:calendar>
<h:outputText value=""></h:outputText>
<h:commandButton value="Visa lista" action="showSeriesInfo">
</h:commandButton>
</h:panelGrid>
</div>
<div id="right">
Players
<br />
<!-- h:form -->
<h:panelGrid columns="9" border="1" cellpadding="3">
<h:outputText value="Namn" />
<h:outputText value="ID" />
<h:outputText value="Klubb" />
<h:outputText value="Datum" />
<h:outputText value="typ" />
<h:outputText value="Info" />
<h:outputText value="Antal serier" />
<h:outputText value="Total" />
<h:outputText value="Snitt" />
<c:forEach var="list" items="#{serviceSeries.getSeriesForPlayerInfo(club.name, player.stringID, st, calendarBean)}">
<h:outputText value=" #{list[0].toString() }" />
<h:outputText value=" #{list[1].toString() }" />
<h:outputText value="#{serie.getSerieDateString(list[2]) }" />
<h:outputText value="#{list[3].toString()}"/>
<h:outputText value=" #{list[4].toString() }" />
<h:outputText value=" #{list[5].toString() }" />
<h:outputText value=" #{list[6].toString() }" />
<h:outputText value=" #{list[7].toString() }" />
<h:outputText value=" #{list[8].toString() }" />
</c:forEach>
</h:panelGrid>
</div>
</h:form>
</ui:define>
</ui:composition>
</html>
If I understand your problem description correctly, its expected behavior; JSF has 6 lifecycles for a request and the same method may be invoked in each and every one of them; in my experience it sometimes happens twice and sometimes happens three times in a single request depending on which phases JSF invokes and which ones it skips.
Its your job to know that this can happen, when it can happen (by studying the lifecycle phases) and design your code accordingly, for example by ensuring that the methods return exactly the same thing for each and every lifecycle phase. There are multiple strategies that may apply, such as utilizing specific scopes (view, session, conversation), through lazy initialization or by using a bean init method annotated with PostConstruct to do one time initialization for a bean.
If you need further assistance, I suggest you post the relevant server side (Java) code too. the problem originates there somewhere.
This might help: http://balusc.blogspot.nl/2006/09/debug-jsf-lifecycle.html
Related
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'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.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<title>Community</title>
</h:head>
<h:body>
<rich:panel>
<f:facet name="header">
<h:outputText value="Login form" />
</f:facet>
<h:form id="loginform">
<h:panelGrid columns="2" width="210">
<rich:validator id="loginformvalidate">
<h:outputText value="Username:" />
<h:inputText label="username" id="username" value="#{loginMB.username}" required="true" requiredMessage="user name is requried">
<f:validateLength minimum="5" />
</h:inputText>
<h:outputText value="Password" />
<h:inputSecret label="password" id="password" value="#{loginMB.password}" requiredMessage="password is requried">
<f:validateLength minimum="8" maximum="16" />
</h:inputSecret>
</rich:validator>
<rich:notifyMessages stayTime="2000" nonblocking="true" />
<f:facet name="footer">
<a4j:commandButton value="Login"/>
</f:facet>
</h:panelGrid>
</h:form>
</rich:panel>
<rich:panel>
<h:form id="Questions">
<rich:dataTable value="#{contentBean.questions}" var="list" id="question" >
<rich:column>#{list.QUserid.fname}</rich:column><br/>
<rich:column> <rich:collapsiblePanel expanded="false" header="#{list.questionValue}" switchType="client" onclick="#{contentBean.onclick(list.qid)}" >
<rich:accordion id="answer" switchType="ajax">
<a4j:repeat value="#{contentBean.ansList}" var="skinName" >
<rich:accordionItem name="#{skinName.ansDate}">
#{skinName.ansValue}
</rich:accordionItem>
</a4j:repeat>
</rich:accordion></rich:collapsiblePanel></rich:column>
<br/><rich:column>
<h:commandButton value="Show popup">
<rich:componentControl target="popup" operation="show">
<a4j:param noEscape="true" value="event" />
<rich:hashParam>
<f:param name="width" value="500" />
<f:param name="height" value="300" />
<f:param name="minWidth" value="300" />
<f:param name="minHeight" value="150" />
<a4j:param noEscape="true" name="left" value="(jQuery(window).width()/2)-250" />
<a4j:param noEscape="true" name="top" value="(jQuery(window).height()/2)-150" />
</rich:hashParam>
</rich:componentControl>
</h:commandButton>
<rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="Add your answer" />
</f:facet>
<p>Enter your answer in less than 4000 char</p>
<p>
<h:inputTextarea id="answertxt" value="#{contentBean.ansvalue}" required="true" requiredMessage="this feild is required"/>
<h:commandButton value="Submit" onclick="#{rich:component('popup')}.hide(); return false;">
<a4j:actionListener for="Submit" listener="#{contentBean.addAnswer(list.QUserid,list.QGroupid, list)}"/>
</h:commandButton>
</p>
</rich:popupPanel>
</rich:column>
</rich:dataTable>
</h:form>
</rich:panel>
</h:body>
</html>
I am new to jsf and richfaces i am tring to create two panels in singles with different forms can i do that? the page worked until i have added new button which uses action listener in a popup window
i am getting following error
INFO: WEB0671: Loading application [My_community] at [/My_community]
INFO: My_community was successfully deployed in 19,911 milliseconds.
SEVERE: /index.xhtml #21,61 id="loginformvalidate" Unhandled by MetaTagHandler for type org.richfaces.component.behavior.ClientValidatorImpl
the page runs but submit button on popup generated action listener is not working
please let me know if i am doing any thing wrong
Are you sure, rich:validator can have children ? I think it should be inside the fields you want to validate:
<h:inputText label="username" id="username" value="#{loginMB.username}" required="true" requiredMessage="user name is requried">
<f:validateLength minimum="5" />
<rich:validator/>
</h:inputText>
Im trying to create a page that uses the rich:fileUpload, to (surprisingly) upload an image, once the upload is completed I want to 'hide' the rich:fileUpload component and display the jQuery plugin jCrop so that the image can be cropped before saving. once the image is saved from the crop selected, the two components should toggle their viewability again.
However, I dont appear to be able to get the rich:fileUpload to 'hide'. the jCrop component displays fine, as does the jCrop functionality. but no matter what I try rich:fileUpload is still displayed on the screen. Actually if I add rendered="#{!uploadAndCrop.newImage}" to the rich:panel that the rich:fileUpload is in, nothing seems to update. I have to remove this for the jCrop component to appear.
My code is below, it is a little messy as ive tried so many different things. Would be extremely grateful if someone could point me in the right direction with this, or advise a better way of doing it.
Thanks
<ui:define name="head">
<link href="stylesheet/jquery.Jcrop.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="scripts/jquery.Jcrop.js"></script>
<script language="Javascript">// <![CDATA[ //
{
var $J = jQuery.noConflict();
}
//]]> //</script>
</ui:define>
<ui:define name="body">
<h:form>
<h:panelGrid columns="2" columnClasses="top,top">
<h:panelGroup id="uploadgroup">
<a4j:outputPanel id="uploadpanel">
<rich:panel rendered="#{!uploadAndCrop.newImage}">
<rich:fileUpload fileUploadListener="#{uploadAndCrop.listener}"
maxFilesQuantity="#{uploadAndCrop.uploadsAvailable}" id="upload"
immediateUpload="#{uploadAndCrop.autoUpload}"
acceptedTypes="jpg, gif, png, bmp"
allowFlash="#{uploadAndCrop.useFlash}" listHeight="80px">
<ui:remove>
onfileuploadcomplete="Richfaces.showModalPanel('croppanel');">
</ui:remove>
<a4j:support event="onuploadcomplete"
reRender="info, uploadgroup, cropgroup" />
</rich:fileUpload>
<h:outputText value="#{uploadAndCrop.newImage}" id="newimage" />
<a onclick="Richfaces.showModalPanel('croppanel');" href="#">Show
ModalPanel</a>
</rich:panel>
</a4j:outputPanel>
</h:panelGroup>
<h:panelGroup id="info">
<rich:panel bodyClass="info" rendered="#{!uploadAndCrop.newImage}">
<f:facet name="header">
<h:outputText value="Uploaded Image Preview" />
</f:facet>
<rich:dataGrid columns="1" value="#{uploadAndCrop.files}"
var="file" rowKeyVar="row">
<rich:panel bodyClass="rich-laguna-panel-no-header">
<h:panelGrid columns="2">
<a4j:mediaOutput element="img" mimeType="#{file.mime}"
createContent="#{uploadAndCrop.paint}" value="#{row}"
style="width:156x; height:71px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
</h:panelGrid>
</rich:panel>
</rich:dataGrid>
</rich:panel>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Clear Uploaded Image" />
</h:panelGroup>
<h:panelGroup id="cropgroup">
<rich:panel rendered="#{uploadAndCrop.newImage}">
<f:facet name="header">
<h:outputText value="Crop Image" />
</f:facet>
<a4j:outputPanel id="crop" layout="inline">
<rich:jQuery selector="#cropbox" timing="immediate"
query="Jcrop()" />
<a4j:mediaOutput element="img"
mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox"
createContent="#{uploadAndCrop.paintCrop}" value="null"
style="width:312; height:142px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Crop" />
</a4j:outputPanel>
</rich:panel>
</h:panelGroup>
</h:panelGrid>
<h:commandButton id="save" value="Save"
action="#{uploadAndCrop.save}">
<f:param name="cmsCompanyIdCom" value="" />
</h:commandButton>
<s:button id="cancelEdit" value="Cancel" propagation="end"
view="/CmsCompany.xhtml">
<f:param name="cmsCompanyIdCom" value="" />
</s:button>
</h:form>
<ui:remove>
<rich:modalPanel id="croppanel" width="350" height="240">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Crop Image"></h:outputText>
</h:panelGroup>
</f:facet>
<f:facet name="image">
<ui:remove>
<h:panelGroup>
<h:outputText value="close" />
<rich:componentControl for="croppanel" attachTo="close"
operation="hide" event="onclick" />
</h:panelGroup>
</ui:remove>
</f:facet>
<rich:panel rendered="#{uploadAndCrop.newImage}">
<ui:remove>
<f:facet name="header">
<h:outputText value="Crop Image" />
</f:facet>
</ui:remove>
<a4j:outputPanel id="crop" layout="inline">
<a4j:mediaOutput element="img"
mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox"
createContent="#{uploadAndCrop.paintCrop}" value="null"
style="width:312; height:142px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
<ui:remove>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Crop" />
</ui:remove>
</a4j:outputPanel>
</rich:panel>
<a onclick="Richfaces.hideModalPanel('croppanel');" href="#">Hide
ModalPanel</a>
</rich:modalPanel>
</ui:remove>
</ui:define>
I dont know how is your uploadAndCrop.newImage method, but you can just use a boolean and sets it to false on the fileUploadListener.
But reRender the <a4j:outputPanel id="uploadpanel">, not the <rich:fileUpload> or the group.
<a4j:outputPanel id="uploadpanel" rendered="#{bean.fileUpRendered}">
(...)
<rich:fileUpload...
<a4j:support event="onuploadcomplete"
reRender="info, uploadpanel, cropgroup" />
</rich:fileUpload>
(...)
</a4j:outputPanel>
Bean:
Boolean fileUpRendered;
(...)
public void listener(UploadEvent event) throws Exception {
try {
(...)
fileUpRendered = false;
catch (...) { (...) }
}
//Get set
public get/set fileUpRendered() { }...
I got a problem. I have a bean CreateProjectBean which is RequestScope bean. I want to use Prime Faces component called Collector so i can dynamicly change in view createProject table groupRoleAdapters which is a field of CreateProjectBean. Unforuntely every time i click "add" or "remove" in collector, there is a new request being sent to bean, which means, that GroupRoleAdapters is being created once more - of course empty.
My collector code:
<p:panel header="Add group">
<h:panelGrid columns="2">
<h:outputLabel value="Group name: *" for="txt_title"></h:outputLabel>
<h:selectOneMenu id="groupMenu"
value="#{createProjectBean.groupRoleAdapter.groupName}">
<f:selectItems value="#{createProjectBean.groupNames}"
var="group" itemValue="#{group}" itemLabel="#{group}" />
</h:selectOneMenu>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:groupMenu" />
<h:outputLabel value="Role name: *" for="txt_title"></h:outputLabel>
<h:selectOneMenu id="roleMenu"
value="#{createProjectBean.groupRoleAdapter.roleName}">
<f:selectItems value="#{createProjectBean.roleNames}" var="role"
itemValue="#{role}" itemLabel="#{role}" />
</h:selectOneMenu>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:roleMenu" />
<f:verbatim>
<br />
</f:verbatim>
<p:commandButton value="Add" update="creationForm:out"
action="#{createProjectBean.reinit}">
<p:collector value="#{createProjectBean.groupRoleAdapter}"
addTo="#{createProjectBean.selectedGroupRoleAdapters}"/>
</p:commandButton>
</h:panelGrid>
</p:panel>
<f:verbatim>
<br />
</f:verbatim>
<p:outputPanel id="out">
<p:dataTable value="#{createProjectBean.selectedGroupRoleAdapters}"
var="groupRoleAdapter">
<p:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{groupRoleAdapter.groupName}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Role" />
</f:facet>
<h:outputText value="#{groupRoleAdapter.roleName}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Operation" />
</f:facet>
<p:commandLink value="Remove" update="creationForm:out">
<p:collector value="#{groupRoleAdapter}" removeFrom="#{createProjectBean.selectedGroupRoleAdapters}" />
</p:commandLink>
</p:column>
</p:dataTable>
</p:outputPanel>
I'd like to use the same instance of bean while adding and removing groupRoleAdapters from list selectedGroupRoleAdapters (represented by collector table), but create new instance of bean every time i try to create new project, so changing scope to sessionScope is not what i can accept.
Thanks in advance for every help.
I attach full code of that view:
<!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://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.prime.com.tr/ui">
<ui:composition template="/templates/template.xhtml">
<ui:define name="head">
<title>Create Project</title>
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/styles/style.css" />
</ui:define>
<ui:define name="content">
<div class="mainTable">
<center><f:view>
<h:outputText id="error" rendered="false" />
<h:message styleClass="errorMessage" for="error" />
<h:form id="creationForm">
<h:panelGrid columns="2" width="420">
<h:panelGroup width="300">
<h:outputLabel styleClass="formLabel" value="Name: "></h:outputLabel>
</h:panelGroup>
<h:panelGroup>
<h:inputText styleClass="formField" id="name"
value="#{createProjectBean.project.name}" required="true">
<f:validateLength minimum="3" />
</h:inputText>
</h:panelGroup>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:name" />
<h:panelGroup>
<h:outputLabel styleClass="formLabel" value="Short Name: " />
</h:panelGroup>
<h:panelGroup>
<h:inputText styleClass="formField" id="shortname"
value="#{createProjectBean.project.shortname}" required="false">
<f:validateLength maximum="8" />
</h:inputText>
</h:panelGroup>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:shortname" />
<h:panelGroup>
<h:outputLabel styleClass="formLabel" value="Homepage: " />
</h:panelGroup>
<h:panelGroup>
<h:inputText styleClass="formField" id="homepage"
value="#{createProjectBean.project.homepage}" required="false">
</h:inputText>
</h:panelGroup>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:hostname" />
<h:panelGroup>
<h:outputLabel styleClass="formLabel" value="Description: " />
</h:panelGroup>
<h:panelGroup>
<h:inputTextarea styleClass="formField" id="description"
value="#{createProjectBean.project.description}" required="false"
cols="50" rows="10" />
</h:panelGroup>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:description" />
<h:panelGroup>
<h:outputLabel styleClass="formLabel" value="Plugins: " />
</h:panelGroup>
<h:selectManyListbox id="pluginBox"
value="#{createProjectBean.selectedPluginNames}">
<f:selectItems value="#{createProjectBean.pluginNames}"
var="plugin" itemValue="#{plugin}" itemLabel="#{plugin}" />
</h:selectManyListbox>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:pluginBox" />
<h:panelGroup>
<h:outputLabel styleClass="formLabel" value="Tags: " />
</h:panelGroup>
<h:selectManyListbox id="tagBox"
value="#{createProjectBean.project.tags}">
<f:selectItems value="#{createProjectBean.allTags}" var="tag"
itemValue="#{tag}" itemLabel="#{tag.name}" />
</h:selectManyListbox>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:tagBox" />
<f:verbatim>
<br />
</f:verbatim>
<p:panel header="Add group">
<h:panelGrid columns="2">
<h:outputLabel value="Group name: *" for="txt_title"></h:outputLabel>
<h:selectOneMenu id="groupMenu"
value="#{createProjectBean.groupRoleAdapter.groupName}">
<f:selectItems value="#{createProjectBean.groupNames}"
var="group" itemValue="#{group}" itemLabel="#{group}" />
</h:selectOneMenu>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:groupMenu" />
<h:outputLabel value="Role name: *" for="txt_title"></h:outputLabel>
<h:selectOneMenu id="roleMenu"
value="#{createProjectBean.groupRoleAdapter.roleName}">
<f:selectItems value="#{createProjectBean.roleNames}" var="role"
itemValue="#{role}" itemLabel="#{role}" />
</h:selectOneMenu>
<f:verbatim>
<br />
</f:verbatim>
<h:message styleClass="errorMessage" for="creationForm:roleMenu" />
<f:verbatim>
<br />
</f:verbatim>
<p:commandButton value="Add" update="creationForm:out"
action="#{createProjectBean.reinit}">
<p:collector value="#{createProjectBean.groupRoleAdapter}"
addTo="#{createProjectBean.selectedGroupRoleAdapters}"/>
</p:commandButton>
</h:panelGrid>
</p:panel>
<f:verbatim>
<br />
</f:verbatim>
<p:outputPanel id="out">
<p:dataTable value="#{createProjectBean.selectedGroupRoleAdapters}"
var="groupRoleAdapter">
<p:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{groupRoleAdapter.groupName}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Role" />
</f:facet>
<h:outputText value="#{groupRoleAdapter.roleName}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Operation" />
</f:facet>
<p:commandLink value="Remove" update="creationForm:out">
<p:collector value="#{groupRoleAdapter}"
removeFrom="#{createProjectBean.selectedGroupRoleAdapters}" />
</p:commandLink>
</p:column>
</p:dataTable>
</p:outputPanel>
<f:verbatim>
<br />
</f:verbatim>
<h:commandButton value="Create" styleClass="formButton"
action="#{createProjectBean.create}" />
</h:panelGrid>
</h:form>
</f:view></center>
</div>
</ui:define>
</ui:composition>
</html>
If you're already on JSF 2.0, just put the bean in view scope, by either #ViewScoped annotation or by <managed-bean-scope>view</managed-bean-scope> in faces-config.xml.
If you're still on JSF 1.x (which I'm afraid of since you're using those ugly JSF 1.0/1.1-mandatory <f:verbatim> tags), then you have to either put bean in session scope, eventually in combination with an unique request scoped parameter which is retained in subsequent requests by h:inputHidden or f:param, or to grab a 3rd party library with a component which is able to save the state of an entire request scoped bean for the subsequent request, like Tomahawk's t:saveState.