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

    dataTable loosing style when switching tabs

    Mike Maurer Newbie

      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:

      Tab1.jpgTab2.jpgTab1_again.jpg

       

      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
          Maheswara Sunkara Novice

          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
          • 2. Re: dataTable loosing style when switching tabs
            Mike Maurer Newbie

            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>

            • 3. Re: dataTable loosing style when switching tabs
              Maheswara Sunkara Novice

              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
              • 4. Re: dataTable loosing style when switching tabs
                Mike Maurer Newbie

                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>

                 

                • 5. Re: dataTable loosing style when switching tabs
                  frank furt Newbie

                  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" />