Primefaces动态overlayPanel只显示一次答案

【问题标题】：Primefaces dynamic overlayPanel showing only oncePrimefaces动态overlayPanel只显示一次
【发布时间】：2013-03-17 09:59:33
【问题描述】：

我有一个带有打开 Primafaces overlayPanel 的按钮的表单。在面板中有另一个按钮，它执行 Ajax 操作，然后关闭覆盖。
这是一个完全没有 Ajax 操作的简化版本：

<h:form>
    <p:commandButton id="button1" value="Open overlay" type="button"/>
    <p:overlayPanel for="button1" widgetVar="ovl" dynamic="true">
        <p:commandButton value="Close" oncomplete="ovl.hide();"
                         update="@form"/>
    </p:overlayPanel>
</h:form>

请注意，面板必须有dynamic="true"，因为在实际应用程序中必须获取动态内容，并且需要update="@form"才能更新其他表单组件。

问题是：如果我同时拥有dynamic="true" 和update="@form" 两个属性，则覆盖仅在第一次出现。单击“关闭”按钮后，如果我再次尝试单击“打开覆盖”，面板将不会显示。

我做错了什么？

（使用 PrimeFaces 3.5 和 GlassFish 3.1.2.2）

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

在下拉overlaypanel 的按钮中使用onclick="widgetVar.loadContents()"，其中widgetVar 是overlayPanel 的变量。

【讨论】：

谢谢它的工作。你是怎么找到这个方法的，它没有在 Primefaces 用户指南中列出。
更新：onclick="PF('widgetVar').loadContents();"

【解决方案2】：

我在下面的代码中注意到的是，一旦您更新了包含 Open-Overlay 按钮的表单，它就会中断。

<h:form>
    <p:commandButton id="button1" value="Open overlay" type="button"/>
    <p:commandButton value="break things" update="@form" />
    <p:overlayPanel for="button1" dynamic="true">
        <p:commandButton value="Close" update="@form" />
    </p:overlayPanel>
</h:form>

如果可以将表单一分为二，则嵌入在 OverlayPanel 中的按钮可以尝试调用单击用于切换覆盖的按钮。也许与下面的内容一致。

<h:form>
    <p:commandButton id="button1" value="Open overlay" type="button"/>
    <p:overlayPanel for="button1" dynamic="true" >
        <p:commandButton value="Close" update=":formToBeUpdated" onclick="document.getElementById('button1').click();"/>
    </p:overlayPanel>
</h:form>

<h:form id="formToBeUpdated">
    <h:inputText value="bleh"/>
</h:form>

【讨论】：

谢谢阿克塞尔。不幸的是，覆盖是在许多不同视图中使用的复合组件的一部分，因此它必须由父表单元素托管：它不能定义自己的表单，因为我最终会使用嵌套表单。

【解决方案3】：

你应该给你的 overlayPanel 一个 id 并且你的按钮的 oncomplete 显示它。代码如下：

<h:form>
   <p:commandButton id="button1" value="Open overlay" type="button" oncomplete="PF('ovlID').show()"/>
   <p:overlayPanel id="ovlID" for="button1" widgetVar="ovl" dynamic="true">
      <p:commandButton value="Close" oncomplete="ovl.hide();"
                     update="@form"/>
   </p:overlayPanel>
</h:form>

【讨论】：