PrimeFaces OverlayPanel causes JavaScript error "TypeError: f is undefined"

Question

我正在尝试使用 <p:overlayPanel> 作为 PrimeFaces 展示示例 (http://www.primefaces.org/showcase/ui/overlay/overlayPanel.xhtml) 中所述的小部件。

我构建了一个简单的应用程序，但在页面加载时它直接导致 JavaScript 错误 TypeError: f is undefined 在“/javax.faces.resource/primefaces 中第 3 列第 1457 行.js.xhtml?ln=primefaces&v=5.1"

xhtml 正文代码为：

<h:form id="form"> 

    <p:commandButton update=":form:infoPanel" oncomplete="PF('testOverlayPanel').show('#{component.clientId}')" value="Test"/>

    <p:overlayPanel widgetVar="testOverlayPanel" dismissable="false" showCloseIcon="true">
        <p:outputPanel id="infoPanel" style="text-align:center;">
            Hello OverlayPanel!
        </p:outputPanel>
    </p:overlayPanel>

</h:form>

当我删除 overlayPanel 时，JavaScript 错误消失了。

当我按下命令按钮时，出现另外两个 JavaScript 错误：

网络错误：403 禁止 - https://localhost:8443/test/index.xhtml
TypeError: PF(...) 未定义

我正在使用 PrimeFaces 5.1 和 JSF 2.2.8

Answer 1

您没有像在展示中那样使用它 ;-)。

<p:commandButton update=":form:infoPanel" 
    oncomplete="PF('testOverlayPanel').show('#{component.clientId}')"
    value="Test"/>

用于数据表（如展示中所示）。通常你只需要做一个

<p:commandButton update=":form:infoPanel" 
    oncomplete="PF('testOverlayPanel').show()" value="Test"/>

但是如果 overlayPanel 是 'bound' 到一个特定的按钮，你也可以在 overlayPanel 上添加 'for' 属性，如果你在按钮上放一个 id

<p:commandButton id="imageBtn" value="Basic" type="button" />
<p:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
    <p:graphicImage name="/demo/images/nature/nature1.jpg" width="300" />
</p:overlayPanel>

（不确定后者如何处理 ajax 调用）

Answer 2

I am using PrimeFaces 5.1 with JSF 2.2.8

在 Primefaces 版本 5.1 上，如果您让 p:overlay 没有 for="imageBtn" 属性，浏览器控制台会显示错误：

未捕获类型错误：无法读取未定义的属性'length'

修复（实际上是覆盖重构）已于 2014 年 11 月 14 日提交，如下所示：

https://code.google.com/p/primefaces/source/detail?r=12016

除非您指定 "for" 属性，否则 OverlayPanel 将无法在 Primefaces 版本 5.1 上运行，而这不是指定用于数据表的方式。

可能适用于 5.1.3 及更高版本。参见 https://code.google.com/p/primefaces/issues/detail?id=7615

Answer 3

我认为@LeonardoHAlmeida 发布了正确答案。我找到了避免此错误的解决方法。我刚刚创建了一个 "fake" 按钮，以便能够为 overlayPanel

中的 "for" 属性设置目标

<p:commandButton id="fakeButton" style="display: none"></p:commandButton>

所以我的叠加层看起来像：

<p:overlayPanel widgetVar="wOverlay" appendToBody="true"  for="fakeButton">
    <p:outputPanel id="display">
        ...
    </p:outputPanel>
</p:overlayPanel>

我的数据表中的按钮是：

<p:commandButton update=":form:display" oncomplete="PF('wOverlay').show('#{component.clientId}')" icon="ui-icon-search">

PrimeFaces OverlayPanel causes JavaScript error "TypeError: f is undefined"

PrimeFaces OverlayPanel causes JavaScript error "TypeError: f is undefined"

primefaces

jsf-2