dataTable loosing style when switching tabs
mdmaurer Mar 1, 2012 7:04 PMHere is a test page with a rich:tabPanel and two tabs. Each tab contains a rich:dataTable, and the tables are styled with alternating row colors and active row highlight (via h:outputStyleSheet and rich:jQuery).
It works fine when the page first loads (image 'Tab1').
Switch to tab2 and the table looses all the style elements (image 'Tab2').
Switch back to Tab1 and that table has also lost the style (image 'Tab1_again').
Refresh the browser window and styles reappear (as in image 'Tab1').
Same behavior on all browsers I tested (latest versions of IE, Chrome, Firefox, Safari).
Why? Advice on how to fix?
Tab1: Tab2: Tab1_again:
My Environment:
Windows 7
Tomcat 7.0.25
RichFaces 4.2.0.Final
JSF 2.1.7
My xhtml Code:
{code:xml}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich" >
<f:view>
<h:head>
</h:head>
<h:body>
<h:outputStylesheet>
.even-row { background-color: #FCFFFE; }
.odd-row { background-color: #ECF3FE; }
.active-row { background-color: #FFEBDA !important; cursor: pointer; }
</h:outputStylesheet>
<h:form id="theForm">
<rich:tabPanel id="theTabPanel" >
<rich:tab id="tab1" header="Tab1">
<rich:dataTable value="#{poBean.purchaseOrders}"
var="po" id="poTable" rows="5"
styleClass="stable" >
<rich:column>
<f:facet name="header">
<h:outputText value="PO Number" />
</f:facet>
<h:outputText value="#{po.PONumber}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Creation Date" />
</f:facet>
<h:outputText value="#{po.creationDateStr}" />
</rich:column>
</rich:dataTable>
</rich:tab>
<rich:tab id="tab2" header="tab2">
<rich:dataTable value="#{poBean.purchaseOrders}"
var="po2" id="poTable2" rows="5"
styleClass="stable" >
<rich:column>
<f:facet name="header">
<h:outputText value="PO Number" />
</f:facet>
<h:outputText value="#{po2.PONumber}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Creation Date" />
</f:facet>
<h:outputText value="#{po2.creationDateStr}" />
</rich:column>
</rich:dataTable>
</rich:tab>
</rich:tabPanel>
</h:form>
<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
<rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
<rich:jQuery selector=".stable tr" event="mouseover"
query="jQuery(this).addClass('active-row')"/>
<rich:jQuery selector=".stable tr" event="mouseout"
query="jQuery(this).removeClass('active-row')"/>
</h:body>
</f:view>
</html>
{code}