5 Replies Latest reply on Mar 2, 2012 5:08 AM by rednose

dataTable loosing style when switching tabs

mdmaurer Mar 1, 2012 7:04 PM

Here 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}

1. Re: dataTable loosing style when switching tabs

sunkaram Mar 1, 2012 3:39 PM (in response to mdmaurer)

looks like styles are getting applied only when full page load happens...

I feel its because <rich:jQuery tags are outside of '<rich:tab' ..

when you change the tabs <h:datatable is re-generating the tables but styles are not applied by <rich:jQuery..
1 of 1 people found this helpful
Actions
2. Re: dataTable loosing style when switching tabs

mdmaurer Mar 1, 2012 4:20 PM (in response to sunkaram)

Thanks for the response.

Putting the rich:jQuery code inside the rich:tabPanel makes the tabs stop working. Can't switch tabs at all.
Putting the rich:jQuery code inside the rich:tab works for that one tab, but not the other.
Duplicating the rich:jQuery code inside BOTH rich:tab tags works (see example code below).

Is that the right solution? Don't like having to duplicate code...

            <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: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')"/>
                    </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: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')"/>
              </rich:tab>
      </rich:tabPanel>
Actions
3. Re: dataTable loosing style when switching tabs

sunkaram Mar 1, 2012 4:47 PM (in response to mdmaurer)

instead of duplicating, assign a id to 'jquery tags' and re-render id when you switch the tabs....

<h:panelGroup id="jqueryTags">
<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:panelGroup>
1 of 1 people found this helpful
Actions
4. Re: dataTable loosing style when switching tabs

mdmaurer Mar 1, 2012 5:59 PM (in response to sunkaram)

It works! Put the jQuery tags in a panelGroup and used a4j:ajax to render them.

Thank you!

Here's the solution:

<h:form id="theForm">

<rich:tabPanel id="theTabPanel" >

    <a4j:ajax event="itemchange" render="jQueryTags" />

     <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:panelGroup id="jQueryTags">
      <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:panelGroup>

</h:form>
Actions
5. Re: dataTable loosing style when switching tabs

rednose Mar 2, 2012 5:08 AM (in response to mdmaurer)

Some time ago Ilya mentioned that layout may not get loaded correctly due to a jsf bug. An additional table-element like the following can help (as well as for tabpanel):

<rich:extendedDataTable rendered="false" />

<rich:tabPanel rendered="false" />
Actions

Go to original post

					<rich:extendedDataTable rendered="false" />
					<rich:tabPanel rendered="false" />