Mouse over effect with jQuery in richfaces datatable and datascroller combo

Question

Hi,

I'm problem with defining a mouse over effect for my datatables. I have

<a4j:form>
    <rich:dataTable id="dataTable"> ... </rich:dataTable>
    <rich:datascroller id="dataScroller" for="dataTable" />
</a4j:form>

<rich:jQuery selector="#dataTable tr" query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
<rich:jQuery selector="#dataTable tr" query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>

which are working fine on the very first page. However if I use the datascroller to goto another page, the mouseover effect is gone.

I've tried reRendering the table or the jQuery components, that didn't help with the problem at all.

Any suggestion on how I can get this working?

Thanks!

Answer 1

Not sure if this will work but its worth a try. I have never used richfaces, but jQuery live events bind to all elements including future elements appended to the DOM.

<rich:jQuery selector="#dataTable tr" query="live('mouseover', function(){jQuery(this).addClass('active-row')})"/> 
<rich:jQuery selector="#dataTable tr" query="live('mouseout', function(){jQuery(this).removeClass('active-row')})"/>

Answer 2

Hi john , I was new to this richfaces and seam ,but i am very much interested to develop seam application with richfaces frontend . I am also facing the same problem for rich:datatables rows on next page when i click on scroller of that table. So can you send/show me the modified jQuery code to by which you can fixed this problem?

Thanks in advance Sathish