Board index JavaServer Faces General [PF 3.1 Snapshot] Dialog + OverlayPanel + SelectOneMenu JS E

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

Components, Ajax Framework, Utilities and More.


Posts: 70
Location: Brazil
[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):
        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:
<!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


Posts: 70
Location: Brazil
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


Posts: 4
Did you make an issue for this?

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

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

Thank you.


Posts: 70
Location: Brazil
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


Posts: 70
Location: Brazil
Hi,
I'm opened issue 3424(https://code.google.com/p/primefaces/issues/detail?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


Posts: 77
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

<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:

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
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:
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
PrimeFaces 4.0.10, Mojarra 2.2.6, OpenJDK 7, Tomcat 7, Ubuntu 12.04, Netbeans 8


Posts: 70
Location: Brazil
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


Posts: 70
Location: Brazil
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:

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


Posts: 70
Location: Brazil
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


Posts: 4
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)

       $(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..
            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 ?


Return to General