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.