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

    tooltip breaks filterBy in datatable

    Ross Mahony Newbie

      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
          Nick Belaevski Master

          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

          • 2. Re: tooltip breaks filterBy in datatable
            Ross Mahony Newbie

            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 Harga Novice

              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... =(