Reset other input component values when using ajax

[Alan Smith]

Hi,

could anyone help me with the following... the form is here:

<h:form>
        <h:panelGrid id="pg1" columns="2">

            <h:outputText value="Type: "/>

            <h:selectOneMenu id="selectOne" value="#{personBean.type}">
                <f:selectItems value="#{listBean.personTypes}"/>
                <f:ajax event="valueChange" render="pg2"/>
            </h:selectOneMenu> 

        </h:panelGrid>

        <h:panelGrid id="pg2" columns="2">

            <h:outputText value="Really bad?" rendered="#{personBean.type=='BAD'}"/>

            <h:selectBooleanCheckbox id="checkbox" value="#{personBean.reallyBad}" rendered="#{personBean.type=='BAD'}">
                <f:ajax event="click"/>
            </h:selectBooleanCheckbox>

        </h:panelGrid>

        <h:commandButton value="Ajax Submit" action="#{personBean.printValues}">
            <f:ajax execute="@form"/>
        </h:commandButton>
</h:form>

The PersonBean is a simple bean with an enum PersonType that has two values: NICE, BAD and a Boolean called reallyBad. The ListBean returns the enum values in a list to populate the selectOneMenu.

Basically when I select BAD the panel for the boolean checkbox is rendered where I can tick it to say a person is reallyBad. I can then submit the form if I wish. The problem is when I tick the checkbox and then select NICE again, the checkbox is still ticked even though it is not rendered. So when I submit my form the person can be NICE and reallyBad, which doesn't make sense.

Rather than having to select BAD again to uncheck the box, is their a way that I can reset the checkbox and its input value to false when NICE is selected? I'm a bit of a noob to ajax with JSF! Thanks.

ps. I am printing the values of the two inputs on submit with the commandButtons action to verify the results...

[Tim Holloway]

I don't really recommend EL expressions such as "#{personBean.type=='BAD'}". They're often polluting the View with Model logic, and they're a to debug. So I tend to opt for things like "#{personBean.badPerson}".

To obtain proper operation, have your AJAX server-side listener code update whatever Model (backing bean) values need to be changed and use the AJAX "render" option to tell JSF to re-render the affected controls (and update their values from the backing bean).

[Alan Smith]

Tim Holloway wrote:I don't really recommend EL expressions such as "#{personBean.type=='BAD'}". They're often polluting the View with Model logic, and they're a to debug. So I tend to opt for things like "#{personBean.badPerson}".

Hi Tim, I got the ajax listener to work with a method that resets the checkbox value to false, cheers. I assume when using ajax, that listeners/validators etc get called before the render attribute??

Regarding the quote above, I agree but when I create a method...

    public Boolean badPerson(){
        return type == PersonType.BAD;
    }

... I get an error saying "/index.xhtml @26,123 rendered="#{personBean.badPerson}": The class 'com.alan.dropdowntest.PersonBean' does not have the property 'badPerson'."

How do I get around this? The listener method I called works without this error.

Thanks

[Tim Holloway]

Properties are accessed via POJO accessor methods. In other words, the method name should be "isBadPerson()" not "badPersion()". For non-boolean properties, it would be "getBadPerson()", but I believe that one also works on booleans.