Question

This is the code:

<h:panelGrid columns="3" style="margin-left: auto; margin-right:auto;">
    <f:facet name="header">
        <rich:column colspan="2">
            <h:outputText value="Ingrese datos del padre" />
        </rich:column>
    </f:facet>

    <label for="padreRut">RUT</label>
    <h:inputText id="padreRut" value="#{IngresoAlumno.padre.per_Rut}">
        <a4j:ajax event="keyup" render="formPadre" immediate="true" />
        <f:validateLongRange minimum="0" />
    </h:inputText>
    <rich:message for="padreRut" ajaxRendered="true" />
</h:panelGrid>

<h:panelGrid id="formPadre" columns="3" style="margin-left: auto; margin-right:auto;" rendered="#{IngresoAlumno.padre.per_Rut gt 0}">
//...From here on there are form elements

The problem is that when I trigger the event, the second panelGrid won’t render. Am I doing something wrong here? Thank you beforehand.

Answer 1

The ajax magic is executed by JavaScript code which runs in the client side and works on the HTML DOM tree. With specifying render="someId", you’re basically telling JavaScript to replace the HTML representation of the JSF component with the given ID with the new HTML representation in the retrieved ajax response.

However, if the HTML representation of the JSF component with the given ID is not rendered by JSF in first place, then JavaScript can’t find anything in the HTML DOM tree to replace.

This is what is happening in your case. You should instead specify the ID of a JSF component which is always rendered, so that JavaScript can find it and update it in the HTML DOM tree whenever necessary. You could use a <h:panelGroup> for this.

<a4j:ajax ... render="formPadre" />
...
<h:panelGroup id="formPadre">
    <h:panelGrid ... rendered="#{IngresoAlumno.padre.per_Rut gt 0}">
        ...

See also:

• Communication in JSF 2.0 – Ajax rendering of content which is by itself conditionally rendered