graphicImage inside a tooltip with ajax loading

[kaimattern]

Hi, I have a rich tree with a lot of nodes and I try to display an image as tooltip after the user hovers over a node for 700ms.

What happens with the below code is, that it is displaying the "Loading Image..." and from the delay after it I'm sure the image is loaded but the tooltip is closed after the loading finished. Nothing is displayed. If I remove the " mode="ajax" " from the toolTip its working fine but all images are  loaded when the tree is created. Thats just to much data. Anybody knows what I am doing wrong?

Best regards,

Kai

Code

<rich:treeNode id="entryNode"                          iconLeaf="#{item.icon}"                         icon="#{item.icon}">                <h:outputText id="objname" value="#{item.name}"/>                <a:form ajaxSubmit="true">                      <rich:toolTip mode="ajax" id="empToolTip" for="objname" showDelay="700">                      <f:facet name="defaultContent">                          <f:verbatim>Loading Image...</f:verbatim>                      </f:facet>                      <s:graphicImage id="empImage"                                      width="150"                                      height="200"                                      title="#{item.name}"                                      value="#{employeeImage.readImage(item.objid)}"/>                                         </rich:toolTip>                    </a:form>          </rich:treeNode>

[kaimattern]

I did a lot of testing today. I checked all my methods and debugged into employeeImage.readImage. To be sure I set the item.objid to a known value and I can see the image as byte[] array (which is working without the mode="ajax"). Nevertheless the tooltip closes after the image is loaded. So im sure its not a problem of the java code. It still can be a problem of the xhtml file. I also tried to set the for="xxx" to the rich treenode because i hoped it could be a problem with the the h:outputtext but the result is the same.

best regards,

Kai

[kaimattern]

Hi,

it seems to be a bug. I get it working for the last node if I specify the tooltip outside of the tree (I used the example from livedemo to be sure its not a bug in my code, just changed the text to my image). Its obvious that this is works ony for the last node because the ID objname is iterated in the tree and the tooltip inherits the last known value of objname

Working for last node (obvious because of ID)

<rich:panel id="treeForm" xmlns="http://www.w3.org/1999/xhtml"     xmlns:ui="http://java.sun.com/jsf/facelets"     xmlns:h="http://java.sun.com/jsf/html"     xmlns:f="http://java.sun.com/jsf/core"     xmlns:s="http://jboss.com/products/seam/taglib"     xmlns:a="http://richfaces.org/a4j"     xmlns:rich="http://richfaces.org/rich"     style="height:100%"     header="EmpSelect">     <h:form id="treeForm2">     <rich:tree style="width:300px" switchType="ajax" ajaxSingle="true"                 id="mssTree"                 reRender="objList,mssTree"                 ajaxSubmitSelection="true"                 stateAdvisor="#{mssTreeViewRecursive}"                 changeExpandListener="#{mssTreeViewRecursive.changeExpandListener}"                 nodeSelectListener="#{mssTreeViewRecursive.processSelection}">         <rich:recursiveTreeNodesAdaptor id="entry"                             roots="#{mssTreeViewRecursive.rootList}"                             var="item"                             nodes="#{item.childNodes}">             <rich:treeNode iconLeaf="#{item.icon}"                            icon="#{item.icon}">               <h:outputText id="objname" value="#{item.name}"/>         </rich:treeNode>         </rich:recursiveTreeNodesAdaptor>     </rich:tree>     <rich:toolTip for="objname" direction="top-right" mode="ajax" styleClass="tooltip" layout="block">             <f:facet name="defaultContent">                 <strong>Wait...</strong>             </f:facet>             <span   style="white-space:nowrap">This tool-tip content was <strong>rendered on server</strong>             </span>             <h:panelGrid columns="2">                 <h:outputText   style="white-space:nowrap" value="tooltips requested:" />                 <s:graphicImage id="empImage"                                         width="150"                                         height="200"                                         title="#{item.name}"                                         value="#{employeeImage.readImage()}"/>             </h:panelGrid>         </rich:toolTip>     </h:form>     </rich:panel>

When placing the same code inside the treenode its not working. It shows the "wait.." and after the image was loaded it closes the tooltip.

Also with removed "for", same behaviour. Watching the generated code it could be a problem with the recursion. The working tooltip code includes the ID one time, the not working tooltip code 5 times.

Not working

<rich:panel id="treeForm" xmlns="http://www.w3.org/1999/xhtml"     xmlns:ui="http://java.sun.com/jsf/facelets"     xmlns:h="http://java.sun.com/jsf/html"     xmlns:f="http://java.sun.com/jsf/core"     xmlns:s="http://jboss.com/products/seam/taglib"     xmlns:a="http://richfaces.org/a4j"     xmlns:rich="http://richfaces.org/rich"     style="height:100%"     header="EmpSelect">     <h:form id="treeForm2">     <rich:tree style="width:300px" switchType="ajax" ajaxSingle="true"                 id="mssTree"                 reRender="objList,mssTree"                 ajaxSubmitSelection="true"                 stateAdvisor="#{mssTreeViewRecursive}"                 changeExpandListener="#{mssTreeViewRecursive.changeExpandListener}"                 nodeSelectListener="#{mssTreeViewRecursive.processSelection}">         <rich:recursiveTreeNodesAdaptor id="entry"                             roots="#{mssTreeViewRecursive.rootList}"                             var="item"                             nodes="#{item.childNodes}">             <rich:treeNode iconLeaf="#{item.icon}"                            icon="#{item.icon}">               <h:outputText id="objname" value="#{item.name}"/>               <rich:toolTip for="objname" direction="top-right" mode="ajax" styleClass="tooltip" layout="block">             <f:facet name="defaultContent">                 <strong>Wait...</strong>             </f:facet>             <span   style="white-space:nowrap">This tool-tip content was <strong>rendered on server</strong>             </span>             <h:panelGrid columns="2">                 <h:outputText   style="white-space:nowrap" value="tooltips requested:" />                 <s:graphicImage id="empImage"                                         width="150"                                         height="200"                                         title="#{item.name}"                                         value="#{employeeImage.readImage()}"/>             </h:panelGrid>         </rich:toolTip>         </rich:treeNode>         </rich:recursiveTreeNodesAdaptor>     </rich:tree>     </h:form>     </rich:panel>

By the way, the behavior also appears for text nodes only.

Tooltip code, first not working one, last, working one (as said, works obvious only for last node in the tree).

ToolTip Code
new ToolTip({'delay':0,'showEvent':'mouseover','hideEvent':'','hideDelay':0} ,{'oncomplete':null,'onshow':null,'onhide':null} ,"treeForm2:mssTree:entry:0:entry:0:entry:4:entry:5::j_id12","treeForm2:mssTree:entry:0:entry:0:entry:4:entry:5::objname","ajax",false,"top-right",false,10,10,function(event,ajaxOptions){A4J.AJAX.Submit('_viewRoot','treeForm2',event,ajaxOptions)},{'control':this,'oncomplete':function(request,event,data){;{var _toolTip = $('treeForm2:mssTree:entry:0:entry:0:entry:4:entry:5::j_id12').component;_toolTip.toolTipContent = $('treeForm2:mssTree:entry:0:entry:0:entry:4:entry:5::j_id12content');_toolTip.displayDiv();}},'similarityGroupingId':'treeForm2:mssTree:entry:0:entry:0:entry:4:entry:5::j_id12','parameters':{'ajaxSingle':'treeForm2:mssTree:entry:0:entry:0:entry:4:entry:5::j_id12','treeForm2:mssTree:entry:0:entry:0:entry:4:entry:5::j_id12':'treeForm2:mssTree:entry:0:entry:0:entry:4:entry:5::j_id12'} ,'onbeforedomupdate':function(request,showEvent,data){;{ var _toolTip = $('treeForm2:mssTree:entry:0:entry:0:entry:4:entry:5::j_id12').component;_toolTip.toolTip.style.display = 'none'; }},'actionUrl':'/SAPTest/mssTreeViewRecursive.seam'} );;
new ToolTip({'showEvent':'mouseover','hideEvent':'','delay':0,'hideDelay':0} ,{'oncomplete':null,'onshow':null,'onhide':null} ,"treeForm2:j_id13","treeForm2:mssTree:entry:0:entry:0:entry:4:entry:5::objname","ajax",false,"top-right",false,10,10,function(event,ajaxOptions){A4J.AJAX.Submit('_viewRoot','treeForm2',event,ajaxOptions)},{'control':this,'oncomplete':function(request,event,data){;{var _toolTip = $('treeForm2:j_id13').component;_toolTip.toolTipContent = $('treeForm2:j_id13content');_toolTip.displayDiv();}},'similarityGroupingId':'treeForm2:j_id13','parameters':{'ajaxSingle':'treeForm2:j_id13','treeForm2:j_id13':'treeForm2:j_id13'} ,'onbeforedomupdate':function(request,showEvent,data){;{ var _toolTip = $('treeForm2:j_id13').component;_toolTip.toolTip.style.display = 'none'; }},'actionUrl':'/SAPTest/mssTreeViewRecursive.seam'} );;

Best regards,

Kai

[nbelaevski]

Kai,

Please use a4j:log to collect debug information and post it here.