JSF2 - Primefaces - Partial update with command button not works when updating a nested panel

Question

I’m trying to update a part of my page using the following command:

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

When I click the button, the panel "createPanelDetailsAddress" is not updated. On the other side when I use update=":main_form”, the panel is updated (but all other panels inside the main_form are updated also) The panel I want to update is included in a panel named “createPanel”.

Could anyone have idea why update=":main_form:createPanelDetailsAddress" doesn't work in my case ?

I use primefaces3.5 and Mojarra JSF 2.1.7

Here is the code I used:

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>

Solution

Your update will fail because

 rendered="#{issuerComponent.renderCreatePanelDetailsAddress}"

will evaluate to false the first time the view is rendered. As a result the component is not in the DOM tree the first time the view is rendered.

Ajax updates work by locating a specific component (by id) in the DOM and replacing it with new markup. Your panel was never in the DOM to begin with, so there's nothing to update with ajax.

To remedy, you need to wrap the <p:panel/>with another component and make that component the target of your ajax update

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