I'm trying to update a a radio-componet, which is triggered by a onchange-event of a select-box. I see the radio-button toggling as desired after the onchange, but it automatically toggles back the next second.
<h:selectOneMenu id="selectId" value="#{someBean.someSelectValue}"
onchange="this.form.submit()" valueChangeListener="#{someBean.someChange}" immediate="true">
<p:ajax update="radioId"/>
<f:selectItems value="#{someBean.availableSraTitel}" />
</h:selectOneMenu>
<h:selectOneRadio id="radioId" value="#{someBean.someRadioValue}">
<f:selectItem itemLabel="Yes" itemValue="true" />
<f:selectItem itemLabel="No" itemValue="false" />
</h:selectOneRadio>
What am I missing here?
Jonny
Remove onchange="this.form.submit()" (the f:ajax will submit the value to the server)
Also remove immediate="true" (I don't think you really planning to skip any validations here)
Last thing, change <p:ajax update="radioId"/> into <f:ajax render="radioId"/>
p:ajax is from primefaces and you are using plain JSF components
As suggested by BalusC : You also better replace the valueChangeListener="#{someBean.someChange}" by adding listener="#{someBean.someChange}" to your f:ajax (you should change teh signature of the method too)
Related
i am using Primefaces4.0 with JSF2.0
i want to render valueChangeListener on p:SelectOneMenu
so far:
<p:selectOneMenu value="#{removeAgent.groupNumber}" effect="drop" valueChangeListener="#{removeAgent.valueChange}" onchange="submit()">
<f:selectItems id="resGrp" value="#{removeAgent.allGroups}" var="grp" itemLabel="#{grp.groupName}" itemValue="#{grp.id}"/>
</p:selectOneMenu>
it works fine in this piece of code but i want it in primefaces
<h:selectOneMenu value="#{removeAgent.groupNumber}" effect="drop" valueChangeListener="#{removeAgent.valueChange}" onchange="submit()">
<f:selectItems id="resGrp" value="#{removeAgent.allGroups}" var="grp" itemLabel="#{grp.groupName}" itemValue="#{grp.id}"/>
</h:selectOneMenu>
In primefaces you can use code like below :
<p:selectOneMenu value="#{removeAgent.groupNumber}" effect="drop">
<f:selectItems id="resGrp" value="#{removeAgent.allGroups}" var="grp" itemLabel="#{grp.groupName}" itemValue="#{grp.id}"/>
<p:ajax update="nextElementID" listener="#{removeAgent.valueChange}" oncomplete="submit()" />
</p:selectOneMenu>
update attribute of ajax tag is DOM element that should be updated after the ajax request. It's very useful if you have select form like city/province and so on. If you don't need, you can leave it out.
I have two selectOneMenu elements which their id's make difference only.
valueChangeListener works on second try.
At first try, page is refreshing, but does not go the valueChangeCode, thefore no value changes. At second try it goes valueChangeCode and it gets new value and both of selectOneMenu show new value.
<h:selectOneMenu id="changeCurrency" value="#dataBean.showCurrency}" valueChangeListener="#myBean.changePaymentCurreny}"
valueChangeListener="#{myBean.changePaymentCurreny}"
immediate="true"
onchange="submit()">
<f:selectItems value="#{my.currencyList}" />
</h:selectOneMenu>
<h:selectOneMenu id="changeCurrency2"
value="#{dateBean.showCurrency}"
valueChangeListener="#{myBean.changePaymentCurreny}"
immediate="true"
onchange="submit()">
<f:selectItems value="#{myBean.currencyList}" />
</h:selectOneMenu>
In ValueChangeListener code.
dataBean.setShowCurrency(newCurrency);
FacesContext.getCurrentInstance().renderResponse();
FacesContext.getCurrentInstance().getViewRoot().getChildren().clear();
When i remove the line which ends with getChidren.clear, and i change value of one them, changeListener called and changes the value at first try.
On view, only one selectmenu which i changed, shows new value. Other selectOnemenu still show the old value.
dataBean and myBean are in sessionScope. When i myBean put on requestscope, ajax request which works on page load, does not cath the mybean cause of being null.
Could anyone make clear this station.
Thanks very much.
try change the valueChangeListener for an ajax event tag like this.
<h:selectOneMenu id="changeCurrency" value="#dataBean.showCurrency}" valueChangeListener="#myBean.changePaymentCurreny}" onchange="submit()">
<f:selectItems value="#{my.currencyList}" />
<f:ajax event="change" listener="#{myBean.changePaymentCurreny}" process="#this" partialSubmit="true" />
</h:selectOneMenu>
<h:selectOneMenu id="changeCurrency2" value="#{dateBean.showCurrency}" onchange="submit()">
<f:selectItems value="#{myBean.currencyList}" />
<f:ajax event="change" listener="#{myBean.changePaymentCurreny}" process="#this" partialSubmit="true" />
</h:selectOneMenu>
facing a strange issue in one application I'm working on. This is a web-app using Richfaces 4.3. There is a <h:selectOneMenu> and inside that we are using a <a4j:ajax> element to fire a change event whenever the selected item is changed. Below is the code for this:
<h:selectOneMenu style="width:225px" id="mId" value="#{dataBean.meId }">
<f:selectItem itemLabel="-----Select----"></f:selectItem>
<f:selectItems value="#{dataBean.mes}" />
<a4j:ajax listener="#{dataBean.findId }" event="change" execute="#form" render="mId">
</a4j:ajax> </h:selectOneMenu>
The issue is that when I am selecting the value from the list for the first time. it automatically deselects the value and returns me to the default "-----select-----" value and the listener method is not fired. I have tried running the app in eclipse debug mode and the break-point I placed on the starting of the method is not fired. When selecting for the 2nd time it fired the break-point and worked as expected.
Tried with the below approach also. but the result is the same for this also:
<h:selectOneMenu style="width:225px" id="mId" value="#{dataBean.meId }
valueChangeListener="#{dataBean.findId1}">
<f:selectItem itemLabel="-----Select----"></f:selectItem>
<f:selectItems value="#{dataBean.mes}" />
<a4j:ajax event="valueChange" execute="#form" render="mId">
</a4j:ajax> </h:selectOneMenu>
Please suggest on the possible error reasons.
I have a <h:selectOneMenu> to select the values from. and a <p:commandButton> to fire an action.
The <p:commandButton> works fine and does all I wish to work. but If I modify the code for <h:selectOneMenu> like the following, it stopped firing the action.
<h:selectOneMenu valueChangeListener="#{searchBean.handleValueChange}" value="#{searchBean.teamName}" immediate="true">
<f:selectItems value="#{searchBean.teamName}"/>
<f:ajax event="click"/>
</h:selectOneMenu>
The valuChangeListener even does not work when I select the value from the drop down.
ManagedBean is in #ViewScoped and above codes are in <h:form> tag.
What could be the reason for this behavior?
you have to attach a onchange="submit()" JavaScript to the input component; Otherwise, no event will be fired.
<h:selectOneMenu
valueChangeListener="#{searchBean.handleValueChange}"
value="#{searchBean.teamName}" onchange="submit()" immediate="true">
<f:selectItems value="#{searchBean.teamName}"/>
<f:ajax event="click"/>
</h:selectOneMenu>
I have a page containing a PrimeFaces (2.2.1) Editor component, a Refresh button and a selectOneMenu, whose selection affects the contents of the Editor, as follows:
<p:editor id="uploadedText" value="#{facilityDataUploadBean.uploadedText}"
width="600" height="180" disabled="true" controls="" />
<h:commandButton value="Refresh" immediate="true" />
<h:selectOneMenu id="skipLines" styleClass="dropdown"
value="#{facilityDataUploadBean.skipLines}">
<f:selectItems value="#{facilityDataUploadBean.skipLinesList}" />
<f:ajax listener="#{facilityDataUploadBean.importParameterChanged}" />
</h:selectOneMenu>
facilityDataUploadBean.importParameterChanged updates facilityDataUploadBean.uploadedText. After changing the selectOneMenu value, the operator presses the Refresh button to refresh the page, including the contents of the p:editor. (I cannot simply refresh the p:editor using AJAX, because it doesn't re-render correctly, at least in PF 2.2.1.)
It seems like I ought to be able to accomplish the page refresh automatically when the selectOneMenu value is changed, but I've been unable to come up with a combination of attributes and events that will do that. I've tried various combinations of onchange="submit();", immediate="true" and valueChangeListener on the selectOneMenu, as well as execute="#all/#form", render="#all/#form" on the f:ajax event, all to no avail. My current workaround is to display a message asking the user to press the Refresh button whenever they change the selectOneMenu selection - pretty hokey.
Invoke window.location.replace(window.location.href) rather than submit() in the onchange event, as in:
<h:selectOneMenu id="skipLines" ... onchange="window.location.replace(window.location.href);">
<f:selectItems ... />
<f:ajax ... />
</h:selectOneMenu>
please try the onchange="window.location.reload();" approach like:
<h:selectOneMenu id="skipLines" ... onchange="window.location.reload();">
<f:selectItems ... />
<f:ajax ... />
</h:selectOneMenu>
This works just fine in my environment (GF 3.1.1, PF 3.2) but please be aware that there is the possibility of interrupting some ajax functinality.
Hope this helpes, have Fun!