I have a problem to ajax update an ui:repeat. The update is triggered from a commandButton outside the ui:repeat (see the code below). The variable priceHour is required to calculate the other prices (week, Monat..)
<h:form id="myForm">
<ui:repeat id="alvs" var="alv" value="#{myBean.allV}" >
<h:panelGroup rendered="#{alv.status == 'ON'}" >
<div class="pricing">
<h:outputText styleClass="bold" value="#{alv.shortName}: "/>
<p:inputText value="#{alv.priceHour}" id="hour" required="true" >
<f:convertNumber pattern="#.##" type="currency" />
</p:inputText>
<p:inputText value="#{alv.priceDay}" id="day" >
<f:convertNumber pattern="#.##" type="currency" />
</p:inputText>
<p:inputText value="#{alv.priceWeek}" id="week" >
<f:convertNumber pattern="#.##" type="currency" />
</p:inputText>
<p:inputText value="#{alv.priceMonth}" id="month" >
<f:convertNumber pattern="#.##" type="currency" />
</p:inputText>
</div>
</h:panelGroup>
<p:messages />
</ui:repeat>
<p:commandButton value="Calculator" actionListener="#{myBean.priceCalc}" process="#this,alvs:hour" update="alvs" />
</h:form >
When I click the button nothing happens and the ui:repeat and the prices are not updated. What is wrong? I tried also update"myForm:alvs", update":myForm:alvs": nothing!
I'm using primefaces 3.5
Thanks in advance
ui:repeat is not a rendered component, so you won't see anything in HTML about it. You can't update something that is not rendered. Also the ui:repeat doesn't even have an id attribute.
You need to wrap your ui:repeat inside a component such as h:panelGroup for example like this :
<h:panelGroup id="alvs">
<ui:repeat ...>
</ui:repeat>
</h:panelGroup>
And update the panelgroup in your button :
<p:commandButton value="Calculator" actionListener="#{myBean.priceCalc}" process="#this,alvs" update="alvs" />
Notice that I've removed the :hour since you can't spectify it, each IDs will be different for each repeat.
More info :
JSF 2.0 ui:repeat
I had the same problem. The proposed answers didn't work for me: the ui:repeat doesn't want to be updated by ajax, whatever I do. I used PrimeFaces data list instead and it worked like a charm.
http://www.primefaces.org/showcase/ui/data/dataList.xhtml
I'm afraid I don't know the reason for it to not work, I hate when that kind of stuff happens to me working with JSF. As I workaround, you can try surrounding the ui:repeat with a p:outputPanel and then update that panel.
Related
I have a dropdown with ajax event to hide/show another component based on 'rendered' attribute.
It works fine, untill p:poll from another component gets invoked - the ajax event does not toggle the 'airportPickupWrapper' (although i can see the ajax request in Network)
component 1 :
<h:outputLink id="unresolvedOrdersCount" value="#{navigationMenuBean.setPage('management/orderManagement')}" style="color : red">
New orders : #{headerController.getUnresolvedOrdersCount()}
</h:outputLink>
<p:poll interval="10" update="unresolvedOrdersCount"/>
component2 :
<h:selectOneMenu id="orderTypeDropdown" value="#{orderController.order.orderType}">
<f:selectItems value="#{orderController.orderTypes}"
var="orderType"
itemLabel="#{orderType.displayName}">
</f:selectItems>
<p:ajax event="change" update="airportPickupWrapper"/>
</h:selectOneMenu>
<p:panel id="airportPickupWrapper" >
<h:panelGrid columns="1" rendered="#{orderController.order.orderType.name() == 'AIRPORT_PICKUP'}">
<p:outputLabel for="flightNumber" value="Flight number: " />
<p:inputText id="flightNumber" value="#{orderController.order.flightNumber}">
</p:inputText>
</h:panelGrid>
</p:panel>
thank you for suggestions
edit: if i change the component 1 so that it does not invoke backing bean, everything works fine
<h:outputLink id="unresolvedOrdersCount"></h:outputLink>
Solved.
The problem was i used h:outputLink, where xmlns:h="http://xmlns.jcp.org/jsf/html".
I switched it to p:link (xmlns:p="http://primefaces.org/ui") and everything works fine.
One would think it is compatible.
Thank you.
I have 2 dialogs on a xhtml page:
<p:dialog width="400" id="dialog1" header="Download" widgetVar="dialog1">
<h:outputText value="Field1"/>
<h:inputText value="#{backingBean.field1}"/>
<br/>
<h:outputText value="Field2"/>
<h:inputText value="#{backingBean.field2}"/>
<br/>
<p:commandButton value="Download" ajax="false" onsuccess="PF('diaglog1').hide();">
<p:fileDownload value="#{backingBean.file}"/>
</p:commandButton>
</p:dialog>
<p:dialog width="400" id="dialog2" header="Send" widgetVar="dialog2">
<h:outputText value="Field1"/>
<p:inputText value="#{backingBean.field1}"/>
<br/>
<h:outputText value="Field2"/>
<h:inputText value="#{backingBean.field2}">
<p:ajax update="somePanel"/>
</h:inputText>
<br/>
<h:outputText value="Recipient"/>
<h:panelGroup id="somePanel">
<p:selectOneMenu style="width: 100%;" var="recipient">
<f:selectItems value="#{backingBean.someList}"/>
</p:selectOneMenu>
</h:panelGroup>
<br/>
<p:commandButton value="Send" actionListener="#{backingBean.sendSomething}" onsuccess="PF('dialog2').hide();">
<f:attribute name="item" value="#{recipient}"/>
</p:commandButton>
</p:dialog>
They have different functionality but are on the same page and using the same backing bean. Only one dialog can appear at a time. The problem is when I input some value into the first dialog and press 'Download', it will update the field1 and field2 of the backing bean to the value that I want, but after that the second dialog also updates it to its value, which causes the first one to download the wrong file. If I remove the second dialog, the first will behave correctly.
How do I stop the second dialog from updating the values?
I guess you are keeping both dialogs in one single h:form component.
Then obviously submit in one dialog will submit fields in both dialogs coz, they are in same form.
Don't keep p:dialog inside a h:form, instead use h:form inside
dialog.
You can use multiple h:form s in a page there is no harm in
that, but should not use one h:form in another.
Decide how many forms you can use, based on your design and functionality, In your case you can use 2 h:forms each one inside both dialogs.
I'm using JSF 2 and Primefaces 4 and have the following issue:
I've got the following code in my XHTML:
<h:form id="form">
<table>
<tr id="formats">
<td>Formats</td>
<td>
<p:selectBooleanCheckbox value="#{bean.entity.formatted}">
<p:ajax event="change" update="formatsSelect" />
</p:selectBooleanCheckbox>
<p:selectOneMenu id="formatsSelect" rendered="#{bean.entity.formatted}">
<f:selectItems value="#{bean.formats}" />
</p:selectOneMenu>
</td>
</tr>
</table>
</h:form>
It outputs a checkbox and a select menu and what I expect is that when I check the checkbox the select menu should appear and should disappear when I uncheck it.... but nothing happens, I check and uncheck it and the select menu is unaffected.
In theory this should work since the selectBooleanCheckbox value is bound to the entity.formatted boolean value and the rendered value in the selectOneMenu is bound to the entity.formatted value and the p:ajax points to the correct id in the update attribute and the event is correct. This last bit I know since I created a listener in my bean that printed the value of formatted:
public void changeListener(){
System.out.println(this.entity.isFormatted());
}
And changed the p:ajax to:
<p:ajax event="change" update="formatsSelect" listener="#{bean.changeListener}" />
And it printed the value of formatted in the console.
What am I doing wrong?
Since you used rendered on the component (p:selectOneMenu id="formatsSelect") and updating the same component, it wont work.
Because that component might not have been added to/present in component tree by the time you are updating.
So use a h:panelGroup around it and update it and use rendered on p:selectOneMenu.
<p:selectBooleanCheckbox value="#{bean.entity.formatted}">
<p:ajax event="change" update="formatsSelectPG" />
</p:selectBooleanCheckbox>
<h:panelGroup id="formatsSelectPG">
<p:selectOneMenu id="formatsSelect" rendered="#{bean.entity.formatted}">
<f:selectItems value="#{bean.formats}" />
</p:selectOneMenu>
</h:panelGroup>
I'm trying to render the following JSF page:
<h:form id="form" prependId="false">
<h:panelGrid width="100%">
<h:panelGroup id="tableDiv" layout="block">
<h:panelGroup layout="block" style="text-align: center;">
<p:dataTable id="table" var="_item"
value="#{primeBean.findTableModel()}">
...
</p:dataTable>
</h:panelGroup>
</h:panelGroup>
<h:panelGrid columns="2" width="100%">
<h:panelGroup id="barChartDiv" layout="block">
<p:barChart id="barChart"
value="#{primeBean.findCartesianModel()}">
<p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}"
update="pieChartDiv,tableDiv" />
</p:barChart>
</h:panelGroup>
<h:panelGroup id="pieChartDiv" layout="block">
<h:panelGroup layout="block">
<p:pieChart id="pieChart">
<p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}"
update="tableDiv" />
</p:pieChart>
</h:panelGroup>
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
</h:form>
When I click in any bar on p:barChart, I expect that the components in the update attribute would be rendered in the order that I declare (pieChartDiv,tableDiv), but they are rendered in reverse order (tableDiv,pieChartDiv).
Is this normal behavior? How can I update a component list in the order the items are declared?
That's not possible this way. The components are searched and updated in exactly the same order as they appear in the JSF component tree.
One way would be to rearrange/swap the both components in the tree hierarchy and reposition them visually with help of CSS. This is however rather clumsy.
Another way would be to update the 2nd component on complete of the update of the 1st component (and thus effectively end up with 2 ajax requests instead of 1). You can achieve that with help of <p:remoteCommand> which is invoked on complete of the <p:ajax>.
So, instead of
<p:ajax ... update="pieChartDiv,tableDiv" />
use
<p:ajax ... update="pieChartDiv" oncomplete="updateTableDiv()" />
...
<p:remoteCommand name="updateTableDiv" update="tableDiv" />
Not so elegant but working solution can be this:
<p:barChart id="barChart"
value="#{primeBean.findCartesianModel()}">
<p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}"
update="pieChartDiv" /> <!-- This will be updated as first. -->
<p:ajax event="itemSelect"
update="tableDiv" /> <!-- And this will be updated as second. -->
</p:barChart>
In my JSF page I have form when I click submit button in the same page I need to show an static content. But When I click <p:commandbutton> nothing appears in the page. When I put ajax="false" then only action taken place but the Static content display in new page.
In my Backing bean I have used Session scoped. I am using JSF 2.0 and Primefaces 3.2.
My JSF Page.
<h:form>
<h:panelGroup rendered="#{not license.showForm}">
<p:panel header="License Key Request" >
<h:panelGrid columns="2" >
..
<h:outputText value="Bla bla"/>
..
<h:outputText value="Bla Bla" />
</h:panelGrid>
<TABLE>
..
<h:outputLabel for="name" value="Requestor Name : *" />
..
<p:inputText id="name" value="#{license.name}" required="true" requiredMessage="Name is required."/>
..
<h:outputLabel for="company" value="Company : * " />
..
<p:inputText id="company" value="#{license.company}" required="true" requiredMessage="Company is required."/>
..
</table>
<p:commandButton value="Form" id="btnAdd" process="#form"
action="#{license.add}" />
..
</table>
</p:panel>
</h:panelGroup>
<h:panelGroup rendered="#{license.showForm}" >
<h:outputText value="Bla Bla"/>
</h:panelGroup>
</h:form>
Your source code is somewhat confusing (e.g. you have two closing table tags). But I assume that you want to show the panelGroup at the bottom if the button is clicked.
The easiest way would be to add an update ="#form" to your commandButton:
<p:commandButton value="Form" id="btnAdd"
process="#form" update="#form"
action="#{license.add}" />
You don't need to update the whole form but only the specific component. Then you need to give the panelGroup an id attribute and use this attribute instead of #form. However, since it is not clear for me how your naming containers are organized, it could be puzzling to find the correct relative id.