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.
Related
Given the following code:
<p:column headerText="#{text.article}">
<h:panelGroup>
<p:autoComplete id="relationArticle"
value="#{relation.article}"
completeMethod="#{articleRelationsModel.findArticles}"
queryDelay="#{text.query_delay}"
minQueryLength="#{text.artikkel_min_query_length}"
var="article"
itemLabel="#{article.articleNo} #{article.text1}"
itemValue="#{article}"
converter="#{articleConverter}"
scrollHeight="150"
forceSelection="true"
styleClass="ui-autocomplete-big">
<p:ajax event="itemSelect" update="relationUnit" process="#this"/>
</p:autoComplete>
<p:message for="relationArticle"/>
</h:panelGroup>
</p:column>
<p:column headerText="#{text.unit}" style="width: 80px;">
<h:selectOneMenu id="relationUnit" value="#{relation.unit}" converter="#{articleUnitConverter}">
<f:selectItem itemLabel="<< #{text.search}" noSelectionOption="true" itemDisabled="#{relation.article != null}"/>
<f:selectItems value="#{articleRelationsModel.getUnits(relation)}" var="unit" itemLabel="#{unit.code}" itemValue="#{unit}"/>
<p:ajax event="change" process="#this" update="#this"/>
</h:selectOneMenu>
<p:message for="relationUnit"/>
</p:column>
How can I refresh the "relationUnit" component after the user has selected a value in the "relationArticle" component?
What happens now, is that after the autcompete itemSelect event has fired, the "relationUnit" component gets updated with new content using #{articleRelationsModel.getUnits(relation)}. During this update, the relation object is updated with one of the options from the resulting list. This, however, is not reflected in the "relationUnit" component after the update. But if I manually do another update after this, it gets selected.
How can I achieve the wanted result here?
You can use p:remoteCommand, which is usually used to call the ManagedBean Methods from Javascript.
While it serves the above purpose you can use it to update other components also.
You can call the p:remoteCommand from p:ajax's oncomplete attribute.
<p:autoComplete id="relationArticle" ...>
<p:ajax event="itemSelect" update="relationUnit" onComplete="updateRelationUnit()" process="#this"/>
</p:autoComplete>
<p:remoteCommand name="updateRelationUnit" update="relationUnit" process="#this" />
Now p:ajax will update relationUnit once and then calls the p:remoteCommand which in-turn relationUnit again.
I don't know why you want this strange behavior, but the above strategy and code servers your purpose just fine.
I'm new to jsf, and I'm writing my first application using richfaces. I'm having trouble with the ajax tag that I use to update the associated managed bean property on server for rich:calendar components. This is the code:
<rich:panel header="Computing Options">
<h4>Time Interval</h4>
<h:panelGrid columns="4" width="100%">
<h:outputText value="From" />
<rich:calendar id="intervalFrom" value="#{scenarioEditor.intervalFrom}" popup="true" showApplyButton="true" datePattern="yyy-MM-ddTHH:mm">
<a4j:ajax execute="#this" event="change" render="outFrom" />
</rich:calendar>
<h:outputText value="To" />
<rich:calendar id="intervalTo" value="#{scenarioEditor.intervalTo}" popup="true" showApplyButton="true" datePattern="yyy-MM-ddTHH:mm">
<a4j:ajax execute="#this" event="change" render="outTo" />
</rich:calendar>
<h:outputText id="outFrom" value="From: #{scenarioEditor.intervalFrom}" />
<h:outputText id="outTo" value="To: #{scenarioEditor.intervalTo}" />
</h:panelGrid>
<h4>Algorithms</h4>
<h:panelGrid columns="2">
<h:selectBooleanCheckbox value="#{scenarioEditor.visibilityClashes}" id="clash" >
<f:ajax execute="#this"/>
</h:selectBooleanCheckbox>
<h:outputLabel value="Visibility Clashes Evaluator" for="clash" style="width:170px" />
<h:selectBooleanCheckbox value="#{scenarioEditor.xBandInterference}" id="xband" >
<f:ajax execute="#this"/>
</h:selectBooleanCheckbox>
<h:outputLabel value="X-Band Interferences Evaluator" for="xband" style="width:170px"/>
</h:panelGrid>
</rich:panel>
checkboxes works fine, but the calendars do not. Why? I`ve tried both f:ajax and a4j:ajax without luck.
To better clarify, I want that right after the user has finished entering a value into the calendar, an ajax request is made that call the setter method for the associated property. And this, for the calendar does not happen while for the checkboxes, it does.
The ajax event is failing because of T in datePattern="yyy-MM-ddTHH:mm" is not a valid date formatting pattern. If you add a <rich:messages/> component to your field, you'll see that a conversion error is occurring on each ajax request. Remove the T and you'll be fine
I have a jsf page that adds an order from a client.
All works fine except when I click the commandLink to show the p:dialog to add a new client the update on the "reste" inputtext stop working (even if I close the p:dialog without adding the new client) :
Clients List :
<strong>Client :</strong><
<p:autoComplete
id="client"
value="#{venteSolaireBean.client}"
completeMethod="#{venteSolaireBean.autocompleteClient}"
var="item"
itemLabel="#{item.nom} #{item.prenom}"
itemValue="#{item}"
converter="#{venteSolaireBean.clientConverter}"
dropdown="true"
scrollHeight="200" >
</p:autoComplete>
Link to a p:dialog to add a new Cleint :
<p:commandLink onclick="dlgClient.show()" immediate="true">
<img src="images-main/add-icon.gif" border="0" alt="Add Client" class="img-action"/>
</p:commandLink>
Three p:inputtext items with ajax behavior :
<strong>Montant :</strong>
<p:inputText value="#{venteSolaireBean.venteSolaire.montant}">
<p:ajax event="keyup" update="reste" listener="#{venteSolaireBean.calcul}" />
</p:inputText>
<strong>Avance :</strong></td>
<p:inputText value="#{venteSolaireBean.venteSolaire.avance}">
<p:ajax event="keyup" update="reste" listener="#{venteSolaireBean.calcul}" />
</p:inputText>
<strong>Reste :</strong></td>
<p:inputText id="reste" value="#{venteSolaireBean.venteSolaire.reste}">
</p:inputText>
The venteSolaireBean.calcul function to execute with the listener :
public void calcul() {
venteSolaire.setReste(venteSolaire.getMontant() - venteSolaire.getAvance());
}
I checked by logging the calcul() function and I'm sure it was invoked and the value giving to setReste() is correct.
I don't see why inputtext didn't update.
please help.
I think that there are some problems with the validation. As immediate=true often leads to such problems and you are not using any primefaces-functionality on the button to show the dialog, you should replace the p:commandButton with a plain HTML button to show the "add client"-dialog.
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.
i'm trying to use an search button which brings back the selected items (can be more than one) and it updates the datatable. Then i have a selectBooleanCheckbox next to each colomn, when user selects "n" items then presses the Select the checked Items it insert DB.
The code can be seen below:
<h:panelGrid columns="5">
<h:form>
<h:outputText value="Item Name"/>
<p:inputText value="#{StockController.itemName}"/>
<h:commandButton value="Search" action="#{StockController.Search}">
<f:ajax execute="#form" render=":results"/>
</h:commandButton>
</h:form>
//The code sample below belongs to BalusC see the post here
<h:panelGroup id="results">
<h:form>
<h:dataTable value="#{bean.entities}" var="entity">
<h:column>
<h:selectBooleanCheckbox value="#{bean.checked[entity.id]}" />
</h:column>
...
</h:dataTable>
<h:commandButton value="Select the checked Items" action="#{StockController.insertDao}" >
<f:ajax execute="#form" render=":results"/>
</h:commandButton>
</h:form>
</h:panelGrid>
Now, i have read many blogs and Core javaServer Faces 3, i don't think there is logical error in ajax usage. I tested by removing each ajax then both works fine but whenever i try to use both of cummondButtons with ajax, the second one "Select the checked Items" does not even call the "StockController.insertDao" method.
Any help is appreciated.
Thanks all.
When you want to ajax-render content which in turn contains another form, then you need to include the ID of that form in the render attribute as well, otherwise the other form will lose its view state and nothing will be processed on submit.
<h:form>
...
<h:commandButton value="Search" action="#{StockController.Search}">
<f:ajax execute="#form" render=":results :resultsForm" />
</h:commandButton>
</h:form>
<h:panelGroup id="results">
<h:form id="resultsForm">
...
</h:form>
</h:panelGroup>
If there's however nothing which goes outside <h:form> inside the same <h:panelGroup>, then you can just omit the <h:panelGroup> altogether and re-render the form directly.
<h:form>
...
<h:commandButton value="Search" action="#{StockController.Search}">
<f:ajax execute="#form" render=":results" />
</h:commandButton>
</h:form>
<h:form id="results">
...
</h:form>
This is related to JSF spec issue 790.
See also:
Communication in JSF2 - Ajax rendering of content which contains another form