渲染的Ajax調用不起作用

Question

在我的申請，我有如下一段代碼：

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

我會很感激，如果你能告訴我，我應該怎麼解決這個問題。

最好的問候，

詹姆斯陳

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