Question
I am facing problem in resetting the p:selectOneMenu. In my facelet, I have two p:selectOneMenu items. My requirement is that, if user chooses something from first p:selectOneMenu, then second p:selectOneMenu should reset itself and vice versa.
Below is the code I am using:
https://stackoverflow.com/questions/21902009
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<p:outputLabel for="country" value="Country:" />
<p:selectOneMenu id="country" effect="none"
value="#{infoBean.infoDataHolder.selectedCountry}">
<f:selectItem itemLabel="Select One" itemValue=""
noSelectionOption="true" />
<f:selectItems
value="#{infoBean.infoDataHolder.availableCountries}"
var="aCountry" itemLabel="#{aCountry.description}"
itemValue="#{aCountry.description}" />
<p:ajax update="state"
listener="#{infoBean.resetState()}" />
</p:selectOneMenu>
<p:outputLabel for="state" value="State:" />
<p:selectOneMenu id="state" effect="none"
value="#{infoBean.infoDataHolder.selectedState}">
<f:selectItem itemLabel="Select One" itemValue=""
noSelectionOption="true" />
<f:selectItems
value="#{infoBean.infoDataHolder.availableStates}"
var="aState" itemLabel="#{aState}"
itemValue="#{aState}" />
<p:ajax update="country"
listener="#{infoBean.resetCountry()}" />
</p:selectOneMenu>
My backing bean InfoBean is in RequestScope and infoDataHolder is in View Scope. In infoBean.resetCountry() / infoBean.resetState(), I am making the infoBean.infoDataHolder.selectedCountry / infoBean.infoDataHolder.selectedState as null.
Now what is happening is that when I am choosing State, Country p:selectOneMenu is getting resetted. but choosing country, State p:selectOneMenu is not getting resetted. Could you please help me here. Thanks.
Solution
You may wanted to update parent component of select one menu like
<p:panel id="panel_">
<p:selectOneMenu id="country" ...
<p:ajax update="panel_" listener="#{infoBean.resetState()}" />
</p:selectOneMenu>
<p:selectOneMenu id="state" ...
<p:ajax update="panel_" listener="#{infoBean.resetCountry()}" />
</p:selectOneMenu>
</p:panel>
OTHER TIPS
I can't see the point of your requirement of reseting the country list when selecting an state. The proper behaviour here is, in my opinion, allowing the end user to choose an State inside each country. That's done by loading the related states for each country and rendering the dependent h/p:selectOneMenu.
I don't encourage you to use two different beans for that, just go with @ViewScoped. Also accessing transient JSF managed beans from the view the way you do (#{infoBean.infoDataHolder}) does not make sense in JSF, just access to a bean directly.
Here you've got my workaround:
@ManagedBean
@ViewScoped
public class InfoDataHolder {
private List<String> availableCountries = Arrays.asList("USA",
"Switzerland");
private List<String> availableStates = new ArrayList<String>();
private String selectedCountry;
private String selectedState;
public void countrySelected() {
if ("USA".equals(selectedCountry)) {
availableStates = Arrays.asList("Arizona", "California");
} else if ("Switzerland".equals(selectedCountry)) {
availableStates = Arrays.asList("Zurich", "Bern");
} else {
availableStates = new ArrayList<String>();
}
}
public List<String> getAvailableCountries() {
return availableCountries;
}
public List<String> getAvailableStates() {
return availableStates;
}
public String getSelectedCountry() {
return selectedCountry;
}
public String getSelectedState() {
return selectedState;
}
public void setSelectedCountry(String selectedCountry) {
this.selectedCountry = selectedCountry;
}
public void setSelectedState(String selectedState) {
this.selectedState = selectedState;
}
}
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head />
<h:body>
<h:form>
<h:selectOneMenu value="#{infoDataHolder.selectedCountry}">
<f:selectItem noSelectionOption="true" itemLabel="Choose a Country" />
<f:selectItems var="country"
value="#{infoDataHolder.availableCountries}" itemValue="#{country}" />
<f:ajax listener="#{infoDataHolder.countrySelected}"
render="state_selection" />
</h:selectOneMenu>
<h:selectOneMenu value="#{infoDataHolder.selectedState}"
id="state_selection">
<f:selectItem noSelectionOption="true" itemLabel="Choose an State" />
<f:selectItems value="#{infoDataHolder.availableStates}" var="state"
itemValue="#{state}" />
</h:selectOneMenu>
</h:form>
</h:body>
</html>
See also:
