Enable/Disable through two

Question

I need to enable a commandButton when two required selectOneMenu components have not empty values

This is my view:

<p:selectOneMenu converter="omnifaces.SelectItemsConverter" id="countries" required="true" value="#{countryBean.selectedCountry}">
    <f:selectItem itemLabel="#{msg['choose.option']}" />
    <f:selectItems value="#{countryBean.countries}" var="country" itemLabel="#{country.name}" />
    <f:ajax listener="#{countryBean.changeCountry}" render="cities" update="findPeopleButton" />
</p:selectOneMenu>
<p:selectOneMenu converter="omnifaces.SelectItemsConverter" id="cities" required="true" value="#{countryBean.city}">
    <f:selectItem itemLabel="#{msg['choose.option']}" />
    <f:selectItems value="#{countryBean.cities}" var="city" itemLabel="#{city.name}" />
    <f:ajax listener="#{countryBean.verifyRequiredFields}" update="findPeopleButton" />
</p:selectOneMenu>
<p:commandButton icon="ui-icon-search"
    disabled="#{countryBean.disablePeopleButton}"
    id="findPeopleButton"
    onclick="peopleDialog.show()" />

I disabled the button when my view loads, then when I select values for each selectOneMenu the button enables but after that when I set an empty value of some selectOneMenu I get a required validation error message and the button keeps enabled

This is my backing bean:

private Country country; // +getter+setter
private City city; // +getter+setter
private List<Country> countries; // +getter
private List<City> cities; // +getter
private boolean disablePeopleButton; // +getter+setter

@EJB
private CountryService countryService;

@PostConstruct
public void init() {
    disablePeopleButton = true;
    countries = countryService.getCountries();
}

public void changeCountry() {
    cities = countryService.getCities(country);
}

public void verifyRequiredFields() {
    if (country != null && city != null) {
        disablePeopleButton = false;
    } else {
        disablePeopleButton = true;
    }
}

What can I do to fix it?

Instead of checking whether the objects are null in `verifyRequiredFields()`, you should check to see if they have a valid value. You should also use `` on both selectOneMenus in my opinion. — LucasP, Oct 18 '13 at 20:22
Ok @LucasPate but my real problem is that when I select the default option (choose item) my selectOneMenu throws a required validation error message — John Alexander Betts, Oct 18 '13 at 20:35
why not just remove all `required` attributes. if not both are selected the button is disabled anyway. — Lester, Oct 18 '13 at 23:04

Lester · Answer 1 · 2013-10-20T18:05:17.800

Try this:

<h:form>
    <p:selectOneMenu id="countries"
        converter="omnifaces.SelectItemsConverter"
        value="#{countryBean.selectedCountry}">
        <f:selectItem itemLabel="#{msg['choose.option']}"/>
        <f:selectItems value="#{countryBean.countries}" var="country"
            itemLabel="#{country.name}" />
        <p:ajax listener="#{countryBean.changeCountry()}" 
                update="cities findPeopleButton" />
    </p:selectOneMenu>
    <p:selectOneMenu id="cities"
        converter="omnifaces.SelectItemsConverter"
        value="#{countryBean.city}">
        <f:selectItem itemLabel="#{msg['choose.option']}" />
        <f:selectItems value="#{countryBean.cities}" var="city"
            itemLabel="#{city.name}" />
        <p:ajax update="findPeopleButton" />
    </p:selectOneMenu>
    <p:commandButton icon="ui-icon-search"
        disabled="#{empty countryBean.city}"
        id="findPeopleButton" onclick="peopleDialog.show()" />
</h:form>

and this:

    private Country selectedCountry; // +getter+setter
    private City city; // +getter+setter
    private List<Country> countries; // +getter
    private List<City> cities; // +getter

    @EJB
    private CountryService countryService;

    @PostConstruct
    public void init() {
        countries = countryService.getCountries();
    }

    public void changeCountry() {
        if (selectedCountry != null) {
            cities = countryService.getCities(selectedCountry);
        }
        city = null;
    }

Don't know how this correlates with your issues but you were using #{countryBean.selectedCountry} in Facelets code while only having country in the bean. You also used render and update on <f:ajax> which has only the former, while <p:ajax> has only the latter.

score 0 · Answer 2 · answered Oct 20 '13 at 07:51

use itemValue="" in both p:selectOneMenu

<p:selectOneMenu converter="omnifaces.SelectItemsConverter" id="countries" required="true" value="#{countryBean.selectedCountry}">
    <f:selectItem itemLabel="#{msg['choose.option']}" itemValue=""/>
    <f:selectItems value="#{countryBean.countries}" var="country" itemLabel="#{country.name}" />
    <f:ajax listener="#{countryBean.changeCountry}" render="cities" update="findPeopleButton" />
</p:selectOneMenu>
<p:selectOneMenu converter="omnifaces.SelectItemsConverter" id="cities" required="true" value="#{countryBean.city}">
    <f:selectItem itemLabel="#{msg['choose.option']}" itemValue=""/>
    <f:selectItems value="#{countryBean.cities}" var="city" itemLabel="#{city.name}" />
    <f:ajax listener="#{countryBean.verifyRequiredFields}" update="findPeopleButton" />
</p:selectOneMenu>
<p:commandButton icon="ui-icon-search"
    disabled="#{countryBean.disablePeopleButton}"
    id="findPeopleButton"
    onclick="peopleDialog.show()" />

Enable/Disable through two

2 Answers2