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>