p:outputPanel 不呈现页面部分

Question

我有两个 p:ouputPanels 具有 rendered 属性。当底层getter/setter 的值发生变化时，它们应该被渲染。但是，基础价值会以正确的顺序发生变化。第一个面板消失了，但是第二个面板没有出现。甚至不在 HTML 代码中！

我的两个面板：

    <p:outputPanel id="PanelParent">

     <h:form>
        <p:outputPanel id="PanelForm" rendered="#{PageService.isVisibilityForm()}">

        <h:commandButton value="Button"
                                            action="#{PageService.persist}"
                                            styleClass="btn btn-primary opal_btn submit_form_new" />
     </h:form>                      
        </p:outputPanel>

        <p:outputPanel id="PanelMessage" rendered="#{PageService.isVisibilityMessage()}">

        //Message

        </p:outputPanel>

    </p:outputPanel>

感谢你的回答！！！

-更新-

在代码中，我引用了 persist 方法，在这个方法中，我更改了每个部分的可见性的 getter 和 setter。

-UPDATE1-

好的，这实际上是我的代码：

            <p:outputPanel id="parentPanel">
                <p:outputPanel id="PanelForm"
                    rendered="#{PageService.isVisibilityForm()}">
                    <div>
                        <div>
                            <h:form class="homepage_invitee_form" action="" method="POST">

                                <p:messages id="messages" showDetail="false" autoUpdate="true"
                                    closable="true" />

                                <h:inputText required="true"
                                    value="#{PageService.instance.name}"
                                    name="name" placeholder="Last Name"
                                    styleClass="lastname_new" id="lastname_new"
                                    type="text placeholder" />

                                <h:commandButton value="Press"
                                    action="#{PageService.persist()}"/>

                                    <f:ajax render="" />
                                </h:commandButton>

                            </h:form>
                        </div>

                    </div>
                </p:outputPanel>

                <p:outputPanel id="PanelThank"
                    rendered="#{PageService.isVisibilityThank()}">
                    <div>
                        Message
                    </div>
                </p:outputPanel>
            </p:outputPanel>

我真的看不出哪里失败了？ ;(

Answer 1

就像 Xtreme Biker 所说的 <f:ajax> render 属性将渲染 DOM 中已经存在的元素。在您的情况下，<p:outputPanel id="PanelThank">render 属性正在评估为false，因此它不在 DOM 中。因此，<f:ajax> 无法渲染它。您需要指向始终可见的东西。改变

<f:ajax render="" />

到

<f:ajax render=":PanelThank" />

但更重要的是改变

<p:outputPanel id="PanelThank" rendered="#{PageService.isVisibilityThank()}">
    <div>
        Message
    </div>
</p:outputPanel>

到

<p:outputPanel id="PanelThank">
    <p:outputPanel rendered="#{PageService.isVisibilityThank()}">
        <div>
            Message
        </div>
    </p:outputPanel>           
</p:outputPanel>

也考虑重构您的代码。例如，不需要<h:form> 中的action 和method。

Answer 2

rendered 属性 defines if JSF will render your component in the DOM tree。您的问题是您无法更新不在树中的组件，因为您根本没有它：

<p:outputPanel id="PanelForm" rendered="#{PageService.isVisibilityForm()}">
    //my Form
<p:outputPanel>

<!--Fails if not PageService.isVisibilityForm(), because you don't have the component itself in the tree! So can't find it-->
<p:ajax update="PanelForm"/>

您最好将您的内容包装在另一个容器中，该容器始终呈现并更新它而不是另一个容器：

<h:panelGroup id="updatablePanel">
    <p:outputPanel rendered="#{PageService.isVisibilityForm()}">
        //my Form
    <p:outputPanel>
</h:panelGroup>

<p:ajax update="updatablePanel"/>