13 Replies Latest reply on Feb 8, 2009 11:04 AM by Mikael Andersson

    How to write JavaScript in XHTML

    Karan Kumar Newbie

      Hi All,
      I am using Richfaces in my xhtml files, and now am wondering if there is any way to write javascript in the xhtml file to select all checkboxes by selecting the header checkbox. As we do in GMail and Yahoo accounts. Any help will be appreciated...


      Thanks in advance


      Karan

        • 1. Re: How to write JavaScript in XHTML
          Mikael Andersson Master

          Hi


          Quite easy using jQuery


          For example:


          In the tables left most column might look like this:


          <rich:column>
               Select for deletion
               <rich:separator/>
               <a id="select_all" href="#" onclick="">all</a>|
               <a id="clear_all" href="#" onclick="">clear</a>|
               <a id="invert_all" href="#" onclick="">invert</a>
          </rich:column>
          



          Then add this JavaScript to assign onClick functions for the above 3 links:


          jQuery(document).ready(function(){
               var tableId = '#theForm\\:theTable';
               jQuery('#select_all').click(function(){
                    jQuery(tableId).find('input[@type=checkbox]').attr('checked', true);
               });
               
               jQuery('#clear_all').click(function(){
                    jQuery(tableId).find('input[@type=checkbox]').attr('checked', false);
               });
               
               jQuery('#invert_all').click(function(){
                    jQuery(tableId).find('input[@type=checkbox]').each( function(index){
                         jQuery(this).attr('checked', !jQuery(this).attr('checked'));
                    });
               });
                
          });
          
          



          Not that the table is in a form with the id theForm and the dataTable has the id theTable.
          The reason for the \\ is that colon has to be escaped.


          Cheers,
          Micke

          • 2. Re: How to write JavaScript in XHTML
            Karan Kumar Newbie

            Hi Micke,
            Thank you for the reply, but I am not aware of jQuery code and how to implement it.Here is my code and I have implemented javascript but its not working..... Can you please tell where did I go wrong.


            xthml:


            <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                                         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:s="http://jboss.com/products/seam/taglib"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:rich="http://richfaces.org/rich"
                 xmlns:a4j="http://richfaces.org/a4j"
                 template="../layout/mainTemplate.xhtml">
                 <ui:define name="innerbody">
                      <ui:include src="/stylesheet/defaultStyles.css" />
                      
                      
                 <script type="text/javascript" language="javascript">
                     
                     function check()
                     {
                          for(i=0; i&lt;document.forms["profileResultForm"].elements.length; i++)
                          {
                               elm = document.forms["profileResultForm"].elements[i];
                               if ( elm.type == 'checkbox')
                               {
                                    if ( elm.checked )
                                    {
                                         return confirm("Are you sure you want to delete selected profiles?");
                                    }
                               }
                          }
                          alert("No Profile selected for deleting!!!");
                          return false;
                     }
                     
                     function selectAllCB(checkVal)
                     {
                                   
                          for(i=0; i&lt;document.forms["profileResultForm"].elements.length; i++)
                          {
                               elm = document.forms["profileResultForm"].elements[i];
                               if ( elm.type == 'checkbox')
                                    if ( elm.disabled == false )
                                         elm.checked = checkVal;
                          }
                          
                     }
                </script>
                      <body onload="loadLeftFrame()">
                      <a4j:form id="profileManagementForm" ajaxSubmit="true"
                           enctype="multipart/form-data">
                           <h:messages globalOnly="true" styleClass="message" />
            
                           <rich:panel headerClass="headerFont">
            
            
                                <f:facet name="header">
                     Profile Management
                     </f:facet>
                                <ui:include src="/stylesheet/defaultStyles.css" />
                                <h:form id="profileResultForm" style="width:100%;"
                                     enctype="multipart/form-data">
            
                                     <h:outputText value="Profiles NotFound."
                                          rendered="#{empty barringList.resultList}" />
            
                                     <rich:datascroller for="barringList"
                                          rendered="#{not empty barringList.resultList}"></rich:datascroller>
            
                                     <rich:dataTable style="width:100%;" id="barringList"
                                          value="#{barringList.resultList}" var="barring"
                                          rendered="#{not empty barringList.resultList}">
            
                                          <rich:column align="left" colspan="1">
                                               <f:facet name="header">
                                                    <h:panelGrid columns="2">
                                                         <h:selectBooleanCheckbox id="selectAll" 
                                                         onclick="selectAllCB(this.checked)" disabled="#{empty barringList.resultList}">
                                                         </h:selectBooleanCheckbox>
                                                         <h:outputText value="Select"
                                                              style="text-align:left;"></h:outputText>
                                                    </h:panelGrid>
                                               </f:facet>
                                               <h:selectBooleanCheckbox value="#{findSelections[barring]}" />
                                          </rich:column>
                                          <rich:column align="center">
                                               <f:facet name="header">Name</f:facet>
                                               #{barring.name}
                                          </rich:column>
                                          <rich:column align="center">
                                               <f:facet name="header">Description</f:facet>
                                               #{barring.description}
                                          </rich:column>
                                     </rich:dataTable>
                                </h:form>
                           </rich:panel>
                      </a4j:form>
            
                      <div class="actionButtons">
                     <h:commandButton id="delete" value="Delete"
                           action="#{barringList.deleteList}" onclick="return check();" />
                   
                      </div>
                      </body>
                 </ui:define>
            </ui:composition>
            



            • 3. Re: How to write JavaScript in XHTML
              Mikael Andersson Master

              Hi


              To be honest I don't have the will power to try and understand your JavaScript ;-)


              I strongly recommend that you give jQuery a go, will require very little time to get into and it is bundled with RichFaces . It is also a great tool to have in your developer toolbox.


              The only thing you may have to do is to add a


              <a4j:loadScript src="resource://jquery.js"/>
              



              in <head> but that is it.


              • 4. Re: How to write JavaScript in XHTML
                Karan Kumar Newbie

                Ok fine thank you Mikael,
                But can you atleast give me an example how to use jquery in datatable to select all checkboxes. Because I am confused how to implement it in xhtml.Its not working for me....


                Many thanks in advance


                Karan

                • 5. Re: How to write JavaScript in XHTML
                  Mikael Andersson Master

                  The stuff I sent you earlier is donig just that.


                  What isn't working?

                  • 6. Re: How to write JavaScript in XHTML
                    Franco Fernandes Novice

                    Karan


                    Mikael has been very helpful here.


                    I suggest you learn a bit of jQuery, you will be really surprised at it's power.


                    I just learned something from Mikael's example here - I did not know how to write my jQuery selectors for dynamic ids and of course this tip for selecting all checkboxes.  Thanks Mikael.


                    http://jquery.com/


                    http://jqueryhelp.com/


                    http://plugins.jquery.com/




                    I recommend you try out jQuery examples standalone to begin with so you get a hang of it.
                    Once you get familiar with it, you can add it to your .xhtml source files.


                    Good luck
                    Franco



                    • 7. Re: How to write JavaScript in XHTML
                      Mikael Andersson Master

                      Well put Franco


                      A while ago I even managed to make the <rich:subTable>  (client side) expandable/collapsable with jQuery (very clunky impl though), so it is definately worth learning.

                      • 8. Re: How to write JavaScript in XHTML
                        Karan Kumar Newbie

                        Thank you Mikael, and Thank You Franco,
                        I am glad to see your replies, I will definitely go through jQuery and find out solution. Many Many thanks to you both.


                        Cheers
                        Karan.

                        • 9. Re: How to write JavaScript in XHTML
                          Karan Kumar Newbie

                          Hey can any one tell me whether should I add any plugins to write jQuery code in my xhtml file. If so where shoul I add the plugins and from where to download the plugins.


                          Thankyou in advance


                          Karan.

                          • 10. Re: How to write JavaScript in XHTML
                            Mikael Andersson Master

                            Hi


                            You might have to add this in head :


                            <a4j:loadScript src="resource://jquery.js"/>
                            



                            But otherwise there is no need to add any plugins for simple jQuery things, but RichFaces only bundles the basic jQuery framework (if i'm not mistaken) so if you want to use features available in other plugins you'll have to add them.


                            The stuff I posted above was only using core jQuery so no need for extra plugins for that.
                            You should have pretty much all you need from the code I posted.


                            Good luck,
                            Micke

                            • 11. Re: How to write JavaScript in XHTML
                              Krishnakumar Ramanathan Newbie

                              Hi Micke,


                              Is it possible to select all record in a paging data table, I tried to select all the records but its only selecting the current page and when I move to next page (data table) check boxes are not selected. Is there any way to select all the records in a data table

                              • 12. Re: How to write JavaScript in XHTML
                                Mikael Andersson Master

                                I've never tried that myself.


                                I guess it is possible via the oncomplete event on the datascroller and some global js variable to keep information that someone have clicked select all.


                                Not quite sure how to remember what has been selected on pages after leaving them though...


                                The easiest would probably be if you had a boolean property in the Object representing the row data.
                                Then the select all attribute could set it to true for all elements in the List and then it could be possible to use a4j:support with the checkboxes to update the state of individual rows.


                                If I were you I'd try my luck in the richfaces forum.


                                Good luck,
                                Micke

                                • 13. Re: How to write JavaScript in XHTML
                                  Mikael Andersson Master

                                  Hi


                                  Just read my own text and it doesn't even make sense to me :)




                                  Then the select all attribute could set it to true for all elements in the List

                                  What I tried to say with that is that an action could be used to set the selected property of all the elements to true, and then re-render the table.