Problem with <rich:jQuery> and Zebra-Style-Columns

[damienmc3]

Hello all !

I have the following xhtml-page:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:c="http://java.sun.com/jsp/jstl/core"
 xmlns:webshop="http://webshop.de"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:a4j="http://richfaces.org/a4j"
 template="/resources/layout/template.xhtml">

 <ui:define name="title">
 <h:outputText value="#{msg['index.title']}"/>
 </ui:define>

 <ui:define name="contents">
 <h1><h:outputText value="#{msg['index.welcome']}"/></h1>

 <h:form id="modeNewsTable">
 <rich:tabPanel id="indexrss" switchType="ajax" style="width: 55%;">

 <rich:tab id="mode">
 <f:facet name="label">
 <h:outputText value="Outfits, Mode, Trends, Stars und Designer" />
 </f:facet>

 <rich:dataTable id="modeTabelle"
 var="news"
 value="#{news.newsmode}"
 cellspacing="10"
 cellpadding="10"
 reRender="datascrollermode">

 <f:facet name="header">
 Neues aus der Modewelt
 </f:facet>

 <rich:column id="idSpalte">
 <f:facet name="header">
 Titel
 </f:facet>
 <h:outputLink value="#{news[2]}" target="_blank">
 <h:outputText value="#{news[0]}" />
 </h:outputLink>
 </rich:column>

 <rich:column id="bezeichnungSpalte">
 <f:facet name="header">
 Beschreibung
 </f:facet>
 <f:facet name="header">
 <h:outputText value="Beschreibung" />
 </f:facet>
 <h:outputText value="#{news[1]}" />
 </rich:column>
 <f:facet name="footer">
 <rich:datascroller id="datascrollermode" maxPages="10" />
 </f:facet>
 </rich:dataTable>
 <rich:jQuery selector="#modeTabelle tr:odd" query="addClass('odd-row')" />
 <rich:jQuery selector="#modeTabelle tr:even" query="addClass('even-row')" />
 <rich:jQuery selector="#modeTabelle tr"
 query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
 <rich:jQuery selector="#modeTabelle tr"
 query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
 </rich:tab>

 <rich:tab id="beauty">
 <f:facet name="label">
 <h:outputText value="Looks, Pflege und Make-up, Haare und Styling, Wellness und Body"/>
 </f:facet>

 <rich:dataTable id="beautyTabelle"
 var="news"
 value="#{news.newsbeauty}"
 cellspacing="10"
 cellpadding="10"
 reRender="datascrollerbeauty">

 <f:facet name="header">
 Neues aus der Beautywelt
 </f:facet>

 <rich:column id="idSpalte">
 <f:facet name="header">
 Titel
 </f:facet>
 <h:outputLink value="#{news[2]}" target="_blank">
 <h:outputText value="#{news[0]}" />
 </h:outputLink>
 </rich:column>

 <rich:column id="bezeichnungSpalte">
 <f:facet name="header">
 Beschreibung
 </f:facet>
 <f:facet name="header">
 <h:outputText value="Beschreibung" />
 </f:facet>
 <h:outputText value="#{news[1]}" />
 </rich:column>
 <f:facet name="footer">
 <rich:datascroller id="datascrollerbeauty" maxPages="10" />
 </f:facet>
 </rich:dataTable>

 </rich:tab>
 </rich:tabPanel>
 </h:form>
 </ui:define>
</ui:composition>

in the css-file I have defined the following classes:

.odd-row {
 background-color: MediumSpringGreen;
 color: White
}

.even-row {
 background-color: #FCFFFE;
}

.active-row {
 background-color: MediumTurquoise;
}

The problem is, that there is no zebra-style-effect ! i'm using the latest richfaces and mojarra 1.2.

Thanks in advance for any hint !

[rguillemette]

Hello!

The correct id of your table will be modeNewsTable:modeTabelle and you use #modeTabelle in selector="...". Maybe an hint :)

@+

[damienmc3]

Hmm no effect after change the id to modeNewsTable:modeTabelle :(

[mpickell]

A couple things you could try:

1) Set your timing to ONLOAD. You are using the default of IMMEDIATE, and your jQuery might be running before your table is completed. ONLOAD in jQuery waits until after the pages is loaded, and then executes your query.

2) I like to target jQuery by styleclass when using it with JSF. That way you don't need to worry about all the naming containers being strung off the ID. So add a styleclass to your table and use ".styleClassName tr:odd", etc, as your selector in the jQuery calls instead of "#modeTabelle" (a note on IDs: I believe the rich:jquery component takes naming containers into account and gives you the correct ID with naming container, so this probably isn't the issue).

your jQuery selectors look fine to me, so I am betting on the timing.

[damienmc3]

Change the timing has no effect :/ Still not working.

[ilya_shaikovsky]

I think it's not working because of 2) mpickell's point.

[damienmc3]

Can you please give an example how such as styleclass has to look like in my css-file ?

[ilya_shaikovsky]

check how class selector used there. http://in.relation.to/12638.lace

[mpickell]

a styleclass used for jQuery targeting doesn't need to be in your CSS-file. You can put it there if you want to additionally add CSS, but it is not required for jQuery. Simply adding it to the element/component you want to target adds it to the DOM and jQuery can use it.

In ilya_shaikovsky's example, the "votesClass" styleclass is placed on the component to target, and the jQuery selector is ".votesClass". That's it.

[damienmc3]

Okay, code is now looking like this:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:c="http://java.sun.com/jsp/jstl/core"
 xmlns:webshop="http://webshop.de"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:a4j="http://richfaces.org/a4j"
 template="/resources/layout/template.xhtml">

 <ui:define name="title">
 <h:outputText value="#{msg['index.title']}"/>
 </ui:define>

 <ui:define name="contents">
 <h1><h:outputText value="#{msg['index.welcome']}"/></h1>

 <h:form id="modeNewsTable">
 <rich:tabPanel id="indexrss" switchType="ajax" style="width: 55%;">

 <rich:tab id="mode">
 <f:facet name="label">
 <h:outputText value="Outfits, Mode, Trends, Stars und Designer" />
 </f:facet>

 <rich:dataTable id="modeTabelle"
 var="news"
 value="#{news.newsmode}"
 cellspacing="10"
 cellpadding="10"
 reRender="datascrollermode"
 styleClass="modeTable">

 <f:facet name="header">
 Neues aus der Modewelt
 </f:facet>

 <rich:column id="idSpalte">
 <f:facet name="header">
 Titel
 </f:facet>
 <h:outputLink value="#{news[2]}" target="_blank">
 <h:outputText value="#{news[0]}" />
 </h:outputLink>
 </rich:column>

 <rich:column id="bezeichnungSpalte">
 <f:facet name="header">
 Beschreibung
 </f:facet>
 <f:facet name="header">
 <h:outputText value="Beschreibung" />
 </f:facet>
 <h:outputText value="#{news[1]}" />
 </rich:column>
 <f:facet name="footer">
 <rich:datascroller id="datascrollermode" maxPages="10" />
 </f:facet>
 </rich:dataTable>
 <rich:jQuery selector=".modeTable tr:odd" timing="immediate" query="addClass('odd-row')" />
 <rich:jQuery selector=".modeTabletr:even" timing="immediate" query="addClass('even-row')" />
 <rich:jQuery selector=".modeTable tr" timing="immediate"
 query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
 <rich:jQuery selector=".modeTable tr" timing="immediate"
 query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
 </rich:tab>

 <rich:tab id="beauty">
 <f:facet name="label">
 <h:outputText value="Looks, Pflege und Make-up, Haare und Styling, Wellness und Body"/>
 </f:facet>

 <rich:dataTable id="beautyTabelle"
 var="news"
 value="#{news.newsbeauty}"
 cellspacing="10"
 cellpadding="10"
 reRender="datascrollerbeauty">

 <f:facet name="header">
 Neues aus der Beautywelt
 </f:facet>

 <rich:column id="idSpalte">
 <f:facet name="header">
 Titel
 </f:facet>
 <h:outputLink value="#{news[2]}" target="_blank">
 <h:outputText value="#{news[0]}" />
 </h:outputLink>
 </rich:column>

 <rich:column id="bezeichnungSpalte">
 <f:facet name="header">
 Beschreibung
 </f:facet>
 <f:facet name="header">
 <h:outputText value="Beschreibung" />
 </f:facet>
 <h:outputText value="#{news[1]}" />
 </rich:column>
 <f:facet name="footer">
 <rich:datascroller id="datascrollerbeauty" maxPages="10" />
 </f:facet>
 </rich:dataTable>

 </rich:tab>
 </rich:tabPanel>
 </h:form>
 </ui:define>
</ui:composition>

Still not working and tried with "onload" and "immediate" :/

[mpickell]

use 'class' as the style class attribute, not 'styleClass'

missing a space: ".modeTabletr:even"

and, i would still use ONLOAD for timing, not immediate.

[damienmc3]

Hmm the attribute "class" is not defined for <rich:dataTable> so I get an Exception "Setter not found for property class"

[mpickell]

sorry, i was thinking html directly.

Maybe you can post the HTML that is output from this. Did you do a search of the page source and make sure the styleclass is getting added to where you are expecting it? Also, in the page source you should be able to see the script that the jQuery is outputting as well.

Maybe try moving the jQuery components outside of the rich:tab, maybe even outside of the <ui:define name="contents"> tag? The jquery components can be anywhere on the page, they don't need to be nested on anything.

[damienmc3]

How can I see the HTML-Code ?

Here is the output from Firefox-Source:
http://pastebin.com/ma21c488

An here the output of <ui:debug>:
http://pastebin.com/m3cc38b04

In none of the both I can find my class "modeTable" which I have specified.

I've also tried to put jQuery stuff outside of rich:tab and ui:define, but no effect.

[mpickell]

Yeah, I don't see it either. Is this definitely the source from after you changed it and added the style class (i.e., you did a hard refresh to reload cache in the browser -- CTRL-SHIFT-R in firefox, or CTRL-F5 in IE, F5 in the other browsers to make sure it is using the latest code)?


Otherwise... try targeting the style class "rich-table" instead of "modeTable" because rich-table is a style class added by RichFaces itself and will get you what you want.

so your selectors would be something like ".rich-table tr:odd"