How to write JavaScript in XHTML| JBoss.org Content Archive (Read Only)

1. Re: How to write JavaScript in XHTML

mail.micke Dec 18, 2008 12:44 PM (in response to karan)

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 Dec 19, 2008 5:46 AM (in response to karan)

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

mail.micke Dec 19, 2008 11:26 AM (in response to karan)

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 Dec 19, 2008 11:53 AM (in response to karan)

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

mail.micke Dec 19, 2008 12:26 PM (in response to karan)

The stuff I sent you earlier is donig just that.

What isn't working?

6. Re: How to write JavaScript in XHTML

francof Dec 19, 2008 3:04 PM (in response to karan)

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

mail.micke Dec 19, 2008 3:35 PM (in response to karan)

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 Dec 22, 2008 6:01 AM (in response to karan)

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 Dec 23, 2008 6:44 AM (in response to karan)

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

mail.micke Dec 28, 2008 2:19 PM (in response to karan)

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

krishnaathul Feb 7, 2009 8:02 AM (in response to karan)

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

mail.micke Feb 8, 2009 10:54 AM (in response to karan)

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

mail.micke Feb 8, 2009 11:04 AM (in response to karan)

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.