3 Replies Latest reply on Feb 7, 2012 2:19 PM by akaine

tooltip breaks filterBy in datatable

rmahony Jun 28, 2011 11:08 AM

Hi,

I am using RichFaces 3.3.3. I have a datatable and a filterBy on a column. The filtering works fine if it is by itself. As soon as I add a tooltip in another column it doesn't work (the contents in the table go blank). The a4j log seems to look ok with a response coming back but the ajax status I have set up keeps running as if waiting for response to finish.

Sample code below (with tooltip):

<rich:dataTable id="paramsTbl" value="#{mybean.rows}" var="row" rows="10">
     <rich:column sortBy="#{row.id}" filterBy="#{row.id}">
          <f:facet name="header">ID</f:facet>
          <h:outputText value="#{row.id}"/>
     </rich:column>
     <rich:column>
          <a4j:commandLink ajaxSingle="true" id="editlink" oncomplete="#{rich:component('editPanel')}.show()">
                <h:graphicImage value="/images/edit.gif" style="border:0" />
               <f:setPropertyActionListener value="#{row}" target="#{mybean.currentRow}" />
          </a4j:commandLink>
          <rich:toolTip id="editTTip" for="editlink" value="Edit" />
     </rich:column>
</rich:dataTable>

If you remove the tooltip above then the filtering works.

I would like to know if anyone else is experiencing the same behaviour?

1. Re: tooltip breaks filterBy in datatable

nbelaevski Jun 29, 2011 12:55 AM (in response to rmahony)

Hi Ross,

Does this happen in particular browser? Can you please post log contents here?

P.S. Please ignore 'assumed answered' mark - I've set it by mistake and cannot rollback the change
Actions

2. Re: tooltip breaks filterBy in datatable

rmahony Jun 29, 2011 6:02 AM (in response to nbelaevski)

Hi Nick,

Thanks for the response, I was testing with Google Chrome (12.0.742.100). I tried with IE and IE works.

I changed the sample code I mentioned earlier to include an additional column as no filtering seemed to work when there was one...but maybe that is something else. My test I did just now had the following:

<a4j:form id="frm">
     <rich:dataTable id="mytbl" value="#{mybean.rows}" var="r" width="100%">
          <rich:column filterBy="#{r.id}">
               <f:facet name="header">ID</f:facet>
               <h:outputText value="#{r.id}"/>
          </rich:column>
          <rich:column filterBy="#{r.name}">
               <f:facet name="header">NAME</f:facet>
               <h:outputText value="#{r.name}"/>
          </rich:column>
          <rich:column>
               <a4j:commandLink ajaxSingle="true" id="lnk">
                    <h:graphicImage value="/images/edit.gif" style="border:0" />
               </a4j:commandLink>
               <rich:toolTip id="editTTip" for="lnk" value="Edit" />
          </rich:column>
     </rich:dataTable>
</a4j:form>

The logs for Chrome are:

debug[10:55:26,822]: Have Event [object Object] with properties: target: [object HTMLInputElement], srcElement: [object HTMLInputElement], type: change
debug[10:55:26,823]: Query preparation for form 'frm' requested
debug[10:55:26,823]: Append text control frm:mytbl:j_id4fsp with value [AAAA] and value attribute [null]
debug[10:55:26,823]: Append text control frm:mytbl:j_id7fsp with value [] and value attribute [null]
debug[10:55:26,823]: Append hidden control frm with value [frm] and value attribute [frm]
debug[10:55:26,824]: Append hidden control autoScroll with value [] and value attribute []
debug[10:55:26,824]: Append hidden control javax.faces.ViewState with value [!j_id33] and value attribute [!j_id33]
debug[10:55:26,824]: parameter frm:mytbl with value fsp
debug[10:55:26,824]: Look up queue with default name
debug[10:55:26,824]: NEW AJAX REQUEST !!! with form: frm
debug[10:55:26,824]: Start XmlHttpRequest
debug[10:55:26,825]: Request state : 1
debug[10:55:26,825]: QueryString: AJAXREQUEST=_viewRoot&frm%3Amytbl%3Aj_id4fsp=AAAA&frm%3Amytbl%3Aj_id7fsp=&frm=frm&autoScroll=&javax.faces.ViewState=!j_id33&frm%3Amytbl=fsp&
debug[10:55:26,886]: Request state : 2
debug[10:55:26,886]: Request state : 3
debug[10:55:26,886]: Request state : 3
debug[10:55:26,886]: Request state : 4
debug[10:55:26,886]: Request end with state 4
debug[10:55:26,886]: Response with content-type: text/xml;charset=UTF-8
debug[10:55:26,887]: Full response content: <?xml version="1.0"?> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title></title><link class="component" href="/smart-dts/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAELXT5DOhSIAQ!sA18_.faces" rel="stylesheet" type="text/css" /><link class="component" href="/smart-dts/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAELXT5DOhSIAQ!sA18_.faces" media="rich-extended-skinning" rel="stylesheet" type="text/css" /><link class="component" href="/smart-dts/a4j/s/3_3_3.Finalcss/table.xcss/DATB/eAELXT5DOhSIAQ!sA18_.faces" rel="stylesheet" type="text/css" /><link class="component" href="/smart-dts/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/tooltip.xcss/DATB/eAELXT5DOhSIAQ!sA18_.faces" rel="stylesheet" type="text/css" /></head><body><table class="rich-table" id="frm:mytbl" border="0" cellpadding="0" cellspacing="0" width="100%"><colgroup span="3"></colgroup><thead class="rich-table-thead"><tr class="rich-table-subheader"><th class="rich-table-subheadercell" scope="col" id="frm:mytbl:j_id4header"><div id="frm:mytbl:j_id4header:sortDiv">ID</div><div><input type="text" name="frm:mytbl:j_id4fsp" value="AAAA" class="rich-filter-input" onchange="A4J.AJAX.Submit('frm',event,{'similarityGroupingId':'frm:mytbl','parameters':{'frm:mytbl':'fsp'} } )" onclick="Event.stop(event);" /></div></th><th class="rich-table-subheadercell" scope="col" id="frm:mytbl:j_id7header"><div id="frm:mytbl:j_id7header:sortDiv">NAME</div><div><input type="text" name="frm:mytbl:j_id7fsp" value="" class="rich-filter-input" onchange="A4J.AJAX.Submit('frm',event,{'similarityGroupingId':'frm:mytbl','parameters':{'frm:mytbl':'fsp'} } )" onclick="Event.stop(event);" /></div></th><th class="rich-table-subheadercell" scope="col" id="frm:mytbl:j_id10header"><div id="frm:mytbl:j_id10header:sortDiv"></div></th></tr></thead><tbody id="frm:mytbl:tb"><tr class="rich-table-row rich-table-firstrow"><td class="rich-table-cell" id="frm:mytbl:0:j_id4">AAAA</td><td class="rich-table-cell" id="frm:mytbl:0:j_id7">NAME</td><td class="rich-table-cell" id="frm:mytbl:0:j_id10"><a href="#" id="frm:mytbl:0:lnk" name="frm:mytbl:0:lnk" onclick="A4J.AJAX.Submit('frm',event,{'similarityGroupingId':'frm:mytbl:0:lnk','parameters':{'ajaxSingle':'frm:mytbl:0:lnk','frm:mytbl:0:lnk':'frm:mytbl:0:lnk'} } );return false;"><img src="/smart-dts/images/edit.gif" style="border:0" alt="" /></a><span class="rich-tool-tip" id="frm:mytbl:0:editTTip" style="z-index:99;"><span id="frm:mytbl:0:editTTipcontent">Edit</span><span id="frm:mytbl:0:editTTipscript" style="display:none"><script type="text/javascript" id="scriptfrm:mytbl:0:editTTip">//<![CDATA[ new ToolTip("frm:mytbl:0:editTTip","frm:mytbl:0:lnk",{'showEvent':'mouseover'} ); //]]> </script></span></span></td></tr></tbody></table><meta name="Ajax-Update-Ids" content="frm:mytbl:tb" /><span id="ajax-view-state"><input type="hidden" name="javax.faces.ViewState" value="!j_id33" /></span><meta id="Ajax-Response" name="Ajax-Response" content="true" /><meta name="Ajax-Update-Ids" content="frm:mytbl:tb" /><span id="ajax-view-state"><input type="hidden" name="javax.faces.ViewState" value="!j_id33" /></span><meta id="Ajax-Response" name="Ajax-Response" content="true" /></body></html>
debug[10:55:26,889]: Header Ajax-Expired not found, search in <meta>
debug[10:55:26,889]: search for elements by name 'meta' in element #document
debug[10:55:26,889]: Find <meta name='Ajax-Update-Ids' content='frm:mytbl:tb'>
debug[10:55:26,890]: Find <meta name='Ajax-Response' content='true'>
debug[10:55:26,890]: Find <meta name='Ajax-Update-Ids' content='frm:mytbl:tb'>
debug[10:55:26,890]: Find <meta name='Ajax-Response' content='true'>
debug[10:55:26,890]: Header Ajax-Update-Ids not found, search in <meta>
debug[10:55:26,890]: search for elements by name 'meta' in element #document
debug[10:55:26,890]: Find <meta name='Ajax-Update-Ids' content='frm:mytbl:tb'>
debug[10:55:26,890]: Update page by list of rendered areas from response frm:mytbl:tb
debug[10:55:26,890]: search for elements by name 'script' in element #document
debug[10:55:26,891]: search for elements by name 'link' in element #document
debug[10:55:26,891]: <link> in response with src=/smart-dts/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAELXT5DOhSIAQ!sA18_.faces
debug[10:55:26,891]: Such element exist in document
debug[10:55:26,891]: <link> in response with src=/smart-dts/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAELXT5DOhSIAQ!sA18_.faces
debug[10:55:26,891]: Such element exist in document
debug[10:55:26,892]: <link> in response with src=/smart-dts/a4j/s/3_3_3.Finalcss/table.xcss/DATB/eAELXT5DOhSIAQ!sA18_.faces
debug[10:55:26,892]: Such element exist in document
debug[10:55:26,892]: <link> in response with src=/smart-dts/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/tooltip.xcss/DATB/eAELXT5DOhSIAQ!sA18_.faces
debug[10:55:26,892]: Such element exist in document
debug[10:55:26,892]: call getElementById for id= org.ajax4jsf.queue_script
debug[10:55:26,892]: Update page part from call parameter for ID frm:mytbl:tb
debug[10:55:26,892]: call getElementById for id= frm:mytbl:tb

3. Re: tooltip breaks filterBy in datatable

akaine Feb 7, 2012 2:19 PM (in response to rmahony)

Same here, Ross. Have been trying to fight this issue for several hours by now, with no result. I'll update the post if find anything...

Update:
Seems this is far from the first time devs have this problem: https://community.jboss.org/search.jspa?peopleEnabled=true&userID=&containerType=&container=&spotlight=true&q=tooltip+chrome

Unfortunately I could find no real solution to the issue by the moment. HTML mode doesn't help, neither the a4j:htmlCommandLink. At the moment the only 2 ways to bypass this are:
1. Code your own tooltips in js.
2. Put all the datatable tooltips in a separate form outside.

Personally I'd go for the 1st one, even if it's more coding. Still none of these are acceptable in my case since my app is already up and it's pretty big... =(
Actions

Go to original post