11 Replies Latest reply: Sep 2, 2013 12:34 AM by Gus C RSS

    Count Selected Shuttle Items

    Gus C

      Apex 3.2

       

      I have a shuttle item and a text box.

      As the user moves items from the left of the shuttle to the right, I would like to display a count (in the text box) of the number

      of items he has chosen.

       

      I know that his will probably have to be done with an onclick javascript function, but I have no idea how to do it.

       

      I cannot use dynamic actions, as this is an Apex 3.2 application.

       

      Please have a look at my workspace

       

      Workspace: GUSCRIGHTON

      Username: ANGUS.CRIGHTON@HAVILOG.COM

      Password: terminator

      App Id: 25851

      Page: 5

       

      Thanks

       

      Gus

        • 1. Re: Count Selected Shuttle Items
          jariola

          Hi,

           

          Do you use jQuery with APEX 3.2 ?

           

          Regards,
          Jari

          • 2. Re: Count Selected Shuttle Items
            Gus C

            No, I'm afraid not

             

            Gus

            • 3. Re: Count Selected Shuttle Items
              jariola

              Hi,

               

              Then I afraid it is bit hard, but not impossible. Unfortunately I do not know how do this without jQuery.

              You should somehow attach onchange event to shuttle buttons and both select element.

              With jQuery that would be easy.

               

              Regards,

              Jari

              • 4. Re: Count Selected Shuttle Items
                fac586

                GusC wrote:

                 

                Please have a look at my workspace

                 

                Workspace: GUSCRIGHTON

                Username: ANGUS.CRIGHTON@HAVILOG.COM

                Password: terminator

                Invalid login credentials.

                • 5. Re: Count Selected Shuttle Items
                  Tom Petrus

                  I was kind of hoping to capture the change event on the shuttle fieldset, but can't, for some reason. I'm too rusty in my js-fu. If that'd even work in 3.2, no clue.

                  Binding to the controls like Jari suggested works though.

                   

                  function setShuttleSelectedAmount(pShuttleId, pAmount){
                    var lAmount = document.getElementById(pShuttleId+"_RIGHT").children.length;
                    document.getElementById("P5_DESCRIPTION").value = lAmount;
                  };
                  
                  function attachShuttleEvents(pShuttleId){
                    document.getElementById(pShuttleId+"_RESET").addEventListener("click", function(){
                      setShuttleSelectedAmount(pShuttleId);
                    }, false);
                    document.getElementById(pShuttleId+"_MOVE").addEventListener("click", function(){
                      setShuttleSelectedAmount(pShuttleId);
                    }, false);
                    document.getElementById(pShuttleId+"_MOVE_ALL").addEventListener("click", function(){
                      setShuttleSelectedAmount(pShuttleId);
                    }, false);
                    document.getElementById(pShuttleId+"_REMOVE").addEventListener("click", function(){
                      setShuttleSelectedAmount(pShuttleId);
                    }, false);
                    document.getElementById(pShuttleId+"_REMOVE_ALL").addEventListener("click", function(){
                      setShuttleSelectedAmount(pShuttleId);
                    }, false);
                    document.getElementById(pShuttleId+"_LEFT").addEventListener("dblclick", function(){
                      setShuttleSelectedAmount(pShuttleId);
                    }, false);
                    document.getElementById(pShuttleId+"_RIGHT").addEventListener("dblclick", function(){
                      setShuttleSelectedAmount(pShuttleId);
                    }, false);
                  };
                  
                  attachShuttleEvents("P5_SHUTTLE");
                  
                  

                   

                  PS: I also want to mention that this may be browser dependant, especially for IE<9 where you would need to use attachEvent instead of addEventListener...

                   

                  Edit: maybe Paul knows more!

                  • 6. Re: Count Selected Shuttle Items
                    Gus C

                    I have reset my password

                     

                    terminator

                     

                    Gus

                    • 7. Re: Count Selected Shuttle Items
                      sect55

                      Gus,

                       

                      onclick= "function (){var len = document.getElementById('SHUTTLE_RIGHT id # ').length; s$ ('Pxx_shuttle_count',len'};}"

                       

                      will set  the number of items selected in the shuttle list if you change i "SHUTTLE_RIGHT id #"  to your shuttle item's right ID#  I believe.

                       

                      Robert

                       

                      • 8. Re: Count Selected Shuttle Items
                        Gus C

                        My items are called P11_SHUTTLE and P11_COUNT.

                        I inspected the shuttle in firebug and got P11_SHUTTLE_RIGHT

                         

                        I placed your code in the HTML Form Element Atrributes of  P11_SHUTTLE

                         

                        onclick= "function (){var len = document.getElementById('P11_SHUTTLE_RIGHT id # ').length; s$ ('P11_COUNT',len'};}"

                         

                        Unfortunately, when I move an item from the left of the shuttle to the right, nothing happens

                         

                        Gus

                        • 9. Re: Count Selected Shuttle Items
                          sect55

                          Gus,

                           

                          I will test it this morning and get back to you.

                           

                          Robert

                          • 10. Re: Count Selected Shuttle Items
                            sect55

                            Gus,

                             

                            I created a test application on APEX.ORACLE.COM. I know it is 4.2 but you can probably make some minor changes to make it work for 3.2. For example, place the javascript function in the page header.

                             

                            1. For page property, in the head:

                            <script>

                            function set_count()

                            {

                            var len = document.getElementById('P11_SHUTTLE_RIGHT').length;

                            $s ('P11_COUNT',len);

                            }

                            </script>

                             

                            2. In the HTML Form Element Attributes of P11_SHUTTLE_RIGHT, you enter onclick="set_count();"

                             

                            So when you click on the left portion of the shuttle item, you get the current count.

                             

                            The example is on APEX.ORACLE.COM instance;

                            Workspace: RGWORK

                            Application: 35078 Shuttle List Count

                            User: tester

                            Password: test123

                             

                             

                            Robert

                            http://apexjscss.blogspot.com

                            • 11. Re: Count Selected Shuttle Items
                              Gus C

                              Thank you very much

                               

                              Gus