1 2 Previous Next 16 Replies Latest reply on Nov 27, 2009 9:46 AM by Heinrich Hermann

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

    Heinrich Hermann Newbie

      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 !

        1 2 Previous Next