<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>
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.
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
I'm trying to render validation messages. The trick I'm working on is that the messages appear only after pressing Enter key (not after submit button!). After that it works correctly.
Here's what I did at the JSF side (some parts have been omitted for simplicity) :
<?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://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:sec="http://www.springframework.org/security/facelets/tags"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<body>
<ui:composition>
<h:form id="idForm">
<h:panelGrid width="100%"
rendered="#{not empty declarationReglementaireModel.detailCurrentDecReg.decReg.listLigneGldsDTO}">
<rich:extendedDataTable id="listGLD" iterationStatusVar="itGLD"
rows="50"
value="#{declarationReglementaireModel.detailCurrentDecReg.decReg.listLigneGldsDTO}"
var="ligneGLD" frozenColumns="1" style="height:300px; width:920px;"
selectionMode="none">
<rich:column width="35px">
<h:panelGrid columns="1" cellpadding="2">
<a4j:commandLink render="editGridGLD" execute="#this"
oncomplete="#{rich:component('modifGLD')}.show()">
<span class="icone icone-edit icone-align-center" />
<a4j:param value="#{itGLD.index}"
assignTo="#{declarationReglementaireModel.currentLigneGldIndex}" />
<f:setPropertyActionListener
target="#{declarationReglementaireModel.currentLigneGld}"
value="#{ligneGLD}" />
</a4j:commandLink>
</h:panelGrid>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Montant encaissement exercice" />
</f:facet>
<div style="text-align: right">
<h:outputText value="#{ligneGLD.mtEncaissesExercice}">
<f:convertNumber currencySymbol="€" groupingUsed="true"
maxFractionDigits="2" type="currency" />
</h:outputText>
</div>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Montant réductions exercice" />
</f:facet>
<div style="text-align: right">
<h:outputText value="#{ligneGLD.mtReducExercice}">
<f:convertNumber currencySymbol="€" groupingUsed="true"
maxFractionDigits="2" type="currency" />
</h:outputText>
</div>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Date PACA" />
</f:facet>
<h:outputText value="#{ligneGLD.dtPaca}">
<f:convertDateTime pattern="dd/MM/yyyy" timeZone="Europe/Paris" />
</h:outputText>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Numéro OLAF" />
</f:facet>
<h:outputText value="#{ligneGLD.noOlaf}">
</h:outputText>
</rich:column>
<rich:column width="200px">
<f:facet name="header">
<h:outputText value="Origine titre" />
</f:facet>
<h:outputText value="#{ligneGLD.origineTitre}">
</h:outputText>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Contentieux" />
</f:facet>
<h:outputText value="#{ligneGLD.boContentieux}">
</h:outputText>
</rich:column>
</rich:extendedDataTable>
<h:panelGrid columns="3" styleClass="liste">
<h:panelGroup>
<h:outputText id="paginationCompteurGLD"
value="Ligne #{composantPaginationGLDBack.firstElement} à #{composantPaginationGLDBack.lastElement} sur #{composantPaginationGLDBack.nbTotalElements}" />
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
<rich:popupPanel header="Données modifiables" id="modifGLD"
domElementAttachment="form" autosized="true" zindex="500"
left="auto" top="auto">
<h:panelGrid columns="1" id="editGridGLD">
<h:panelGroup styleClass="bloc-contenu-message " layout="block">
<rich:messages />
</h:panelGroup>
<h:panelGrid columns="6" cellspacing="10"
styleClass="criteresSaisie" rowClasses="critereLigne"
columnClasses="titreCourtColonne,,titreCourtColonne,,titreCourtColonne,">
<h:outputLabel for="GLDdtDeclCreanceMandataire"
value="Date déclaration mandataire" />
<rich:calendar id="GLDdtDeclCreanceMandataire" inputSize="8"
value="#{declarationReglementaireModel.currentLigneGld.dtDeclCreanceMandataire}"
enableManualInput="true" datePattern="dd/MM/yyyy"
showInput="true">
</rich:calendar>
<h:outputLabel value="Montant réductions exercice" />
<h:inputText
value="#{declarationReglementaireModel.currentLigneGld.mtReducExercice}"
onchange="this.value=this.value.replace(/\./g,',')" size="10">
<f:convertNumber maxFractionDigits="2" type="number" />
</h:inputText>
<h:outputLabel for="GLDdtPaca" value="Date PACA" />
<rich:calendar id="GLDdtPaca" inputSize="8"
value="#{declarationReglementaireModel.currentLigneGld.dtPaca}"
enableManualInput="true" datePattern="dd/MM/yyyy"
showInput="true">
</rich:calendar>
</h:panelGrid>
<h:panelGroup>
<div align="right">
<h:panelGrid columns="8">
<a4j:commandButton value="Enregistrer"
action="#{rechercheDecRgltCtrl.enregistrerLigneGLD}"
render="editGridGLD" execute="modifGLD"
oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('modifGLD')}.hide();}" />
<a4j:commandButton value="Annuler"
onclick="#{rich:component('modifGLD')}.hide(); return false;" />
</h:panelGrid>
</div>
</h:panelGroup>
</h:panelGrid>
</rich:popupPanel>
</h:form>
</ui:composition>
</body>
</html>
You can use a4j:support to sent request when you want,
like onblur / onkeyup ... or any javascript the item supported.
http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/a4j_support.html
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.