5 Replies Latest reply: Apr 1, 2014 1:51 AM by Tom Petrus RSS

    f_CheckAll not firing onClick event

    scott.wesley

      Hi all,

       

      I've defined a checkbox in the header of my tabular form to toggle all the row checkboxes using $f_CheckAll

       

      This works great, but today I happened to couple it with the technique that adds checkbox selections into a collection, in short:

      apex_item.checkbox(1, empno, 'onclick="f_UpdateCollection(this)"')

       

      The trouble I have is that the f_CheckAll() function toggles my checkboxes, but does not fire the onclick event, hence putting the checkboxes in the collection.

       

      I'm thinking either a bolt-on to rectify this issue, or another solution for f_CheckAll()

      I wonder if this solution might be adaptable to this scenario?

      Check all checkboxes in a column of a tabular form

       

      Any tips?

       

      Cheers,

       

      Scott

        • 1. Re: f_CheckAll not firing onClick event
          vincent_deelen

          Hi Scott,

           

          Have you tried binding an onClick function to the header checkbox? Something in the line of:

          $('input[name="f01"]').each( f_UpdateCollection(this) );

           

          Regards,

          Vincent

          http://vincentdeelen.blogspot.com

          • 2. Re: f_CheckAll not firing onClick event
            scott.wesley

            Thanks Vincent - that was just the lead I needed.

             

            I'm still wrapping my head around jQuery and how it can be so elegant.

             

            I pass if my header check is checked

            onclick=my_checkall($('#P1_HEADER_CHK').prop('checked'));
            

             

            to my own check all fn, which toggles the UI elements then invokes the update collection function

            function my_checkall(b) {
              $('input[name="f10"]').each(function(){
                $(this).attr('checked',b);
                f_UpdateCollection(this);
              });
            }
            

             

            Trouble is this is quite laggy, particularly on a tablet over Australia's 4G network - so I might need to redesign anyway and capture which boxes are checked when I close the dialog they're in.

             

            At least I learnt a few things.

            • 3. Re: f_CheckAll not firing onClick event
              vincent_deelen

              Hi Scott,

               

              Great, nice solution. In my experience updating large numbers of collection members can be time consuming. So I suspect the lag is caused by the f_UpdateCollection function, rather than your my_checkall function.

               

              Regards,

              Vincent

              http://vincentdeelen.blogspot.com

              • 4. Re: f_CheckAll not firing onClick event
                scott.wesley

                I don't think there is a bottleneck as such - it's more like the old Forms post-query problem - frequent switches back and forth from the browser to the server to indicate x many checkboxes now checked.

                 

                Anyway, I've modified it to run some jQuery when closing my dialog to build a delimited string of those checked and send that once to a PL/SQL process, which can then bulk bind an array to the collections table using apex_collection.add_members.

                 

                It works great.

                • 5. Re: f_CheckAll not firing onClick event
                  Tom Petrus

                  For those interested, another one-size-fit-all solution may be to not concatenate values as such, and instead use the f## arrays to process one or more rows. As we're talking checkboxes, I'd use array f01 to store an id, and f02 to store the checked/unchecked value.

                  Assuming f10 is the checkbox array, and the value of the checkbox is also the pk value.

                   

                  //collect the checkbox values, store in arrays, and send to server
                  //the input parameter is meant to take a node or selector in, over which will be looped
                  function processCheckboxes(pNd){
                    var arrf01 = [], arrf02 = [];
                    $( pNd ).each(function(){
                      arrf01.push( $(this).val() );
                      arrf02.push( $(this).prop("checked") ? 1 : 0 );
                    }); 
                    apex.server.process("UPDATE_COLLECTION", {f01: arrf01, f02: arrf02}, {});
                  };
                  //handle click on each individual checkbox
                  $(document).on("click", "input[name=f10]", function(){
                    processCheckboxes(this);
                  });
                  //handle header element click
                  $(document).on("click", '#P1_HEADER_CHK', function(){
                    var chkboxes = "input[name=f10]";
                    $(chkboxes).prop("checked", $(this).prop("checked"));
                    processCheckboxes(chkboxes);
                  });
                  

                   

                  in UPDATE_COLLECTION you can then transparently handle the arrays, regardless of how many have been sent.

                  FOR i IN 1..apex_application.g_f01.count
                  LOOP
                    --update collection where ID = f01(i) with f02(i) (0 or 1 for example)
                  END LOOP;
                  

                   

                  Just throwing that out there.

                  Also, I hate onclick attributes :-).