[PF 3.1 Snapshot] Dialog + OverlayPanel + SelectOneMenu JS E

Components, Ajax Framework, Utilities and More.
Post Reply
caioquirino
Posts: 70
Joined: 12 Jan 2012, 15:06
Location: Brazil

31 Jan 2012, 13:46

[PF 3.1 Snapshot] Dialog + OverlayPanel + SelectOneMenu JS Error:

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:
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
Firefox:
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...
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();
        }
My evidence xhtml file:

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>
PrimeFaces 3.3 GA, Mojarra 2.1.7, Tomcat 7, JDK1.7 x64, Fedora Core 16, Eclipse Indigo

caioquirino
Posts: 70
Joined: 12 Jan 2012, 15:06
Location: Brazil

01 Feb 2012, 15:31

I think that it is a bug.
Should i open one issue?

Thanks!
PrimeFaces 3.3 GA, Mojarra 2.1.7, Tomcat 7, JDK1.7 x64, Fedora Core 16, Eclipse Indigo

Radisa Urosevic
Posts: 4
Joined: 21 Jun 2011, 13:31

01 Feb 2012, 15:40

Did you make an issue for this?

I have now realized that this is the problem I experienced here:
viewtopic.php?f=3&t=16955

If I use h:selectOneMenu I don't have the js exception.

Thank you.

caioquirino
Posts: 70
Joined: 12 Jan 2012, 15:06
Location: Brazil

01 Feb 2012, 19:11

Hi Radisa, i'm used h:selectOneMenu as a workaround, and it works for me.

I will continue studying PrimeFaces source to search a solution for this error... =]
PrimeFaces 3.3 GA, Mojarra 2.1.7, Tomcat 7, JDK1.7 x64, Fedora Core 16, Eclipse Indigo

caioquirino
Posts: 70
Joined: 12 Jan 2012, 15:06
Location: Brazil

03 Feb 2012, 14:46

Hi,
I'm opened issue 3424(https://code.google.com/p/primefaces/is ... il?id=3424) 2 days ago.

Optimus Prime closed this issue (as Fixed) with a comment: "Replicated, quite tricky to solve."

Anyone have the original issue for this error?

Thanks!
PrimeFaces 3.3 GA, Mojarra 2.1.7, Tomcat 7, JDK1.7 x64, Fedora Core 16, Eclipse Indigo

csyperski
Posts: 89
Joined: 16 Apr 2010, 14:36

03 Feb 2012, 15:16

I am seeing the same error but in the autocomplete component when using the dropdown="true". It seems to work with some datasets but not others.

Here is my xhtml

Code: Select all

<p:autoComplete dropdown="#{cc.attrs.dropDown}"  styleClass="#{cc.attrs.styleClass}" maxResults="100" queryDelay="500" completeMethod="#{autoCompleteBean.autoCompleteSuggest}" value="#{cc.attrs.value}">
                <f:attribute name="suggestionKey" value="#{cc.attrs.suggestionKey}" />
</p:autoComplete>
<util:suggestioninfo  suggestionKey="#{cc.attrs.suggestionKey}" msg="#{cc.attrs.suggestionMsg}" />
here is my backing bean's (autoCompleteBean) completeMethod:

Code: Select all

public List<String> autoCompleteSuggest(String query)
    {   
        FacesContext facesContext = FacesContext.getCurrentInstance();
        try
        {
            String category = (String)UIComponent.getCurrentComponent(FacesContext.getCurrentInstance()).getAttributes().get("suggestionKey");
            SessionInformation si = (SessionInformation)facesContext.getExternalContext().getSessionMap().get(GrowConstants.SESSION_SESSIONINFO);
            if ( si != null && si.getLoggedInUser() != null && category != null && category.length() > 0 && pattern.matcher(category).matches()  )
            {
                AutoCompleteManager acm = new AutoCompleteManager();
                AutoCompleteGroup acg = acm.getGroup(category);
                if ( acg != null )
                {
                    List<String> items = acg.getItemsString();
                    if ( query == null || query.trim().length() == 0 )
                    {
                        return items;
                    }
                    else
                    {
                        List<String> outList = new ArrayList<String>();
                        for( String s : items )
                        {
                            if ( s == null )
                                continue;
                            
                            if ( s.trim().toLowerCase().startsWith(query.toLowerCase().trim()) || s.trim().equalsIgnoreCase(query) || s.trim().toLowerCase().contains(query.toLowerCase().trim()) )
                                outList.add(s);
                        }
                        return outList;
                    }
                }
            }
        }
        catch( Exception e )
        {
            logger.warn(e.getMessage());
            logger.warn(ExceptionUtils.getStackTraceAsString(e));
        }
        return new ArrayList<String>();
    }
The result is that on certain data sets I get not results for the autocomplete and the follow errors are throw (js)

Firefox

Code: Select all

Error: b is null
Source File: http://localhost:8080/GrowIEP/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&v=3.1-SNAPSHOT
Line: 4
Chrome:

Code: Select all

Uncaught TypeError: Cannot read property 'left' of null
(anonymous function)primefaces.js.xhtml:4
b.event.dispatchjquery.js.xhtml:16
b.event.add.bD.handle.bB
I am using PF 3.1 snapshot (2-3-12)
on Tomcat 7.0.25 / OpenJDK 7 (64bit)
with Mojarra 2.1.6
Ubuntu 11.10

caioquirino
Posts: 70
Joined: 12 Jan 2012, 15:06
Location: Brazil

03 Feb 2012, 19:09

csyperski, your autoComplete component is inside of a Dialog and/or a OverlayPanel?
PrimeFaces 3.3 GA, Mojarra 2.1.7, Tomcat 7, JDK1.7 x64, Fedora Core 16, Eclipse Indigo

caioquirino
Posts: 70
Joined: 12 Jan 2012, 15:06
Location: Brazil

07 Feb 2012, 14:46

People, i'm updated to 3.2 Snapshot (from Source) and this error is changed to:
c is undefined.

i'm commented one line of my forms.js and now my p:selectOneMenu works normally:

Code: Select all

PrimeFaces.widget.SelectOneMenu.prototype.setupDialogSupport = function() {
    var dialog = this.jq.parents('.ui-dialog:first');
    
    if(dialog.length == 1) {
        var dialogWidget = dialog.data('widget'),
        _self = this;
        
        _self.panel.css('position', 'fixed');
        _self.triggers.mousedown(function(e) {
//            dialogWidget.moveToTop();   ///////Just comment this line (187)
            _self.panel.css('z-index', ++PrimeFaces.zindex);
            e.stopPropagation();
        });
    }
}
Optimus, my fix is correct?
Or i could check before if dialogWidget is undefined then dialogWidget.moveToTop(); :D

Thanks!
PrimeFaces 3.3 GA, Mojarra 2.1.7, Tomcat 7, JDK1.7 x64, Fedora Core 16, Eclipse Indigo

caioquirino
Posts: 70
Joined: 12 Jan 2012, 15:06
Location: Brazil

07 Feb 2012, 14:52

People, it is not fully working...
When i update my form and click on the selectOneMenu, the options not showing... :(
PrimeFaces 3.3 GA, Mojarra 2.1.7, Tomcat 7, JDK1.7 x64, Fedora Core 16, Eclipse Indigo

cedric_nicolas
Posts: 4
Joined: 22 Feb 2012, 06:36

29 Aug 2012, 22:39

Is there any progress on this ? We have it too, using Primefaces 3.3.1 and Primefaces mobile 0.9.3.

Problems comes on p:selectOneMenu, when click to dropDown list OR on any button in a page where you have a p:selectOneMenu, and only in some cases of content in that selectOneMenu,
here (at the last line, sorry this is compressed code but the one i patched below)

Code: Select all

       $(document.body).bind("mousedown.ui-selectonemenu", function(d) {
            if (a.panel.is(":hidden")) {
                return
            }
            var f = a.panel.offset();
            if (d.target === a.label.get(0) || d.target === a.menuIcon.get(0) || d.target === a.menuIcon.children().get(0)) {
                return
            }
            if (d.pageX < f.left || d.pageX > f.left + a.panel.width() || d.pageY < f.top || d.pageY > f.top + a.panel.height()) {
indeed a (which is the widget has no "panel", then calling offset() returns null; and then of course f.left throws the error

What is difficult to understand for me, is why this code is called even if user doesn't interact with the selectOneMenu at that time (but with another widget in the page)?

I've patched it like this, probably not the best way, but at least no more js bug now..

Code: Select all

            if (f==undefined || d.pageX < f.left || d.pageX > f.left + a.panel.width() || d.pageY < f.top || d.pageY > f.top + a.panel.height()) {
Any progress on this ?

Post Reply
  • Information
  • Who is online

    Users browsing this forum: Baidu [Spider], Google [Bot] and 1 guest