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"的面板中。

有没有人知道为什么update=":main_form:createPanelDetailsAddress"在我的情况下不起作用?

我使用的是primefaces3.5和Mojarra 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

您的更新将失败，因为

 rendered="#{issuerComponent.renderCreatePanelDetailsAddress}"

将在第一次渲染视图时求值为false。因此，当视图第一次呈现时，组件并不在DOM树中。

Ajax更新通过在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>