CODEWITHSUNDEEP
javajsf-2
Mr.J4mes
Mr.J4mes

Reputation: 9266

Render on Ajax call does not work

In my application, I have the following piece of code:

<h:form>
    <h:outputLabel for="type" style="font-weight: bold" value="*Type: " />
    <h:selectOneMenu label="type" id="type" binding="#{type}">
        <f:ajax execute="type" render="text article video" />
        <f:selectItem itemValue="article" itemLabel="Article" />
        <f:selectItem itemValue="video"   itemLabel="Video" />
    </h:selectOneMenu>
    <p:message for="type" />

    <h:outputText id="text" value="#{type.value}" />

    <h:panelGrid id="article" rendered="#{type.value == 'article'}" >
        ...
    </h:panelGrid>

    <h:panelGrid id="video" rendered="#{type.value == 'video'}" >
        ...
    </h:panelGrid>
</h:form>

When I choose an option from the menu, I am sure that the Ajax call was fired because the <h:outputText> was rendered with type.value correctly. However, none of the <h:panelGrid> was rendered.

I'd be very grateful if you could tell me how I should tackle this problem.

Best regards,

James Tran

Upvotes: 2

Views: 2220

Answers (1)

BalusC
BalusC

Reputation: 1109735

JavaScript/Ajax cannot update HTML elements which are not rendered by JSF. Wrap it in a component which is always rendered and then update it instead.

<h:form>
    <h:outputLabel for="type" style="font-weight: bold" value="*Type: " />
    <h:selectOneMenu label="type" id="type" binding="#{type}">
        <f:ajax execute="type" render="text grids" />
        <f:selectItem itemValue="article" itemLabel="Article" />
        <f:selectItem itemValue="video"   itemLabel="Video" />
    </h:selectOneMenu>
    <p:message for="type" />

    <h:outputText id="text" value="#{type.value}" />

    <h:panelGroup id="grids">
        <h:panelGrid id="article" rendered="#{type.value == 'article'}" >
            ...
        </h:panelGrid>

        <h:panelGrid id="video" rendered="#{type.value == 'video'}" >
            ...
        </h:panelGrid>
    </h:panelGroup>
</h:form>

Upvotes: 2

Related Questions