9 Replies Latest reply on Mar 10, 2010 5:21 PM by mnott

    rich:tree with JQuery.UI Layout failure

    shadowcreeper

      When using rich:tree in a left (west) pane of a JQuery.UI layout, the root tree nodes all get screwed up whenever I collapse/uncollapse the left pane.

      Trying the included code, just collapse the left pane (by clicking on the center of the border bar), then uncollapse it and mouse-over the stuff in the tree. You will see that the root nodes get the hover class applied but will never remove it. If they had child nodes, you would also see that you cannot toggle them (show/hide children). This messed up behavior remains in effect until you refresh the page.

      Please help me. I cannot figure out what is causing this. Only root tree nodes are affected.

      I got the JQuery.UI layout JS files from: http://layout.jquery-dev.net/downloads.html.

      I am using v1.2.0 of the layout, and RichFaces 3.3.1.GA under Tomcat 6.

      Here is a simplified version of the page I use.

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
      <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
      <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j" %>
      <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich" %>
      <%@ page contentType="text/html;charset=UTF-8" language="java" %>
      
      <f:view>
      <t:document>
      <t:documentHead>
       <a4j:loadScript src="resource://jquery.js"/>
       <a4j:loadScript src="/js/layout/jquery.ui.all.js"/>
       <a4j:loadScript src="/js/layout/jquery.layout.min.js"/>
      
       <script type="text/javascript">
       var m_outerLayout;
       jQuery(document).ready(function ()
       {
       m_outerLayout = jQuery('body').layout(
       {
       slideTrigger_open: "mouseover",
       west__resizable: true,
       west__slidable: true,
       west__closable: true
       });
       });
       </script>
      </t:documentHead>
      
      <t:documentBody>
       <h:form id="myForm">
       <%-- The UserList tree on the left side of the page --%>
       <a4j:region id="myRegion">
       <t:div styleClass="ui-layout-west" style="overflow: auto;">
      
       <rich:tree id="textSelector"
       switchType="client">
       <rich:treeNodesAdaptor var="text"
       nodes="#{BeanName.listOfStrings}">
       <rich:treeNode onselected="alert('#{text} selected');">
       <h:outputText value="#{text}"/>
       </rich:treeNode>
       </rich:treeNodesAdaptor>
       </rich:tree>
      
       </t:div>
       </a4j:region>
      
       <t:div styleClass="ui-layout-center"
       style="overflow: auto; margin: 10px;">
       <h:outputText value="Center Panel"/>
       </t:div>
       </h:form>
      </t:documentBody>
      </t:document>
      </f:view>
      


      Also, this CSS will help you see the borders:
      /* css styles for the jQuery ui layout classes */
      .ui-layout-pane { background-color: #FFFFFF; }
      .ui-layout-resizer { background-color: #DDDDDD; }
      


      Thanks.

        • 1. Re: rich:tree with JQuery.UI Layout failure
          ilya_shaikovsky

          any jss errors appears?

          • 2. Re: rich:tree with JQuery.UI Layout failure
            shadowcreeper

            Unfortunately, I see no errors in IE7/8, FF3 or Chrome.

            In FF3 I used the Venkman JS Debugger and setup all Errors and Throws to stop, and I got no stops.

            Should I upload the JQuery.UI files?
            Should I submit a bug report?

            Thanks.

            Here is the full (simplified) page (added CSS for "ui-layout-toggler"):

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
            <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
            <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
            <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
            <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j" %>
            <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich" %>
            <%@ page contentType="text/html;charset=UTF-8" language="java" %>
            
            <f:view>
            <t:document>
            <t:documentHead>
             <a4j:loadScript src="resource://jquery.js"/>
             <a4j:loadScript src="/js/layout/jquery.ui.all.js"/>
             <a4j:loadScript src="/js/layout/jquery.layout.js"/>
            
             <style type="text/css" media="all">
             .ui-layout-pane { background-color: #FFF; }
             .ui-layout-resizer { background-color: #DDD; }
             .ui-layout-toggler { background-color: #888; }
             </style>
            
             <script type="text/javascript">
             var m_outerLayout;
             jQuery(document).ready(function ()
             {
             m_outerLayout = jQuery('body').layout(
             {
             slideTrigger_open: "mouseover",
             west__resizable: true,
             west__slidable: true,
             west__closable: true
             });
             });
             </script>
            </t:documentHead>
            
            <t:documentBody>
             <h:form id="myForm">
             <%-- The UserList tree on the left side of the page --%>
             <a4j:region id="myRegion">
             <t:div styleClass="ui-layout-west" style="overflow: auto;">
            
             <rich:tree id="textSelector"
             switchType="client">
             <rich:treeNodesAdaptor var="text"
             nodes="#{UserList.userIDs}">
             <rich:treeNode onselected="alert('#{text} selected');">
             <h:outputText value="#{text}"/>
             </rich:treeNode>
             </rich:treeNodesAdaptor>
             </rich:tree>
            
             </t:div>
             </a4j:region>
            
             <t:div styleClass="ui-layout-center"
             style="overflow: auto; margin: 10px;">
             <h:outputText value="Center Panel"/>
             </t:div>
             </h:form>
            </t:documentBody>
            </t:document>
            </f:view>
            


            • 3. Re: rich:tree with JQuery.UI Layout failure
              nbelaevski

              Hi,

              The problem is caused by layout scrips causing scripts re-evaluation when the panel is being closed the first time:

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
              <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
              <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
              <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
              <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
              <%@ page contentType="text/html;charset=UTF-8" language="java"%>
              
              <f:view>
               <html>
               <head>
               <a4j:loadScript src="resource://jquery.js" />
               <a4j:loadScript src="/pages/jquery.ui.all.js" />
               <a4j:loadScript src="/pages/jquery.layout.js" />
              
               <style type="text/css" media="all">
              .ui-layout-pane {
               background-color: #FFF;
              }
              
              .ui-layout-resizer {
               background-color: #DDD;
              }
              
              .ui-layout-toggler {
               background-color: #888;
              }
              </style>
              
               <script type="text/javascript">
               var m_outerLayout;
               jQuery(document).ready(function ()
               {
               m_outerLayout = jQuery('body').layout(
               {
               slideTrigger_open: "mouseover",
               west__resizable: true,
               west__slidable: false,
               west__closable: true
               });
               });
               </script>
               </head>
              
               <body>
               <h:form id="myForm">
               <%-- The UserList tree on the left side of the page --%>
               <div class="ui-layout-west" style="overflow: auto;">
               <script>alert('execute body content');</script>
               </div>
              
               <div class="ui-layout-center" style="overflow: auto; margin: 10px;">
               <h:outputText value="Center Panel" /></div>
               </h:form>
               </body>
               </html>
              </f:view>


              • 4. Re: rich:tree with JQuery.UI Layout failure
                nbelaevski
                • 5. Re: rich:tree with JQuery.UI Layout failure
                  shadowcreeper

                  Thanks for tracking this down! I had no idea how to figure it out as I couldn't even see where the Richfaces scripts were being called from.

                  Using fxName of "none" seems to be the workaround as the other options (scale/drop) all seem to have the same bug as the default (slide).

                   m_layout = jQuery('body').layout(
                   {
                   slideTrigger_open: "mouseover",
                   fxName: "none",
                   west__resizable: true,
                   west__slidable: false,
                   west__closable: true
                   });
                  


                  • 6. Re: rich:tree with JQuery.UI Layout failure

                    Can you explain how exactly to use the workaround? I've entered

                     

                    <head>

                    <script language="javascript"/>

                      var m_outerLayout;
                      jQuery(document).ready(function ()
                      {
                      m_outerLayout = jQuery('body').layout(
                      {
                          slideTrigger_open: "mouseover",
                          fxName: "none",
                          west__resizable: true,
                          west__slidable: false,
                          west__closable: true
                      });
                      });

                    </script>
                    </head>

                     

                    But that doesn't help.

                     

                    TIA,

                     

                    M

                    • 7. Re: rich:tree with JQuery.UI Layout failure
                      shadowcreeper

                      The only part of the workaround that mattered was:

                            fxname: "none"

                       

                      I just put in the whole snippet so that hopefully there would be no confusion.

                       

                      Are you sure you are seeing the above-mentioned bug?

                      It was only a problem with the root tree node being inaccessable after collapsing the JQuery Layout panel.

                       

                      Sorry it took so long, but I only just now noticed your post.

                      • 8. Re: rich:tree with JQuery.UI Layout failure
                        shadowcreeper

                        PS -- Here is my entire script tag:

                         

                           <script type="text/javascript">
                              var m_outerLayout, m_innerLayout;
                              jQuery(document).ready(function ()
                              {
                                 m_outerLayout = jQuery('body').layout(
                                 {
                                    slideTrigger_open: "mouseover",
                                    center__onresize: "m_innerLayout.resizeAll",
                                    fxName: "none",
                                    west__resizable: true,
                                    west__slidable: true,
                                    west__closable: true
                                 });
                                 m_innerLayout = jQuery('.innerLayout').layout(
                                 {
                                    slideTrigger_open: "mouseover",
                                    fxName: "none",
                                    south__resizable: true,
                                    south__slidable: true,
                                    south__closable: true
                                 });
                              });
                           </script>

                         

                        The only other thing I might ask is to make sure you are including the js files you need in the head (it appears that you are not):

                         

                           <a4j:loadScript src="resource://jquery.js"/>
                           <a4j:loadScript src="/js/layout/jquery.ui.all.js"/>
                           <a4j:loadScript src="/js/layout/jquery.layout.min.js"/>

                        • 9. Re: rich:tree with JQuery.UI Layout failure
                          Yes, sorted it out. Took some time to understand the fix, but that was it.