-
1. Re: Changing colours in a table with mouse over?
ilya_shaikovsky Jul 28, 2010 9:50 AM (in response to bjorntj)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?
bjorntj Jul 29, 2010 2:08 AM (in response to ilya_shaikovsky)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 Jul 29, 2010 3:17 AM (in response to bjorntj)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?
bjorntj Jul 29, 2010 3:46 AM (in response to ilya_shaikovsky)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 Jul 29, 2010 4:01 AM (in response to bjorntj)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?
bjorntj Jul 29, 2010 4:45 AM (in response to ilya_shaikovsky)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 Jul 30, 2010 3:19 AM (in response to bjorntj)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?
bjorntj Jul 30, 2010 3:31 AM (in response to ilya_shaikovsky)Ok, tried that but still no effect....
BTJ