-
1. Re: h:form and mouseover via a4j:outputPanel
nimo22 Feb 5, 2009 9:54 AM (in response to nimo22)I have looked in Firebug and all my ID-references are right, I have really no clue why this works only without a h:form-tag. Whats the difference?
-
2. Re: h:form and mouseover via a4j:outputPanel
tsurdilovic Feb 7, 2009 9:19 PM (in response to nimo22)Look at the html source as the ID of dataTable differs when you add the form ...
why don't you just use:<rich:jQuery selector="#myDataTable tr:odd" timing="onload" query="addClass(odd)" />
? -
3. Re: h:form and mouseover via a4j:outputPanel
nbelaevski Feb 8, 2009 7:25 AM (in response to nimo22)As id is output including ids of parent forms etc., the valid code is:
$$("\##{fn:replace(rich:clientId('dataTable'), ':', '\\:')}")
'fn:' prefix should be bound to http://java.sun.com/jsp/jstl/functions URI. -
4. Re: h:form and mouseover via a4j:outputPanel
nimo22 Feb 8, 2009 7:34 AM (in response to nimo22)Hello,
thank you for your help. But it does not work:
I tried it with:<h:form id="myForm"> <h:dataTable id="myDataTable" value="#{myBean.users}" var="u" styleClass="styleDataTable" onmouseover="$$('#myForm:myDataTable tbody tr:nth-child(odd)').invoke('addClassName', 'odd')"> <h:column > <f:facet name="header"> <h:outputLabel value="login"/> </f:facet> <h:outputText value ="#{u.login}"/> </h:column> <h:column > <f:facet name="header"> <h:outputLabel value="name"/> </f:facet> <h:outputText value ="#{u.name}"/> </h:column> </h:dataTable> </h:form>
So you see:
onmouseover="$$('#myForm:myDataTable tbody tr:nth-child(odd)').invoke('addClassName', 'odd')" is assigned to the right ID (firebug tells me that, too!). But this tells me firebug, when I hover the dataTable:<form id="myForm" name="myForm" method="post" onkeypress="return _submitOnEnter(event,'myForm');" action="/mySite/view.xhtml" class="odd"><table id="myForm:myDataTable" class="styleDataTable" onmouseover="$$('#myForm:myDataTable tbody tr:nth-child(odd)').invoke('addClassName', 'odd')"><thead><tr><th scope="col"><label>login</label></th><th scope="col"><label>name</label></th></tr></thead><tbody><tr><td>ted</td><td>sisi</td></tr><tr><td>harry</td><td>ted</td></tr><tr><td>igor</td><td>oli</td></tr></tbody></table><input type="hidden" name="org.apache.myfaces.trinidad.faces.FORM" value="myForm"/><span id="tr_myForm_Postscript"><input type="hidden" name="javax.faces.ViewState" value="!j_id104"/><script type="text/javascript">//<![CDATA[ function _myFormValidator(f,s){return _validateInline(f,s);}var myForm_SF={}; //]]> </script></span><script type="text/javascript">//<![CDATA[ _submitFormCheck(); //]]> </script></form>
So you see, only the form-tag gets a 'odd'-class. Strange!
I tried it with:<h:form id="myForm"> <rich:jQuery selector="#myDataTable tbody tr:nth-child(odd)" timing="onJScall" name="onmouseover" query="addClass('odd')" /> <h:dataTable id="myDataTable" value="#{myBean.users}" var="u" styleClass="styleDataTable">
or with:<rich:jQuery selector="#myDataTable tbody tr:nth-child(odd)" timing="onJScall" name="onmouseover" query="addClass('odd')" />
it does not work.
Only this kind, without a form-tag works as expected:<h:dataTable id="myDataTable" value="#{allUsers}" var="_u" styleClass="styleDataTable" onmouseover="$$('#myDataTable tbody tr:nth-child(odd)').invoke('addClassName', 'odd')"> .. </h:dataTable>
but I need the form-tag.
What is wrong, where lies the difference? I have no clue! -
5. Re: h:form and mouseover via a4j:outputPanel
nbelaevski Feb 8, 2009 4:29 PM (in response to nimo22)As form is a naming container it prepends its id to the id of data table using ':' char and that's the thing causing problems. Here is the working code:
<h:form id="form"> <style type="text/css"> .odd-row { background-color: #ECF3FE; } .even-row { background-color: #FCFFFE; } .active-row { background-color: #FFEBDA; } </style> <br /> <a4j:outputPanel id="panel" onmouseover="addClasses()" onmouseout="removeClasses()"> <rich:dataTable width="483" id="myDataTable" rows="15" value="#{forum5Bean.lotOfData}" var="category"> <f:facet name="header"> <h:column> <h:outputText value="Make" /> </h:column> </f:facet> <h:column> <h:outputText value="#{category}" /> </h:column> </rich:dataTable> </a4j:outputPanel> <rich:jQuery name="addClasses" timing="onJScall" selector="#myDataTable tr:odd" query="addClass('odd-row')" /> <rich:jQuery name="removeClasses" timing="onJScall" selector="#myDataTable tr:odd" query="removeClass('odd-row')" /> <br /> </h:form>
Another option -<h:form id="form" prependId="false">
-
6. Re: h:form and mouseover via a4j:outputPanel
nbelaevski Feb 8, 2009 4:32 PM (in response to nimo22)'$$' function of prototype.js framework seems to have issues with selectors containing ':' character. We've already reported one issue to their issue-tracking system but they've rejected it. As you see jQuery works fine.
-
7. Re: h:form and mouseover via a4j:outputPanel
nimo22 Feb 9, 2009 2:22 AM (in response to nimo22)hey thanks,
yes. jquery works really fine. (Besides, Richfaces is build up by Prototype. Is there a plan to use jQuery in future?)
However, in Prototype I have solved that, too. By avoiding the ":". Using something like $$('cssClass.HtmlElement ...) instead of referencing composite ID's works.
Greetings.