2

I have implemented several apex:inputCheckboxes in my Visualforce pages. I used a JQuery function to handle the showing and hiding of these functions. I have outer checkboxes that once checked displays inner checkboxes for each outer one.

Everything works perfectly except for one thing. I added an "if" statement to check if all of the inner checkboxes have been unchecked, then uncheck the corresponding outer checkbox. This works in all aspects except one. I have a "Return" function on my pages that will allow the user to go to a previous search and it will save the users selections(which are the checkboxes). When the user comes back to the search page, the appropriate checkboxes are checked, however, deselecting the inner checkboxes does not deselect the outer one. I know this is happening because the outer one was never "clicked" when it returns (I set the selected value in the controller).

Sorry if this was long-winded. Here is my JQuery function:

<script type="text/javascript">
   var j$ = jQuery.noConflict(); 
     j$(document).ready(function() {
        j$('.check').click(function () {
           var divId = '#versionCheckboxes' + j$(this).attr('title').trim(), //get the id of the versions checkboxes
               extendedDiv = divId + ' .versionCheckbox tbody tr td input', //get the exact location
               chk = (this); //used for closing checkboxes

           if(j$(this).is(':checked')) {
              j$(extendedDiv).attr('checked', true);
              j$(divId).show();

              //this function is called if you uncheck all inner boxes, it will uncheck the outer box
              j$(extendedDiv).click(function() {
                if (j$(extendedDiv).is(':checked') == false) {
                    j$(chk).attr('checked', false);
                    j$(divId).hide();
                }
               });  
            }
            else {
              j$(extendedDiv).attr('checked', false);
              j$(divId).hide();
            }
         });
       });
 </script>

Now when I return to the search page, and I manually deselect then re-select the outer checkbox, it works. It is just the initial return that doesn't do what I want.

I am not extremely knowledgeable with JQuery so any help would be greatly appreciated.

  • on line 4 and 5 of your script, you should have semi-colons (;) instead of commas (,). – Matt K Jul 2 '13 at 15:30
  • 2
    Sorry about this, I edited the code to be properly indented in that area. I used ',' because i have multiple vars I'm creating. – El Duderino Jul 2 '13 at 15:39
3

What if you do something as simple as: $j('.check:checked').each(function(){$j(this).trigger('click');}); on doc ready? That would simulate a click event and kick off the JS you pasted. You may wind up needing to find the deepest checkbox in the DOM to get the exact results you are looking for though.

| improve this answer | |
  • I used some of this to fix it. I pull the logic out into two javascript functions and in the '.ready' I do the .each – El Duderino Jul 2 '13 at 18:29
1

Try using change method instead of click that will trigger this function even when you change the status from controller. However if the status is set before the page renders this still will not work a litle hack might be calling click on all checkboxes twice (which will preserve they state but trigger your logic)

j$('.check').click();
j$('.check').click();
| improve this answer | |
  • Thanks for your input Moti. However the problem is still occuring when I return to the search page. – El Duderino Jul 2 '13 at 15:58
  • Another solution might be moving all return logic to client side (using jquery) the questions is how hard it is. Can you post the controller code ? – Moti Korets Jul 2 '13 at 16:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.