rich:treeNode and Internet Explorer 6 issue
wei.mar Aug 7, 2008 4:11 AMHello,
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