Question

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

我构建了一个简单的应用程序，但是在页面加载时，它会直接导致第3列第14行第4157行的JavaScript错误TypeError: f is undefined //javax.faces.resource/primefaces.js.xhtml?ln = primefaces＆安培; v = 5.1＆＃34;

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

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被“绑定”到特定按钮，你还可以在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

我正在使用PrimeFaces 5.1和JSF 2.2.8

在Primefaces 5.1版上，如果你让p：overlay没有 for =＆＃34; imageBtn＆＃34; 属性，则浏览器控制台会显示错误：

未捕获的TypeError：无法读取属性＆＃39;长度＆＃39;未定义的

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

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

OverlayPanel不会在Primefaces版本5.1上工作，除非您指定＆＃34; for＆＃34; 属性，这不是指定使用数据表的方式。< / p>

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

Answer 3

我认为@LeonardoHAlmeida发布了正确答案。我找到了一个避免这个bug的解决方法。我刚创造了一个＆＃34;假的＆＃34;按钮只是为了能够设置＆＃34; for＆＃34;的目标。 overlayPanel中的属性

<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导致JavaScript错误＆＃34; TypeError：f未定义＆＃34;

3 个答案: