1 Reply Latest reply on Aug 8, 2010 11:55 PM by kragoth

    How to use <rich:JQuery> to find out whether a checkBox inside a dataTable is "Checked" ?

    swapnilj
    swapnilj Aug 6, 2010 5:22 AM

      Ok, Here is what I want to do...I have a rich:dataTable which has a bunch of h:selectBooleanCheckBox(s)...I want that a particular button should only be enabled if & ONLY if ATLEAST 1 of these boxees is checked. Is there any way that I can use <rich:Jquery> or any other plain JavaScript to accomplish this...
      Thanks in Advance !!

      Here's the code:

      For the Boxes-
      <rich:column>                         
      <f:facet name="header">Select</f:facet>
      <h:selectBooleanCheckbox value="#{cloudreq.checked}" id="myCheckBox"/>
      </rich:column>

      the Button-

      <h:commandButton id="btn_deprovision" disabled="true"
      style="background-color:#181818" styleClass="link_button"
      action="#{myform.ButtonActionRequest('Deprovision')}"
      value="Deprovision" />

        • 1. Re: How to use <rich:JQuery> to find out whether a checkBox inside a dataTable is "Checked" ?
          kragoth
          kragoth Aug 8, 2010 11:55 PM (in response to swapnilj)

          Changing the visibility of a h:commandButton with javascript may not be such a good idea.


          However, for the sake of the question I'll provide a possible solution.



          If you do decide to do this server side then:
          Work out the visibility of this button on the server side and update the rendered flag of the actual component itself. Then use an ajax event on the onclick in the checkboxes that will rerender your h:commandButton.


          But, for doing this on the client using jQuery I think it would look like this.
          This is a working example. You should be able to work out from this what you need to do to get it to work in your app. Obviously you need to have the jQuery.js file in the same directory to see this working.


          <html>
     <head>
          <script type="text/javascript" src="jQuery.js"></script>
     </head>
     <body>
          <style>
               .displayNone {
                    display: none;
               }
          </style>
          Hello World
          <table id="Mainform:testTable">
               <th id="Mainform:testTable:header1">header</th>
               <tr id="Mainform:testTable:0">
                    <td>row1col1</td>
                    <td>
                         <input 
                              type="checkbox" 
                              id="Mainform:testTable:0:checkboxInput" 
                              name="chkInput" 
                              onclick="showHideButton();">A Checkbox</input>
                    </td>
               </tr>
               <tr id="Mainform:testTable:1">
                    <td>row2col1</td>
                    <td>
                         <input 
                              type="checkbox" 
                              id="Mainform:testTable:1:checkboxInput" 
                              name="chkInput" 
                              onclick="showHideButton();">A Second Checkbox</input>
                    </td>
               </tr>
          </table>
          <div id="Mainform:buttonDiv" class="displayNone">
               <input type="button" id="Mainform:testButton" value="A BUTTON!"></input>
          </div>
          <div id="debug">test</div>
     </body>
     <script>
          function showHideButton() {
               var table = jQuery("table[id$=testTable]")[0];
               var checked = false;
               jQuery("input:checkbox[id$=checkboxInput]", table).each(
                    function() {
                         if (jQuery(this).attr("checked")) {
                              debug("found checkbox " + this.id + " was checked");
                              checked = true;
                              return;
                         }

                    }
               );

               if (checked == true)
               {
                    debug("Found a checked box so show button");
                    jQuery("div[id$=buttonDiv]").removeClass("displayNone");

               } else {
                    debug("No checked boxes found so hide button");
                    jQuery("div[id$=buttonDiv]").addClass("displayNone");
               }
          }

          function debug(text) {
               jQuery("#debug")[0].innerHTML = text;
          }
          showHideButton();
     </script>
</html>



          I'm not the greatest with jQuery as I'm still learning it (I must admit I absolutely LOVE it though! :P) So, there maybe better jQuery expressions for doing this but...the general idea is there. One of the more tricky bits is matching the ids of components because of all the extra stuff around them in JSF land.


          Hope this helps,
          Tim

            • Actions