I want to display dynamic number of rich data tables in one page based on data so what i am doing is, within c:foreach looping ui:include which points to datatable.xhtml.but as result i am getting only one data table.any solution will be appreciated..
sample code :
<c:forEach items="#{bean.list}" var="item">
<ui:include src="/dataTable.xhtml" >
<ui:param name="values" value="#{item.value}" />
<ui:param name="some other values" value="#{item.key}" />
</ui:include>
</c:forEach>
Do not use c:forEach, use JSF components for looping instead. For example rich:dataGrid:
<rich:dataGrid columns="3" var="res" value="#{chProfile.clubItems}">
<h:panelGroup layout="block" style="width:300px;">
<rich:dataTable style="width: 100%">
<rich:column id="item">
<f:facet name="header">
<h:outputText value="#{res.promoName} Club" />
</f:facet>
</rich:column>
</rich:dataTable>
<h:outputText value="#{res.freeItemsReceived} free #{res.freeItemsReceived == 1 ? 'item' : 'items'} received during this calendar month" /><br />
</h:panelGroup>
</rich:dataGrid>
Other alternative can be ui:repeat:
<ui:repeat var="state" value="#{referenceLists.USstates}">
<ui:fragment rendered="#{reportForm.isChStateSelected(state.value)}">
<h:outputText value="#{state.label}" /><br />
</ui:fragment>
</ui:repeat>
Related
I have this button in a form
<p:commandButton process="#this" update=":solution" title="Modify"
actionListener="#{controller.addSolutionAction(registerCause)}"
icon="ui-icon-plus" />
It displays this dialog (it's outside the form)
<p:dialog header="Solutions widgetVar="dlgSolution" id="solution"
showEffect="fade" hideEffect="drop" closable="true" resizable="true" modal="true">
<h:form id="dialog">
<p:pickList id="solutions" var="sol" effect="drop"
itemValue="#{sol}" itemLabel="#{sol.code}" converter="solutionConverter" label="Solutions" >
<f:facet name="sourceCaption">No Seleccionadas</f:facet>
<f:facet name="targetCaption">Seleccionadas</f:facet>
<p:ajax event="transfer" update="#form"
listener="#{controller.handleSolutionChange}" />
<p:column>
<h:outputText id="codeID" value="#{sol.code}" />
</p:column>
<p:column>
<p:commandButton id="button" icon="ui-icon-search" type="button" update="buttonP"/>
<p:overlayPanel id="buttonP" for="button" hideEffect="fade">
<p:editor id="description" required="true"
label="Ver más" width="300" widgetVar="descriptionWidget"
value="#{sol.description}" disabled="true" controls="">
</p:editor>
</p:overlayPanel>
</p:column>
</p:pickList>
<p:outputPanel styleClass="divButton">
<p:growl id="growlMessagePreview" life="2000" />
<p:commandButton icon="ui-icon-close" title="Close" process="#form" update="#form" value="Close" oncomplete="dlgSolution.hide()" />
</p:outputPanel>
</h:form>
</p:dialog>
What I want to do is show the solution's description when I click the button, but it's always empty. I need it to be an editor because the text is formatted
(I tried using a text area but it's empty too), then I put a string but it's not shown. I also used dynamic = "true" in the overlaypanel, it showed the hard coded string but not the value I need.
I'm using Primefaces 3.5. Any suggestions will be welcome, if you need more details, let me know.
I have a primefaces dialog and what I want to do is process inputtext before commandbutton action starts. Inside myController.sendToPostBox method, myController.rejectionReason string returns null. Here is my view code.When I remove process attribute, commandbutton doesn't works.
<h:form>
....
<p:dialog id="myPanel"
widgetVar="myPanelId"
resizable="true"
appendToBody="true"
draggable="true"
height="200"
width="300">
<p:panelGrid id="myPanelGridId" style="width: 250px;" styleClass="panelGridWithoutBorder">
<p:row>
<p:column colspan="2">
<p:inputTextarea style="width: 250px;" value="#{myController.rejectionReason}"/>
</p:column>
</p:row>
<p:row>
<p:column>
<p:commandButton value="Save"
oncomplete="if (!args.validationFailed) myPanel.hide();"
process="myPanelId"
action="#{myController.sendToPostBox()}"/>
</p:column>
<p:column>
<p:commandButton value="Close" />
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
</h:form>
Just place the <h:form> inside the dialog (instead dialog inside the <h:form>)
Explanation:
When you use appendToBody="true" you dialog is being transferred outside of the form that wraps it to the body of the generated html , and since there is no form inside the dialog you can't really submit it.
Also take a look at this thread: Proper Construct for Primefaces Dialog
You need something like this:
<h:form id="formDialog">
<p:commandButton id="basic" value="Basic Dialog" onclick="PF('dlg1').show();" type="button" />
</h:form>
<p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1">
<h:form id="formUser">
<h:panelGrid id="grid" columns="2">
<h:outputLabel value="Username:" />
<p:inputText id="user" value="#{user.name}" />
<h:outputLabel value="Password:" />
<p:inputText id="password" value="#{user.password}" />
<h:commandButton value="Login" id="btn" process="#formUser" actionListener="#{user.login}" />
</h:panelGrid>
</h:form>
</p:dialog>
"login" in the actionListener tag is a method in the User(bean) class, that needs the #ManagedBean annotations.
I am using the JSF 2.0 and primefaces 3.5. the problem i am facing is i have created a datatable on a page .. every things works fine along with pagination and filtering, but when i include the same page into the template ... the pagination and filtering stop working.. any idea regarding this
the code is
<h:form id="form">
<p:dataTable var="row" rowKey="row.attackID"
value="#{attackBean.list}" id="tableAttack" paginator="true"
rows="10" selection="#{attackBean.selectedAttack}"
filteredValue="#{attackBean.filteredAttack}"
rowsPerPageTemplate="5,10,15" selectionMode="single">
<p:ajax event="rowSelect" update=":centerForm:form:display"
oncomplete="dlg.show()" />
<p:column headerText="Attack-ID" filterBy="#{row.attackID}">
<h:outputText value="#{row.attackID}" />
</p:column>
<p:column headerText="Action Name" filterBy="#{row.attackName}">
<h:outputText value="#{row.attackName}" />
</p:column>
<p:column headerText="Defended User" filterBy="#{row.userID}">
<h:outputText value="#{row.userID}" />
</p:column>
<p:column headerText="Action Taken">
<h:outputText value="#{row.actionTaken}" />
</p:column>
<p:column headerText="Attack Time">
<h:outputText value="#{row.attackTime}" />
</p:column>
</p:dataTable>
<p:dialog id="tDialog" header="Threat info" widgetVar="dlg"
modal="true" height="250" width="300" showEffect="explode"
hideEffect="bounce">
<h:panelGrid id="display" columns="1" cellpadding="4">
<h:outputText value="Attack ID: #{attackBean.selectedAttack.attackID} " />
<h:outputText value="Description: #{attackBean.selectedAttack.userID}" />
<h:outputText
value="Action Taken: #{attackBean.selectedAttack.actionTaken}" />
</h:panelGrid>
</p:dialog>
</h:form>
here is the main templete code
<h:body style="">
<div id="page" >
<h:panelGroup id="mainPanel">
<div id="left" class="bar">
<ui:insert name="left">
<ui:include src="commonLeft.xhtml" />
</ui:insert>
</div>
<div id="center">
<div id="hDiv">
<ui:insert name="left">
<ui:include src="commonHeader.xhtml" />
</ui:insert>
</div>
<div id="cDiv">
<h:form id="centerForm">
<h:panelGroup id="centerPanel" render="mainPanel">
<ui:include src="#{browse.url}" />
</h:panelGroup>
</h:form>
</div>
</div>
<div id="right" >
<ui:insert name="right">
<ui:include src="commonFooter.xhtml" />
</ui:insert>
</div>
</h:panelGroup>
</div>
</h:body>
I assume you are including your template in this section:
<h:form id="centerForm">
<h:panelGroup id="centerPanel" render="mainPanel">
<ui:include src="#{browse.url}" />
</h:panelGroup>
</h:form>
If that's the case, then you have a problem of nested forms. That is not allowed and the inner form is getting removed from the HTML code (you can see that in the source code in the browser). You should not impose the form in the parent template, and let the children create the forms they are going to use.
I need to show and hide component in my JSF 2-PrimeFaces application, please find my code below for the same:
<p:outputLabel for="online_offer" value="Online offer#{msg._question_mark}" styleClass="font-size-1em font-weight-bold input-panel-main" />
<p:panel>
<h:panelGrid columns="1">
<p:selectBooleanButton id="online_offer" value="#{QckPstBen.offer.isExpired}" onLabel="Yes" offLabel="No" onIcon="ui-icon-check" offIcon="ui-icon-close" >
<f:ajax event="click" render="#form" />
</p:selectBooleanButton>
</h:panelGrid>
</p:panel>
<h:outputLabel value=" " />
<h:panelGroup rendered="#{QckPstBen.offer.isExpired}">
<p:outputLabel for="website" value="Website/link to the offer#{msg._colon}" styleClass="font-size-1em font-weight-bold input-panel-main" />
<p:panel>
<h:panelGrid columns="1">
<p:inputText id="website" required="true" size="38" />
<p:watermark for="website" value="www.discountbox.in" />
</h:panelGrid>
</p:panel>
</h:panelGroup>
But it doesnt work, any clue
PrimeFaces components doesn't support <f:ajax>. Use <p:ajax> instead.
<p:selectBooleanButton ...>
<p:ajax update="#form" />
</p:selectBooleanButton>
Note that I omitted the event attribute, it defaults here to click already.
Place rendered on children of <h:panelGroup> instead or place a container of some sort around it, for example p:panel.
This may be OBE by now but...
When referencing the page bean, don't I recall in the #{} context, the convention of using lowercase for class names and method/attributes of the page bean (i.e. not #{QckPstBen.offer.isExpired} but #{qckPstBen.offer.isExpired}?
I have been getting this error. I added id's to all the components and also changed the session scope after reading a few other suggestions on stackOverflow.
I am trying to create a collapsible panel which contains tabs.
tabbb.xhtml
<cc:implementation>
<h:panelGroup layout="block" styleClass="collapsiblePanel-header">
<h:commandButton id="toggleButton"
action="#{cc.attrs.bean1.togglePanel}"
styleClass="collapsiblePanel-img"
image="#{cc.attrs.bean1.collapsed ? '/resources/images/plus.png' : '/resources/images/minus.png'}" />
</h:panelGroup>
<h:panelGroup layout="block" rendered="#{cc.attrs.bean1.collapsed}"
styleClass="collapsiblePanel-img2">
<cc:renderFacet name="tabs">
<js:forEach items="#{cc.attrs.bean2.tabBean}">
<h:outputText>"${cc.attrs.bean2.tabBean}"</h:outputText>
<li><h:commandLink
value="#{cc.attrs.bean2.tabBean.description}">
<f:param name="tabIndex" value="#{cc.attrs.bean2.randomNum}" />
<f:ajax event="click" render=":contentForm"
listener="#{bean2.handleTabChange}" />
</h:commandLink>
</li>
</js:forEach>
</cc:renderFacet>
</h:panelGroup>
<cc:insertChildren />
<h:outputStylesheet library="css" name="components.css" />
</cc:implementation>
using page: tabbedcollapsible.xhtml
<h:body>
<h:form id="testform">
<h:outputText value="Tabbed collapsible panel test page" />
<jl:tabbb bean1="${collPanel}" bean2="${tabbBean}">
<f:facet name="tabs">
<h:outputText value="This Is Cool" />
</f:facet>
</jl:tabbb>
</h:form>
</h:body>
Both the beans collPanel and tabbBean are request scoped.
Also the form does not render the tabs. I am new to JSF and I have been stuck with this for a long time. Thanks.