在 tabview 内的对话框中，overlaypanel primefaces 无法正常工作答案

【问题标题】：overlaypanel primefaces doesnt work fine inside dialog inside tabview在 tabview 内的对话框中，overlaypanel primefaces 无法正常工作
【发布时间】：2013-04-23 13:19:49
【问题描述】：

我在一个p:tab 和一个p:dialog 中使用primefaces 的动态overlayPanel，如下所示：

    <p:dialog id="dialog" modal="true" header="Nouveau Article"
            widgetVar="dlg">

            <h:form prependId="false" enctype="multipart/form-data">

     <p:tabView id="monpanel">  

                    <p:tab id="tab1" title="Informations">
                    ....
                    </p:tab>
                    <p:tab id="tab2" title="Prix">
                    ....
                    </p:tab>
     <p:tab id="tab3" title="Stock et fournisseurs">


                        <h:outputLabel value="" /><h:outputLabel value="" /><h:outputLabel value="" />

                        <p:commandButton id="carBtn" value="Selectionner Fournisseurs" type="button" />

                        <p:overlayPanel  appendToBody="true" my="left top" id="carPanel" for="carBtn" hideEffect="fade"
                            dynamic="true">
                            <p:dataTable id="table" var="car" rowKey="#{car.fournisseurId}" 
                             value="#{articlesMB.listfournisseurs}"  selection="#{articlesMB.selectedFournisseurs}"
                                rows="10" paginator="true" >
                                <p:column  selectionMode="multiple" style="width:20px" />
                                <p:column headerText="Id">
                                    <h:outputText value="#{car.fournisseurId}" />
                                </p:column>

                                <p:column headerText="Nom">
                                    <h:outputText value="#{car.personne.nom}" />
                                </p:column>

                            </p:dataTable>
                        </p:overlayPanel>

                        </p:tab>
                         </p:tabView>
<p:commandButton id="article-ajouter"
                    update=":messages monpanel :articlesdata"
                    action="#{articlesMB.ajouter}" value="add" />
                         </h:form>
                         </p:dialog>

在第一次它工作正常，但是当我点击添加按钮并且验证失败（出于任何原因）并且我点击覆盖面板的动态按钮时，它会出现但是当我选中或取消选中其中一行数据表时它消失了，我不知道原因

你知道如何解决这个问题

【问题讨论】：

标签： primefaces overlay panel

【解决方案1】：

你的cammandButton应该使用'process'属性，你指定组件提交信息（不指定覆盖）。

例如：

<p:inputText id="txttest" required="true" value="" />
<p:commandButton process="txttest" id="article-ajouter"
                    update=":messages monpanel :articlesdata"
                    action="#{articlesMB.ajouter}" value="add" />

【讨论】：

虽然我有很多组件要处理（只有一两个不处理），那我可以排除它而不是处理其余部分
可以，例如：process="@(:input:not(select))"（处理输入组件但不处理选择组件）

【解决方案2】：

您的覆盖面板只工作一次的原因是因为您更新了包含overlayPanel 附加到的命令按钮的面板。这是 PF 5 之后出现的overlayPanel 中的一个错误。您可以在不诉诸进程属性的情况下修复此问题，我认为这样的解决方案会降低代码的可读性。

如果您将widgetVar 定义为overlayPanel，例如'carPanelWDG'，并在命令按钮的onComplete 事件中调用PF('carPanelWDG').loadContents() 函数，则一切正常。即使没有评论解释你这样做的原因，任何人都可以轻松解释。

【讨论】：