PrimeFaces OverlayPanel 导致 JavaScript 错误“TypeError: f is undefined”答案

【问题标题】：PrimeFaces OverlayPanel causes JavaScript error "TypeError: f is undefined"PrimeFaces OverlayPanel 导致 JavaScript 错误“TypeError: f is undefined”
【发布时间】：2015-02-06 14:14:57
【问题描述】：

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

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

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 错误：

NetworkError: 403 Forbidden - https://localhost:8443/test/index.xhtml
TypeError: PF(...) 未定义

我将 PrimeFaces 5.1 与 JSF 2.2.8 一起使用

【问题讨论】：

你有 h:head、h:body 等吗？
@Jaqen: 可能，否则primefaces.js 不会首先加载。
是的，但谁知道呢:-)
正确。这很奇怪：当我将id="cmdBtnId" 添加到命令按钮并将for="cmdBtnId" 添加到overlayPanel 时，它工作正常。但我不想将 overlayPanel 绑定到一个按钮，它应该绑定到按钮列表，就像 PrimeFaces 的展示示例一样。

标签： jsf-2 primefaces

【解决方案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被“绑定”到特定按钮，你也可以在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 调用配合使用）

【讨论】：

是的，目标是在数据列表中使用它，我也尝试过，但失败了。您确定它只是用于数据表吗？
这至少适用于数据表，而不适用于您在上面的使用方式。如果它也适用于数据列表，我不知道。从未尝试过，也没有时间尝试未来的日子
似乎 datalist 仅适用于<p:dialog>。感谢您的提示！
@philsner，您将此问题标记为已解决，但它在数据表中真的有效吗？我有同样的问题 PF('overlayWidgetVar') undefined。（我使用 alert() 弹出 oncomplete 来验证）
@BamaiWu：是的，它适用于数据表！请参阅 PrimeFaces 展示。你的错误是不同的

【解决方案2】：

我将 PrimeFaces 5.1 与 JSF 2.2.8 一起使用

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

未捕获的类型错误：无法读取未定义的属性“长度”

修复（实际上是覆盖重构）已于 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

【讨论】：

【解决方案3】：

我认为@LeonardoHAlmeida 发布了正确答案。我找到了一种解决方法来避免这个错误。我刚刚创建了一个“假”按钮，只是为了能够为 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">

【讨论】：