1 Reply Latest reply on Aug 7, 2008 4:58 AM by Ilya Shaikovsky

    rich:treeNode and Internet Explorer 6 issue

    Marko Weinhold Newbie

      Hello,

      I use RichFaces 3.1.2. to render trees in a web project. Everything is working fine, i got
      my tree painted and i can expand and collapse the tree nodes. My problem is that
      Internet Explorer 6 keeps jumping to the top of my page when expanding or collapsing.

      My understanding of this behaviour is that the return false; line in the onclick attribute
      rendered by the rich:treeNode-tag is ignored by the Internet Explorer 6 and that it
      therefore follows the href="#", causing it to jump to the page top.

      Here's part of my source code and the generated output:

      <rich:tree style="width:300px" immediate="true" reRender="esearch-productTree"
       value="#{treeData.rootNode}" showConnectingLines="false" var="item">
      
       <rich:treeNode icon="/img/invisible.gif"
       iconLeaf="/img/invisible.gif"
       iconCollapsed="${basepath}img/nav-plus.gif"
       iconExpanded="${basepath}img/nav-minus.gif">
      
       <f:facet name="iconCollapsed">
       <img src="${basepath}img/nav-plus.gif" />
       </f:facet>
       <f:facet name="iconExpanded">
       <img src="${basepath}img/nav-minus.gif" />
       </f:facet>
      
       <h:panelGroup styleClass="#{item.numChildren gt 0 ? 'noindent' : 'indent'}">
      
       <ui:fragment rendered="#{item.isSelected}">
       <input type="checkbox" checked="checked"
       id="product-#{item.id}" value="#{item.id}"
       onclick="return productTree_onclick(this.checked, this.value, '#{item.parentGroupId}' );" />
       </ui:fragment>
       <ui:fragment rendered="#{!item.isSelected}">
       <input type="checkbox"
       id="product-#{item.id}" value="#{item.id}"
       onclick="return productTree_onclick(this.checked, this.value, '#{item.parentGroupId}' );" />
       </ui:fragment>
      
       <h:outputText value="#{item.ref.name}" />
      
       <h:outputText
       value=" (#{item.numChildren }) "
       rendered="#{item.numChildren gt 0}" />
       </h:panelGroup>
       </rich:treeNode>
      </rich:tree>
      
      
      
      <table border="0" cellpadding="0" cellspacing="0" class="dr-tree-full-width rich-tree-node" id="myExtendedSearchForm:_id475:143069821:_id476"><tbody><tr id="myExtendedSearchForm:_id475:143069821:_id476:mainRow" onclick=" "><td class="dr-tree-h-ic rich-tree-node-handleicon "><div><a href="#" id="myExtendedSearchForm:_id475:143069821:_id476:handle" onclick="A4J.AJAX.Submit('_viewRoot','myExtendedSearchForm',event,{'parameters':{'myExtendedSearchForm:_id475:143069821:_id476NodeExpanded':'true','myExtendedSearchForm:_id475:143069821:_id476AjaxExpanded':true} ,'actionUrl':'/someURL/searchx-all.jsf'} ); return false;"><span class="dr-tree-pointer-cursor dr-tree-h-ic-img-md dr-tree-h-ic-img dr-tree-h-ic-facets rich-tree-node-handleicon-collapsed" id="myExtendedSearchForm:_id475:143069821:_id476:handle:img:collapsed">
       <img src="/someURL/img/nav-plus.gif" /></span><span class="dr-tree-pointer-cursor dr-tree-h-ic-img-md dr-tree-h-ic-img dr-tree-h-ic-facets rich-tree-node-handleicon-expanded" id="myExtendedSearchForm:_id475:143069821:_id476:handle:img:expanded" style="display: none;">
       <img src="/someURL/img/nav-minus.gif" /></span></a></div></td><td class="dr-tree-h-ic rich-tree-node-icon " id="myExtendedSearchForm:_id475:143069821:_id476:icon" rich:draggableoptions="{'parameters':{'dragSourceId':'myExtendedSearchForm:_id475:143069821:_id476','myExtendedSearchForm:_id475:143069821:_id476':'myExtendedSearchForm:_id475:143069821:_id476'} } " rich:dropzoneoptions="{} "><img class="dr-tree-h-ic-img-md dr-tree-h-ic-img" src="/someURL/img/invisible.gif" /></td><td class="dr-tree-h-text rich-tree-node-text " id="myExtendedSearchForm:_id475:143069821:_id476:text" rich:highlightedclass="dr-tree-i-hl rich-tree-node-highlighted" rich:selectedclass="dr-tree-i-sel rich-tree-node-selected"><span class="noindent">
       <input type="checkbox" checked="checked" id="product-g143069821;143069822" value="g143069821;143069822" onclick="return productTree_onclick(this.checked, this.value, '' );" />Aaaaaaaaaaaaaaaaa (1) </span></td></tr></tbody></table>
      


      I hope this is readable :-)

      A possible solution for my problem would be to replace the
      <a href="#"...
      with
      <a href="javascript:void(0);"...
      , but that means I have to modify the TreeNodeTag which is something I don't want to do at all.
      So if you know any other solution or workaround to solve that problem I'd be grateful to
      hear.
      Otherwise, what do I need to modify the TeeNodeTag and rebuild the libraries and how do i do it?
      I got the source code and found a file htmlTreeNode.jspx which I assume I've go to fix.

      Best regards
      wei.mar