rich:tooltip not xHTML-compatible?
trinorae Oct 17, 2011 4:17 AMHello
Last week ajax was crashing on application I'm working on in Chrome.
We have the following code: (simplified)
<rich:dataTable>
<rich:column>
<t:selectOneRadio id="answerValues" value="#{skillRating.value}" >
<f:selectItems value="#{takeSurveyBean.knownItems}"/>
<a4j:support event="onclick" action="#{takeSurveyBean.radioProcess(skillRating.skill.id)}" reRender="skillImprovementColumn" limitToList="true"/>
</t:selectOneRadio>
</rich:column>
</rich:dataTable>
which rerenders the following column:
<rich:column id="skillImprovementColumn" styleClass="imageLinkColumn">
<h:commandLink action="#{takeSurveyBean.addTarget(skillRating)}">
<h:graphicImage id="imgAdd" value="/images/add.png" />
<rich:toolTip for="imgAdd" value="Add"/>
</h:commandLink>
<h:commandLink action="#{takeSurveyBean.removeTarget(skillRating)}">
<h:graphicImage id="imgDel" value="/images/not_ok.png" nt);" />
<rich:toolTip for="imgDel" value="Remove"/>
</h:commandLink>
</rich:column>
This code made the application fail in Chrome. Not doing any javascript anymore when the button had to be rendered. The error I got was
Uncaught Error: Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9 3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript.html:121
Which pointed at:
var importednode=window.document.importNode(newnode,true);
After googling and looking for solutions I found Nick Belaevski stating (here: http://community.jboss.org/message/553290#553290 ) that rerendering of code that is not xHTML-compatible can (or will?) fail the javascript when using limitToList="true"-attribute. So I switched the h:commandLink to a a4j:htmlCommandLink. It still crashed. So I started eliminating all the rerendered elements to see which was causing the problem. After a while I found out the rich:toolTip was also crashing the application. What I'm wondering is whether this means rich:toolTip isn't xHTML-compatible too? Does this mean it is a bug in richfaces? Has anyone else encountered this problem?
My workaround for now is to take the rich:tooltip out of the form, in another a4j:form (which is in my case on another page, since this page was include using ui:include) and showing and removing the tooltip using an onmouseover- and onmouseout-event on the h:graphicImage. But this looks quite ugly in the code, since the tooltip is completely seperated from the element that's calling it.