8 Replies Latest reply on Jul 30, 2010 3:31 AM by Bjørn T Johansen

    Changing colours in a table with mouse over?

    Bjørn T Johansen Newbie

      I use the following code for my tables..:

       

       

      <rich:dataTable id="resulttable" onRowMouseOver="this.style.backgroundColor='#ccccff'"
                                      rendered="#{searchController.showHeaderListe}"
                                      onRowMouseOut="this.style.backgroundColor='transparent'"
                                      cellpadding="0" cellspacing="0" bgcolor="#b8ccd3"
                                      width="100%" border="0" var="replLog" value="#{searchController.headerListe}">
      
      

       

       

      This works fine when I have a table where all the rows have the same background... But now I have a problem...

      I have a table where the rows have different colors depending on a status field on each row... How can I use mouse over color and set the color back to the original color on mouse out?

       

       

      Regards,

       

      BTJ

        • 1. Re: Changing colours in a table with mouse over?
          Ilya Shaikovsky Master

          just store the color which were before mouseover in some variable. Then restore in mouseout.

          • 2. Re: Changing colours in a table with mouse over?
            Bjørn T Johansen Newbie

            Yes, that's what I thought but my knowledge in javascript is limited; that's why I use RichFaces...

            I was kind of hoping for an example...

             

            BTJ

            • 3. Re: Changing colours in a table with mouse over?
              Ilya Shaikovsky Master

              doh forgot that we have even simpler solution at our livedemo http://livedemo.exadel.com/richfaces-demo/richfaces/jQuery.jsf?c=jQuery&tab=usage

               

              By using classes additions and removal - you will not care about storing and restoring some color on your own.

              • 4. Re: Changing colours in a table with mouse over?
                Bjørn T Johansen Newbie

                Hmmm... Tried to do that but I get no mouse over effect.... Here is my code....:

                 

                 

                <ui:composition template="common/layout.xhtml">
                    <style  type="text/css">
                        .active-row {
                            background-color: #ccccff;
                        }
                    </style>
                
                    <ui:define name="top">
                        <ui:include src="common/header.xhtml"/>
                    </ui:define>
                    <ui:define name="menu">
                        <ui:include src="common/menu.xhtml"/>
                    </ui:define>
                    <ui:define name="content">
                        <br/>
                        <br/>
                        <h:panelGrid columnClasses="alignmiddle" width="100%" columns="1">
                            <h:column>
                                <p align="center">
                                        <span style="font-size:large;">
                                            <h:outputText value="#{msgs.menu_text}"/>
                                        </span>
                                </p>
                                <br/>
                                <br/>
                
                            </h:column>
                        </h:panelGrid>
                        <h:form id="form_action">
                            <br/>
                            <rich:messages globalOnly="true" errorClass="errors" infoClass="info"/>
                            <h:panelGrid id="searchgrid" columns="4" cellpadding="3px">
                                <h:outputText value="#{msgs.search_for_message}:"/>
                                <h:inputText id="focusfield" value="#{searchController.searchText}" size="50" maxlength="50">
                                    <f:validateLength maximum="50" minimum="0"/>
                                </h:inputText>
                                <h:selectOneMenu id="searchEntities" value="#{searchController.searchEntity}">
                                    <f:selectItems value="#{searchController.searchEntities}"/>
                
                                    <!--<a4j:support event="onchange" action="#{searchController.searchEntity}" reRender="searchgrid" ajaxSingle="true"/>-->
                                </h:selectOneMenu>
                                <rich:message for="focusfield" errorClass="errors"/>
                                <h:outputText value="#{msgs.run_date}:"/>
                                <rich:calendar id="runtimedate" value="#{searchController.runDate}"
                                    popup="true"
                                    datePattern="#{msgs.date_pattern}"
                                    enableManualInput="true" inputSize="10"
                                    showApplyButton="false" cellWidth="24px" cellHeight="22px" style="width:200px"/>
                                <rich:message for="runtimedate" errorClass="errors"/>
                                <rich:spacer/>
                                <rich:spacer height="20"/>
                                <rich:spacer height="20"/>
                                <rich:spacer height="20"/>
                                <rich:spacer height="20"/>
                                <a4j:commandButton id="btnSearch" value="#{msgs.search}" action="#{searchController.searchForMessages}" reRender="searchResult" status="waitStatus"/>
                                <rich:spacer/>
                                <rich:spacer/>
                                <rich:spacer/>
                            </h:panelGrid>
                
                            <a4j:jsFunction name="search" action="#{searchController.searchForMessages}" reRender="searchResult"
                                            status="waitStatus"/>
                            <rich:hotKey selector="#focusfield" key="return" handler="search();return false;"/>
                            <br/>
                            <h:panelGroup id="searchResult">
                                <!--<rich:dataTable id="resulttable" onRowMouseOver="this.style.backgroundColor='#ccccff'"
                                                rendered="#{searchController.showHeaderListe}"
                                                onRowMouseOut="this.style.backgroundColor='transparent'"
                                                cellpadding="0" cellspacing="0" bgcolor="#b8ccd3"
                                                width="100%" border="0" var="replLog" value="#{searchController.headerListe}">-->
                                <rich:dataTable id="resulttable"
                                                rendered="#{searchController.showHeaderListe}"                                
                                                cellpadding="0" cellspacing="0" bgcolor="white"
                                                width="100%" border="0" var="replLog" value="#{searchController.headerListe}">
                                    <f:facet name="header">
                                        <rich:columnGroup style="background: lightsteelblue; font-weight: bold;">
                                            <rich:column>
                                                <h:outputText value="Entitet"/>
                                            </rich:column>
                                            <rich:column>
                                                <h:outputText value="EntitetId"/>
                                            </rich:column>
                                            <rich:column>
                                                <h:outputText value="Melding"/>
                                            </rich:column>
                                            <rich:column>
                                                <h:outputText value="Replikeringstype"/>
                                            </rich:column>
                                            <rich:column>
                                                <h:outputText value="Status"/>
                                            </rich:column>
                                            <rich:column>
                                                <h:outputText value="Kilde"/>
                                            </rich:column>
                                            <rich:column>
                                                <h:outputText value="Kjørt tidspunkt"/>
                                            </rich:column>
                                            <rich:column>
                                                <h:outputText value="Opprettet tidspunkt"/>
                                            </rich:column>
                                            <rich:column>
                                                <h:outputText value="Stacktrace"/>
                                            </rich:column>
                                        </rich:columnGroup>
                                    </f:facet>
                                    <rich:columnGroup styleClass="#{replLog.columnStyle}">                    
                                        <rich:column style="text-align: left;">
                                            <h:outputText value="#{replLog.enitet}"/>
                                        </rich:column>
                                        <rich:column style="text-align: left;">
                                            <h:outputText value="#{replLog.enitetId}"/>
                                        </rich:column>
                                        <rich:column style="text-align: left;">
                                            <h:outputText value="#{replLog.message}"/>
                                        </rich:column>
                                        <rich:column style="text-align: center;">
                                            <h:outputText value="#{replLog.replicatorType}"/>
                                        </rich:column>
                                        <rich:column style="text-align: center;">
                                            <h:outputText value="#{replLog.status}"/>
                                        </rich:column>
                                        <rich:column style="text-align: left;">
                                            <h:outputText value="#{replLog.kilde}"/>
                                        </rich:column>
                                        <rich:column style="text-align: right;">
                                            <h:outputText value="#{replLog.runTime}">
                                                <f:convertDateTime pattern="dd.MM.yyyy HH:mm:ss" timeZone="Europe/Oslo" dateStyle="both"/>
                                            </h:outputText>
                                        </rich:column>
                                        <rich:column style="text-align: right;">
                                            <h:outputText value="#{replLog.created}">
                                                <f:convertDateTime pattern="dd.MM.yyyy HH:mm:ss" timeZone="Europe/Oslo" dateStyle="both"/>
                                            </h:outputText>
                                        </rich:column>
                                        <rich:column style="text-align: center;">
                                            <h:commandLink value="Hent stacktrace" action="#{searchController.showMessage}">
                                                <f:param value="#{replLog.stacktrace}" name="stacktrace"/>
                                            </h:commandLink>
                                        </rich:column>
                                    </rich:columnGroup>
                                </rich:dataTable>                  
                            </h:panelGroup>
                            <rich:jQuery selector="#resulttable tr" query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
                            <rich:jQuery selector="#resulttable tr" query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
                        </h:form>        
                        <br/>
                        <br/>
                        <span style="font-size: small; color: #777777; ">Copyright ASP as, 2010</span>
                    </ui:define>
                    <ui:define name="footer">
                
                    </ui:define>
                
                </ui:composition>
                

                 

                BTJ

                • 5. Re: Changing colours in a table with mouse over?
                  Ilya Shaikovsky Master

                  you using #resulttable but client id of the table contains form id. use selector by class in order no to deal with such problems.

                  • 6. Re: Changing colours in a table with mouse over?
                    Bjørn T Johansen Newbie

                    aaah... of course...

                    But now I have tried the following, but none of them worked...:

                     

                     

                     

                    clientId:
                    
                    <rich:jQuery selector="#form_action\\:resulttable tr" query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
                    <rich:jQuery selector="#form_action\\:resulttable tr" query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
                    
                    
                    class:
                    
                    <rich:jQuery selector="tr.noimport,tr.slowimport,tr.ok" query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
                    <rich:jQuery selector="tr.noimport,tr.slowimport,tr.ok" query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
                    
                    

                     

                     

                    What am I missing?

                     

                     

                    BTJ

                    • 7. Re: Changing colours in a table with mouse over?
                      Ilya Shaikovsky Master

                      try please just

                       

                      <dataTable styleClass="table".....>

                       

                      and

                       

                      <jQuery selector=".table ..."..../>

                       

                      in order not to deal with client id's and escapements.

                      • 8. Re: Changing colours in a table with mouse over?
                        Bjørn T Johansen Newbie

                        Ok, tried that but still no effect....

                         

                        BTJ