7 Replies Latest reply on Feb 9, 2009 2:22 AM by nimo22

    h:form and mouseover via a4j:outputPanel

    nimo22

      I want to alternate rows by onmouseover-handler and have this solution which 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?

        • 1. Re: h:form and mouseover via a4j:outputPanel
          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

            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

              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

                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

                  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

                    '$$' 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

                      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.