Why I lose my css??

[osvaldogomez]

Hi,

I have a <rich:dataTable id="pepe" .... And I using

<a4j:commandLink id="link_" actionListener="#{function.delete}" reRender="pepe" >

To delete a row from that table. But I also have some style for the table given by

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

Well, when I delete some row I lose all style of the table and in the same way when I browsing on the table with datascroller.

Any help is welcome.

Regards

[sergeysmirnov]

because you apply classes directly to the DOM elements. After the Ajax response, the old DOM elements are replaced with the new ones. So, applied styles are gone with old elements.
What you need to do is reapplying the styles just after Ajax response.

[osvaldogomez]

Thanks Sergey

But I don't know how I could do that. Could you give me an example please?


Regards

[sergeysmirnov]

this depends of your code. I think that you can reRender the block of rich:jQuery together with table. It should work.
Also, another approach is defining the function name for rich:jQuery and invoking the query by function name from oncomplete attribute.

[osvaldogomez]

I tryed both of options:

<rich:datascroller align="center" for="pepe" maxPages="20" oncomplete="selectRow" />

<rich:jQuery name="selectRow" timing="onJScall" query="addClass('active-row')" />

and it doesn't work.

So I tryed with reRender and it doesn't work too

<rich:datascroller align="center" for="pepe" maxPages="20" reRender= "pepe, q1, q2, q3, q4" />

<rich:jQuery selector="#pepe tr:odd" query="addClass('odd-row')" id="q1" />
<rich:jQuery selector="#pepe tr:even" query="addClass('even-row')" id="q2"/>
<rich:jQuery selector="#pepe tr" query="mouseover(function(){selectRow(this)})" id="q3"/>
<rich:jQuery selector="#pepe tr" query="mouseout(function(){unselectRow(this)})" id="q4"/>

I have a really big trouble with this, if I don't find the way to work it I must to leave richFaces.

So if sombebody have an idea to fix it, it's really welcome.

Thanks to all

Regards

[osvaldogomez]

Ok people

I found the solutions. It is much more easy than I thougth, I only put the rowstyles in the table declarations

<rich:dataTable value="#{formularioBusquedaBean.datos}"
var="item" id="pepe" rows="5" rowClasses="odd-row, even-row">

That is all.

Thanks all, specially to Sergey.

Regards

[sergeysmirnov]

"osvaldogomez" wrote:
I tryed both of options:

<rich:datascroller align="center" for="pepe" maxPages="20" oncomplete="selectRow" />

<rich:jQuery name="selectRow" timing="onJScall" query="addClass('active-row')" />

timing="onJScall" means it will be invoked only by call. You can use the name even timing attribute is not specified. In this case, it works as inline during the regular page loading and by js call during the ajax.

Ok. You found the solution for yourself. It is good overall.