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>

JSF2 - Primefaces - 使用命令按钮进行部分更新在更新嵌套面板时不起作用

1 个答案: