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}?
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 am using primefaces.
In the java side, I have a modelView. ModelView has a list of modules. Each module has a list of variables.
.
.
.
<h:form id="DynamicWebPageForm">
<p:growl id="msgs" showDetail="true" />
<h3>Dynamic Loading with Accordion Panel</h3>
<p:outputLabel for="selectModule" value="Select Module: " />
<p:selectOneMenu id="selectModule" value="#{modelView.selectModel}">
<p:ajax listener="#{modelView.onModelChange}" update="modulesAP" />
<f:selectItems value="#{modelView.modelselectItems}" />
</p:selectOneMenu>
<p:accordionPanel id="modulesAP" multiple="true" value="#{modelView.modules}" var="v1">
<p:tab id = "modulesTab" title="#{v1.name}: Rating - #{v1.rating}">
<p:dataTable styleClass="borderless" value="#{v1.moduleVariables}" var="c1">
<p:column>
<p:row>
<p:panelGrid columns="2" styleClass="borderlessPanelGrid">
<h:outputLabel styles="50%" value="#{c1.name}" />
<p:inputText styles="50%" value="#{c1.value}" />
</p:panelGrid>
</p:row>
</p:column>
</p:dataTable>
<p:commandButton value="Submit" update=":DynamicWebPageForm:msgs modulesTab modulesAP" actionListener="#{modelView.saveData}" process = ":DynamicWebPageForm" />
</p:tab>
</p:accordionPanel>
</h:form>
Any update in the inputText is not getting reflected back on form submission. What could be the issue?
Set cache="false" (and maybe dynamic="true") on your <p:accordionaPanel/>
The accordionPanel defaults to cache="true" (can't understand why), which would explain why you're seeing stale values
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.
<h:panelGroup id="userPanel"><f:subview rendered="#{searchView.isUser}">
<h:commandButton value="test" action="#{searchAction.doFindUsers}" >
<f:ajax execute="#this" event="action" render="userPanel" />
</h:commandButton> </f:subview></h:panelGroup>
I am getting the error as: cannot locate it in the context of the component j_idt26
Because the <f:subview> is a NamingContainer.
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Just use <h:panelGroup>,
<h:panelGroup id="userPanel">
<h:panelGroup rendered="#{searchView.isUser}">
<h:commandButton value="test" action="#{searchAction.doFindUsers}">
<f:ajax execute="#this" event="action" render="userPanel" />
</h:commandButton>
</h:panelGroup>
</h:panelGroup>
or <ui:fragment> (which has only a little less overhead)
<h:panelGroup id="userPanel">
<ui:fragment rendered="#{searchView.isUser}">
<h:commandButton value="test" action="#{searchAction.doFindUsers}">
<f:ajax execute="#this" event="action" render="userPanel" />
</h:commandButton>
</ui:fragment>
</h:panelGroup>
or in this specific example just directly on command button (surely your case is more complex than that)
<h:panelGroup id="userPanel">
<h:commandButton value="test" action="#{searchAction.doFindUsers}" rendered="#{searchView.isUser}">
<f:ajax execute="#this" event="action" render="userPanel" />
</h:commandButton>
</h:panelGroup>
See also:
Alternative to ui:fragment in JSF
Conditional rendering of non-JSF components (plain vanilla HTML and template text)
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.