2

私のアプリケーションには、次のコードがあります。

<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>レンダリングされたため、Ajax 呼び出しが発生したことを確認できます。type.valueただし、どれも<h:panelGrid>レンダリングされませんでした。

この問題にどのように対処すればよいか教えていただければ幸いです。

よろしくお願いします、

ジェームズ・トラン

4

1 に答える 1

2

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>
于 2012-05-25T13:43:26.297 に答える