I want to render the panel content by the value in the submenu selected .But the panel is not rendered.Is there anyother way to render the panel in submenu
<h:panelGroup id="menu" layout="block">
<h:form>
<h:outputStylesheet name="css/primefaces.css" />
<p:growl id="messages" autoUpdate="true" />
<f:ajax event="click" render=":content">
<p:panelMenu style="width:200px " styleClass="ui-menubar"
autoSubmenuDisplay="true">
<p:submenu label="Ajax ">
<p:menuitem value="Home" action = "#{menuBar.setPage('menu1.xhtml')}" />
</p:submenu>
</p:panelMenu>
</f:ajax>
</h:form>
</h:panelGroup>
<h:panelGroup id="content" layout="block" >
<h:form id="contentform">
<ui:include src="#{menuBar.page}" />
</h:form>
</h:panelGroup>
You can use the update attribute of your <p:menuitem
p:menuitem got update and process attributes
In general don't mix JSF f:ajax with primefaces components and visa versa
Related
Hi I have some validation on my form (Java web application), and when the validation is displayed, it should reload the page. When it does this, I lose all the data input in the dropdown list in first tab.(Data in text boxes are retained)
Below is how I define my tabview :
<p:tabView id="tabView" dynamic="true">
Anyone can help on this? Thanks in Advance
I am using PrimeFaces 4.0, spring, hibernate.
<h:form prependId="false">
<p:panel>
<h:panelGrid id="detail" columns="2" styleClass="grid"columnClasses="label,value">
<p:tabView id="tabView" dynamic="true" >
<p:tab id="tab1" title="bUS Details">
<h:outputTextvalue="#{ebusmsgs['ebus.bustitle.title']}:" />
<h:inputText id="ebus_bustitle" value="#{BusComponent.bus.empMinDiv}" />
</p:tab>
<p:tab id="tab2" title="Mechanic Details">
<h:outputTextvalue="#{ebusmsgs['ebus.mechanictitle.title']}:" />
<h:inputText id="ebus_mechanictitle" value="#{BusComponent.bus.empMinDiv}" />
</p:tab>
</p:tabView>
</h:panelGrid>
</p:panel>
</h:form>
I have a page in which through AJAX I include other pages conditionally. On one included page I would like to do another ajax call.
My initial page:
<ui:composition template="../../templates/template.xhtml">
<ui:define name="title">
Pay
</ui:define>
<ui:define name="content">
<h:form>
<div id="loginDiv">
<div class="homeDiv" style="text-align: left;">
<h:form>
<h:outputText value="#{strings.paymentMainSpeech} " />
<ul id="grileList">
<li>#{strings.payThroughSMS}</li>
<li>#{strings.payThroughCard}</li>
<li>#{strings.payThroughPayPal}</li>
</ul>
<h:outputText value="#{strings.bellowYouHavePaymentOptions}" />
</h:form>
</div>
<h:selectOneRadio value="#{payment.option}" immediate="true">
<f:selectItem itemValue="#{strings.payThroughSMS}"
itemLabel="#{strings.payThroughSMS}" />
<f:selectItem itemValue="#{strings.payThroughCard}"
itemLabel="#{strings.payThroughCard}" />
<f:selectItem itemValue="#{strings.payThroughPayPal}"
itemLabel="#{strings.payThroughPayPal}" />
<f:ajax event="change" listener="#{payment.changeListener()}"
render="payment" />
</h:selectOneRadio>
</div>
<h:panelGroup id="payment">
<!-- PayPal -->
<h:panelGroup rendered="#{payment.option == 'PayPal'}">
<ui:include src="../payments/paypal/paypal.xhtml" />
</h:panelGroup>
<!-- CARD -->
<h:panelGroup rendered="#{payment.option == 'Card'}">
<ui:include src="../payments/card/mobilPay.xhtml" />
</h:panelGroup>
</h:panelGroup>
</h:form>
</ui:define>
I select from the radio buttons the pages which I want to include through an ajax listener. That works well.
On one included page (on mobilPay.xhtml)
<ui:composition>
<ui:define name="title">
Pay Card Mobil Pay
</ui:define>
<div id="loginDiv">
<h:panelGroup id="next">
<h:panelGroup rendered="#{not mobilPayInitBean.forward}">
<h:outputText value="#{strings.paymentSpeech} " />
<h:outputText value="#{strings.paymentSpeech} " />
<h:outputText value=" #{strings.paymentSpeech2}" />
<br />
<br />
<h:form>
<h:selectOneMenu value="#{mobilPayInitBean.options}">
<f:selectItem itemValue="five" itemLabel="#{strings.fiveEuro}" />
<f:selectItem itemValue="seven" itemLabel="#{strings.sevenEuro}" />
<f:selectItem itemValue="ten" itemLabel="#{strings.tenEuro}" />
</h:selectOneMenu>
<br />
<br />
<f:ajax render="next">
<h:commandButton value="#{strings.nextStep}"
action="#{mobilPayInitBean.nextStep()}"
rendered="#{not mobilPayInitBean.forward}" />
</f:ajax>
</h:form>
</h:panelGroup>
<h:panelGroup rendered="#{mobilPayInitBean.forward}">
<div id="loginDiv">
<form name="frmPaymentRedirect" method="post"
action="#{mobilPayInitBean.paymentURL}">
<input type="hidden" name="env_key"
value="#{mobilPayInitBean.paymentURL}" /> <input type="hidden"
name="data" value="#{mobilPayInitBean.paymentURL}" />
<p>
If not reditect in 5 seconds <input type="image"
src="images/12792_mobilpay-96x30.gif" />
</p>
</form>
</div>
<script type="text/javascript" language="javascript">
window.setTimeout(document.frmPaymentRedirect.submit(), 3000);
</script>
</h:panelGroup>
</h:panelGroup>
</div>
I want to select from the select one menu an item and click on the command button and I want the whole selectonemenu and the command button to disaper and the last form (name="frmPaymentRedirect")to appear.
Now the problem:
I include the mobilPay.xhtml page and the whole page with the radiobuttons and the mobilPay.xhtml page appears, BUT when I click on the command button the hole mobilPay.xhtml disappears and so does the selection in the radio button.
Thank you for your time.
It was the nested forms!!!
I used a master template -> child template -> included page.
In the child template a had a form and inside the form I inserted the pages and in the one inserted page I had another set of form.
Thank you for pointing that obvious thing out!!!
I'm using PrimeFaces 3.4. I have p:layout with p:tree in left layout unit, and the list of panels in the central unit. After selecting/unselecting the nodes on tree I'm rendering/unrendering the panels. The general structure looks like that:
<p:layoutUnit position="west" minSize="150" size="300">
<h:form id="tree">
<p:tree id="tree" value="#{tree.root}" var="node"
selectionMode="multiple" selection="#{tree.selectedNodes}">
<p:ajax event="select" listener="#{tree.treeSelect}" process=":main" update=":main:panels"/>
<p:ajax event="unselect" listener="#{tree.treeUnselect}" process=":main" update=":main:panels"/>
<p:treeNode>
<h:outputText value="#{node.title}" />
</p:treeNode>
</p:tree>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" header="Panels" styleClass="noscroll">
<h:form id="main">
<p:outputPanel id="panels" styleClass="center-panels">
<!-- here go the panels -->
</p:outputPanel>
</h:form>
</p:layoutUnit>
But the panels contains the input fields. I've noticed, that the input fields are reseted after click on tree, so I've added the process attribute. I've tried with :main, :main:panels, #all, but none of them have functioned.
How can I work correctly with that scenario? PrimeFaces bugture (a bug that is feature) doesn't allow using single form when you are using p:layout, at least this is stated in documentation. And using multiple forms, I'm loosing data.
This is working for me:
<p:layoutUnit position="west" header="Opciones" size="175">
<h:form id="form1">
<p:panelMenu style="width:200px">
<p:submenu label="Clientes" >
<p:menuitem value="Adicionar" update=":form2" actionListener="# {templateMB.templateAddCliente}" />
<p:menuitem value="Buscar"/>
<p:menuitem value="Listado"/>
<p:menuitem value="Editar"/>
</p:submenu>
<p:submenu label="Contratos">
<p:menuitem value="Adicionar" icon="ui-icon-close"/>
</p:submenu>
<p:separator/>
<p:submenu label="Suplementos" >
<p:menuitem value="Adicionar" icon="ui-icon-signal"/>
</p:submenu>
</p:panelMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:form id="form2">
<ui:include src="#{templateMB.centerTemplate}" />
</h:form>
</p:layoutUnit>
I want to do some processing when the user click on the p:graphicsImage inside a ui:repeat
How do i do it.
<ui:repeat id="repeat" value="#{getData.image}" var="imageLst" varStatus="loop">
<h:panelGroup>
<p:graphicImage id="gi1" value="#{imageStreamer.image}" alt="image not available" >
<f:param name="id" value="#{imageLst.imageID}" />
<p:ajax id="aj2" event="click" listener="#{getData.searchID}" immediate="true" update=":form:tabView:check :form:growl"/>
</p:graphicImage>
</h:panelGroup>
</ui:repeat>
In the above code if i place the ajax part doesn't get triggered.
How do i monitor a Click on the 'p:graphicImage'
The <p:graphicImage> doesn't support any ajax events.
Just wrap it in a <h:commandLink> (or the p: one).
<h:commandLink>
<p:graphicImage id="gi1" value="#{imageStreamer.image}" alt="image not available" >
<f:param name="id" value="#{imageLst.imageID}" />
</p:graphicImage>
<p:ajax id="aj2" listener="#{getData.searchID}" update=":form:tabView:check :form:growl"/>
</h:commandLink>
I have got a problem with my JSF application.
On a page there's a form where the user can dynamically add components to that very same form. When I use the ajax listener to add the component, it is updated in the view and also in the model. But when I try to remove the dynamiccaly added component by pressing an h:actionLink its ajax listener is never triggered.
This is my code:
<h:form rendered="#{schrijvenController.verslagenController.documentSelected}">
<p>
<span class="noLabel">
#{bundle.JongereJongere}:
</span>
<h:selectOneMenu id="jongereSelect" valueChangeListener="#{schrijvenController.selecteerJongere}" immediate="true"
value="#{schrijvenController.currentJongere.jongereID}"
title="--#{bundle.JongereSelect}--">
<f:selectItems value="#{jongereController.jongerenAsSelectItems}"/>
</h:selectOneMenu>
</p>
<h:panelGroup id="personen">
<ui:repeat value="#{schrijvenController.verslagenController.persoonItems}" var="persoon">
<div class="div_add_persoon">
<div class="div_add_persoon_left">
<span class="noLabel"> #{persoon.aanwezigheid}:</span>
<h:inputText value="#{persoon.searchTerm}"
onkeypress="if (event.keyCode == 13) { onchange(); return false; }">
<f:ajax event="keypress" render="persoonLijst" listener="#{persoon.getPersonenWhereNameLikeSelectItems}" />
</h:inputText>
<h:selectOneMenu id="persoonLijst" styleClass="fixedWitdhDropDown"
value="#{persoon.currentPersoon.persoon_id}"
title="--#{bundle.PersoonSelect}--">
<f:selectItems value="#{persoon.personenWhereNameLikeSelectItems}"/>
<f:ajax event="change" render="#form" listener="#{persoon.add}" />
</h:selectOneMenu>
</div>
<h:panelGroup layout="block" styleClass="div_add_persoon_right">
<ui:repeat value="#{persoon.personen}" var="persoonPersoon">
<h:panelGroup layout="block" styleClass="div_schrijvenPersoon">
<h:outputText value=" #{persoonPersoon.naam} #{persoonPersoon.voornaam} " />
<h:commandLink value="X" id="linkske">
<f:ajax event="click" render="#form" listener="#{persoon.delete}" />
</h:commandLink>
</h:panelGroup>
</ui:repeat>
</h:panelGroup>
</div>
</ui:repeat>
<div class="clear" />
This is a Prt Sc of my view:
http://i206.photobucket.com/albums/bb69/bartloterman/pscreen.jpg?t=1302028364
If one clicks on an element from the list, it's added to the right inside a div together with a commandLink with the text "x". But when I click the "x" link nothing happens (no function is being executed). It is as if the view can't find the component. I'm using Datamodels.
I've been looking all day for a solution on the web but I couldn't find one. Any help would be greatly appreciated.
I managed to solve the problem by using the following code in my view
<h:commandLink value="X">
<f:ajax render="#form" execute="#form" listener="#{persoon.delete}" />
</h:commandLink>
Seems I needed render="#form" and execute="#form"