h:form and mouseover

[nimo frey]

I want to alternate rows by onmouseover-handler and have this solution which really works fine :

<a4j:outputPanel onmouseover="$$('##{rich:clientId('myDataTable')} tbody tr:nth-child(odd)').invoke('addClassName', 'odd')">

<rich:dataTable id="myDataTable" value="#{myBean.datas}" var="d">
...
</rich:dataTable>

But now, I have to wrap my dataTable with a h:form-Tag . When doing this, the alternating does not work anymore :

<h:form>
<a4j:outputPanel onmouseover="$$('##{rich:clientId('myDataTable')} tbody tr:nth-child(odd)').invoke('addClassName', 'odd')">

<rich:dataTable id="myDataTable" value="#{myBean.datas}" var="d">
...
</rich:dataTable>
<h:form>

Does anyone know, why?

Thanks in advance

[Bauke Scholtz]

Look at the generated HTML/Javascript output and you´ll know.

[nimo frey]

hey bauke, how are you? nice to see you again:-)

This:

<h:form id="formDataTable">  
<a4j:outputPanel onmouseover="$$('##{rich:clientId('myDataTable')} tbody tr:nth-child(odd)').invoke('addClassName', 'odd')">  
  
<rich:dataTable id="myDataTable" value="#{myBean.datas}" var="d">  
...  
 </rich:dataTable>  
<h:form> 

generates this code:

<form id="formDataTable" name="formDataTable" method="post" onkeypress="return _submitOnEnter(event,'formDataTable');" action="/mySys/mySite.xhtml" class="odd">
<span id="formDataTable:j_id143" onmouseover="$$('#formDataTable:myDataTable tbody tr:nth-child(odd)').invoke('addClassName', 'odd')">...

But cannot find the solution to my problem. Do you know?

[nimo frey]

When I delete the h:form then all works, but I need the form.

[Bauke Scholtz]

With looking to the code I actually meant looking to the code from developer´s perspective. Spot the fault in the code and trackback it to the JSF component. If it is a bug in your code, fix it. If it is a bug in RichFaces code, report it to the RichFaces boys over there at jboss.org.

[nimo frey]

no its not a bug, having tried with h:dataTable and h:form.

I am searching..

[Bear Bibeault]

Since you insist upon showing JSF tags rather than the generated HTML and JavaScript, I've moved this to the JSF forum.

[nimo frey]

I guess, it s not a JSF-Issue. Who have said, that a JSF-Developer has not care about Java-Script:-?

This JSF:

<h:form id="myForm"><h:dataTable id="myDataTable" value="#{myBean.users}" var="u" styleClass="dataTableSection" 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="firstname"/>
			    </f:facet>
			    <h:outputText value ="#{u.firstname}"/>
		    </h:column>

	</h:dataTable>
	</h:form>

However, this is the generated HTML - the alternating does not work, only because of the form-tag:

<form id="myForm" name="myForm" method="post" onkeypress="return _submitOnEnter(event,'myForm');" action="/mySys/users.xhtml" class="odd"><table id="myForm:myDataTable" class="dataTableSection" LOOK DOWN!!!><thead><tr><th ><label>login</label></th><th ><label>firstname</label></th></tr></thead><tbody><tr><td>Tim</td><td>Mike</td></tr><tr><td>Eva</td><td>Mike</td></tr><tr><td>Sven</td><td>Sven</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_id17"/><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>

LOOK DOWN:
table id="myForm:myDataTable" class="dataTableSection" onmouseover="$$('#myForm:myDataTable tbody tr:nth-child(odd)').invoke('addClassName', 'odd')"

If you delete the form-tag, and change the reference in Prototype to:
onmouseover="$$('#myDataTable tbody tr:nth-child(odd)').invoke('addClassName', 'odd')" - then zebra rows works - but I NEED THE FORM TAG!

Is that precisly enough?

[Bauke Scholtz]

As said, the cause of the problem might be in the Javascript code generated by RichFaces.

If you don't understand Javascript as language at all then it stops here. We (at least I) are not going to do the debugging work for you. Report this issue as-is to the boys of RichFaces over there at JBoss.org and see if you get support.

[nimo frey]

As said, the cause of the problem might be in the Javascript code generated by RichFaces.

This is not a RF-Problem!

Have I any richfaces-component there? No!

We (at least I) are not going to do the debugging work for you.

I only want to ask why the prototype script I added does not work within a common form-tag. Has that anything to do with richfaces, or even with JSF. No!

Besides, you do not have to help me. And second, you do not have helped me at all !

[Bauke Scholtz]

Prototype? You're talking about the Javascript library Prototype?

Oh, now I see it. You didn't mention about it at all. You seemed to insist that it is part of RichFaces/JSF, you didn't mention that you're mixing RichFaces with Prototype. That was just your fault. It may also be my fault that I assumed it as part of RichFaces, sorry about that then. But with your last attitude where in you insist that I was not helpful, I am indeed not motivated anymore to help you.

For future problems with Javascript libraries, concentrate you on the client side code (HTML), not on the server side code, because that is the only one what Javascript can see and interact with. You should know that better.

[nimo frey]

.. concentrate you on the client side code (HTML)

yes, you are right, that s the reason why I have added this topic to XHTML-JavaScript-Section.
But now, it s here.

I know, I had not explained my problem clearly.

Sorry.

[Bauke Scholtz]

Well, try it again with only the HTML code and a decent Javascript debugger (Firebug anyone?).

[nimo frey]

solved:

http://www.coderanch.com/t/430188/HTML-JavaScript/prototype-selector