渲染 Ajax 调用不起作用答案

【问题标题】：Render on Ajax call does not work渲染 Ajax 调用不起作用
【发布时间】：2012-05-25 21:43:26
【问题描述】：

在我的应用程序中，我有以下代码：

<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>

当我从菜单中选择一个选项时，我确信 Ajax 调用已被触发，因为 <h:outputText> 被正确地呈现为 type.value。但是，<h:panelGrid> 没有一个被渲染。

如果您能告诉我应该如何解决这个问题，我将不胜感激。

最好的问候，

詹姆斯·特兰

【问题讨论】：

标签： java jsf-2

【解决方案1】：

JavaScript/Ajax 无法更新不是由 JSF 呈现的 HTML 元素。将其包装在一个始终呈现的组件中，然后改为更新它。

<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>

【讨论】：

非常感谢！这正是我的问题:)。