JSF2 - Primefaces - 用命令按鈕沒有更新嵌套的面板

Question

我嘗試使用下面的命令來更新我的網頁的一部分，當作品部分更新：

<p:commandButton id="bntNewAddress" immediate="true" 
value="New Address" disabled="false" icon="ui-icon-document" 
process="@this" update=":main_form:createPanelDetailsAddress" 
action="#{issuerComponent.initAddNewAddress}"> 
</p:commandButton> 

當我按一下按鈕，面板「createPanelDetailsAddress」未更新。另一方面，當我使用update =「：main_form」時，面板被更新（但main_form中的所有其他面板也被更新） 我想要更新的面板包含在名爲「createPanel」的面板中

任何人都可以有想法，爲什麼更新=「：main_form：createPanelDetailsAddress」？不在我的情況下工作

我用primefaces3.5和鑽嘴魚科JSF 2.1.7

這裏是我使用的代碼：

public String initAddNewAddress(){ 
renderCreatePanelDetailsAddress = true; 
return null; 
} 

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:f="http://java.sun.com/jsf/core" 
xmlns:ui="http://java.sun.com/jsf/facelets" 
xmlns:p="http://primefaces.org/ui" template="/template.xhtml"> 

<ui:define name="content"> 
    <h:form id="main_form"> 
     <p:panel id="createPanel" rendered="true"> 

      <p:messages id="msgCreate" /> 

      <p:panel id="createPanelDetails" 
       header="#{issuerMsgs['issuer.createArea.title']}"> 

       <h:panelGrid border="0" columns="6"> 

        <h:outputText value="#{issuerMsgs['issuer.issuerCode.title']}:" /> 
        <p:inputText required="true" 
         value="#{issuerComponent.updateIssuer.issuerCode}" 
         label="issuer_issuerCode"> 

        </p:inputText> 
        <h:outputText value="#{issuerMsgs['issuer.description.title']}:" /> 
        <p:inputText required="true" 
         value="#{issuerComponent.updateIssuer.description}" 
         label="issuer_description"> 

        </p:inputText> 
       </h:panelGrid> 
      </p:panel> 

      <p:spacer height="10" /> 

      <p:panel id="panelListAddress" 
       header="#{addressMsgs['address.createArea.title']}"> 

       <p:dataTable id="addresslist" var="address" 
        value="#{issuerComponent.addressList}" paginator="false" rows="10"> 
        <p:column> 
         <f:facet name="header"> 
          <h:outputText value="#{addressMsgs['address.tel.title']}" /> 
         </f:facet> 
         <h:outputText value="#{address.tel}" /> 
        </p:column> 

       </p:dataTable> 

       <p:spacer height="22" width="0" /> 

       <p:commandButton id="bntNewAddress" immediate="true" 
        value="New Address" disabled="false" icon="ui-icon-document" 
        process="@this" update=":main_form:createPanelDetailsAddress" 
        action="#{issuerComponent.initAddNewAddress}"> 
       </p:commandButton> 

      </p:panel> 

      <p:panel id="createPanelDetailsAddress" 
       header="#{addressMsgs['address.createArea.title']}" 
       rendered="#{issuerComponent.renderCreatePanelDetailsAddress}"> 

       <ui:include src="createAddress.xhtml"></ui:include> 

       <p:commandButton value="Add" 
        rendered="#{issuerComponent.renderBtnAddAddress}" disabled="false" 
        icon="ui-icon-document" process="@this,createPanelDetailsAddress" 
        update=":main_form" action="#{issuerComponent.addNewAddress}" 
        actionListener="#{addressComponent.addNewComposite}"> 

        <f:setPropertyActionListener 
         value="#{addressComponent.updateAddress}" 
         target="#{issuerComponent.address}" /> 
       </p:commandButton> 
      </p:panel> 

     </p:panel> 
    </h:form> 
</ui:define> 
</ui:composition> 

Answer 1

您的更新e將失敗，因爲

rendered="#{issuerComponent.renderCreatePanelDetailsAddress}" 

將在第一次渲染視圖時評估爲false。因此，第一次呈現視圖時，組件不在DOM樹中。

阿賈克斯更新，通過定位DOM中的特定成分（id），並用新的標記替換它。開始時，您的面板從來沒有在DOM中，所以沒有什麼可以使用ajax進行更新。

爲了補救，你需要用的<p:panel/>與另一個組件，使該組件在Ajax更新

<p:outputPanel id="container" layout="none"> 
     <p:panel id="createPanelDetailsAddress" header="# addressMsgs['address.createArea.title']}" rendered="#issuerComponent.renderCreatePanelDetailsAddress}"> 
      <ui:include src="createAddress.xhtml"></ui:include> 
      <p:commandButton value="Add" 
       rendered="#{issuerComponent.renderBtnAddAddress}" disabled="false" 
       icon="ui-icon-document" process="@this,createPanelDetailsAddress" 
       update=":main_form" action="#{issuerComponent.addNewAddress}" 
       actionListener="#{addressComponent.addNewComposite}"> 

       <f:setPropertyActionListener 
        value="#{addressComponent.updateAddress}" 
        target="#{issuerComponent.address}" /> 
      </p:commandButton> 
     </p:panel> 
    </p:outputPanel>