I have a SelectOneMenu inside of a OverlayPanel that is binded in one CommandButton inside of one Dialog.
When i click in anywhere of my page, my browser throws the following error.
When i click in my SelectOneMenu, not show it's options.
JDK: 1.7 (x64)
Server: Tomcat 7
JSF: 2.1.4 (Mojarra)
PrimeFaces: 3.1 Snapshot - Trunk (rev 6721 - 30/01/2012)
Chrome:
Firefox:Uncaught TypeError: Cannot read property 'left' of null
(anonymous function)primefaces.js.xhtml:15
jQuery.event.handlejquery.js.xhtml:3001
jQuery.event.add.elemData.handle.eventHandle
b is null
http://192.168.0.66:8080/PrimeFacesTest ... 1-SNAPSHOT
Line 15
...state-disabled")){a.addClass("ui-state-active").children(".ui-chkbox-icon").addC...
My evidence xhtml file:This error is in equivalent line 245 (Firefox) and 251 (Chrome) of forms.js (Primefaces Source):Code: Select all
offset = _self.panel.offset();// Line 245 (Firefox Error) if (e.target === _self.label.get(0) || e.target === _self.menuIcon.get(0) || e.target === _self.menuIcon.children().get(0)) { return; } if (e.pageX < offset.left || //Line 251 (Chrome Error) e.pageX > offset.left + _self.panel.width() || e.pageY < offset.top || e.pageY > offset.top + _self.panel.height()) { _self.hide(); }
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<title>Default title</title>
</h:head>
<h:body>
<h:form>
<p:commandButton id="myDialogShowButton" value="Show Dialog" type="button" icon="ui-icon ui-icon-plusthick" onclick="carDialog.show()"/>
<p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
width="400" showEffect="clip" hideEffect="fold" modal="true" appendToBody="false">
<p:commandButton id="myDialogHideButton" value="Hide Dialog" type="button" icon="ui-icon ui-icon-plusthick" onclick="carDialog.hide()"/>
<p:commandButton id="myOverlayButton" value="Show Overlay" type="button" icon="ui-icon ui-icon-plusthick" />
</p:dialog>
<p:overlayPanel id="myOverlayPanel" showEffect="fade" styleClass="customZindex" for="myOverlayButton" hideEffect="fade">
<h:outputLabel value="Test:" />
<p:selectOneMenu required="false" >
<f:selectItem itemValue="#{null}" itemLabel="" />
<f:selectItem itemValue="#{null}" itemLabel="A" />
<f:selectItem itemValue="#{null}" itemLabel="B" />
<f:selectItem itemValue="#{null}" itemLabel="C" />
<f:selectItem itemValue="#{null}" itemLabel="D" />
</p:selectOneMenu>
</p:overlayPanel>
</h:form>
</h:body>
</f:view>
</html>