Changing colours in a table with mouse over?

[bjorntj]

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

[ilya_shaikovsky]

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

[bjorntj]

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

[ilya_shaikovsky]

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.

[bjorntj]

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

[ilya_shaikovsky]

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

[bjorntj]

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

[ilya_shaikovsky]

try please just

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

and

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

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

[bjorntj]

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

BTJ