JSF h:inputText validation and f:ajax render

Question

A very simple JSF applicaton:

InputText element is assigned with Validator.
f:ajax is used to render next element (phoneNumber) by using blur event.
PhoneNumber will only be displayed if inputText pass the validator and isValid boolean value is set to true

Here is the code snippet

<h:form id="invOrdersWizForm">                                  
    <h:inputText id="name" maxlength="9" styleClass="ordLabelNarrow"
        validator="#{person.validatePerson}"                                
        value="#{person.name}">
        <f:ajax render="phoneLabel" event="blur"/>                                                              
    </h:inputText>  
    <h:outputText id="phoneLabel"
        rendered="#{person.isValid}"                        
        styleClass="ordLabelWide" value="#{person.phoneNumber}" />
</h:form>

ManagedBean

public void validatePerson(FacesContext context, UIComponent toValidate, Object value) {
    name = ((String) value).toUpperCase();
    phoneNumber = "12345678";
    isValid = true;
}

The problem is, for some reason, the phoneNumber is not rendered at all.

The only way that I can make it work is by changing f:ajax to render @form

<h:inputText id="name" maxlength="9" styleClass="ordLabelNarrow"
    validator="#{person.validateSecurityCode}"                              
    value="#{person.name}">
    <f:ajax render="@form" event="blur"/>                                                               
</h:inputText>

Or remove rendered from phoneNumber

    rendered="#{person.isValid}"

For some reason f:ajax with specific element Id and rendered based on managedBean Attribute cannot co-exist.

Any idea or advice guys?

NOTE: this behaviour also happen when I use listener instead of validator

BalusC BalusC · Accepted Answer · 2010-11-10T13:55:10

The f:ajax operates at the client side. The element which is specified in render must be already present in the client side HTML DOM tree. Put it in for example a h:panelGroup instead which is always rendered to the client side.

<h:panelGroup id="phoneLabel">
    <h:outputText rendered="#{person.isValid}" value="#{person.phoneNumber}" />
</h:panelGroup>

JSF h:inputText validation and f:ajax render

1 Answers