10 Replies Latest reply: Feb 23, 2011 3:30 AM by 726115 RSS

    Dynamic Tabular Form sum two columns in another

    newenrba
      Hi all
      i am new with apex, and i got one problem i think its simple but i cant do it :)
      problem is next, i have tabular form with 3 column i need dynamic action on change value of two columns to sum them in 3th one.
      So i can be able add 5 rows calculate columns of row and submit them.
      X Y Z
      1 2 3
      2 2 4
      5 5 10
      submit

      Thank yor on you time
        • 1. Re: Dynamic Tabular Form sum two columns in another
          vee
          Check this thread Calculated Column on Tabular Form. The same problem is discussed there.
          • 2. Re: Dynamic Tabular Form sum two columns in another
            newenrba
            ok i found that my code shoul look like

            $('input[name=f10],input[name=f08]').change( function(){
            parent_row = $(this).parents('tr:first');
            a1 = ( parent_row.find('input[name=f08]').val() == ' ') ? 0 : parseFloat(parent_row.find('input[name=f08]').val() );
            a2 = ( parent_row.find('input[name=f10]').val() == ' ') ? 0 : parseFloat(parent_row.find('input[name=f10]').val() );
            a3 = a1 + a2;
            parent_row.find('input[name=f10]').val(a3);
            });

            but where are trigger this action
            do i create dynamic action or i trigger it from another point

            thank you
            • 3. Re: Dynamic Tabular Form sum two columns in another
              vee
              That code you pasted already has the code which binds to the change event, So you can add that to the "execute on page load" section of your page.
              • 4. Re: Dynamic Tabular Form sum two columns in another
                726115
                Vee, I am trying to do the same and have tried implementing the solution. I'm confused where should i paste the following code.

                $('input[name=f05],input[name=f06]').change( function(){
                parent_row = $(this).parents('tr:first');
                sal = ( parent_row.find('input[name=f05]').val() == ' ') ? 0 : parseFloat(parent_row.find('input[name=f05]').val() );
                comm = ( parent_row.find('input[name=f06]').val() == ' ') ? 0 : parseFloat(parent_row.find('input[name=f06]').val() );
                total = sal + comm;
                parent_row.find('input[name=f10]').val(total);
                });

                I understand this is a javascript code, but where do i set it to trigger. I am a newbie to APEX. Should it be an 'on-demand process' executed 'on load before/after header'?

                Thanks!

                Edited by: rizvi on Feb 22, 2011 2:29 AM
                • 5. Re: Dynamic Tabular Form sum two columns in another
                  vee
                  No,

                  If you observe the first line of the code, you can notice the "$('input[name=f05],input[name=f06]').change( function()" .

                  This is a kind of a "trigger"(called event binding) in Javascript, and fires when the "change" event occurs for any of the items matching the jQuery selector ( $('input[name=f05],input[name=f06]') )

                  So all you have to do is make sure that the code runs on load of the page and hence the event ation is registered. The easiest way to do this in apex 4.0 is to add it to the "execute when page load" section_ of the page(Page properties -> javascript Section)
                  • 6. Re: Dynamic Tabular Form sum two columns in another
                    726115
                    sorry Vee, I am on APEX 3.2. Is there a possibility of doing the same in the version I am running.

                    Edited by: rizvi on Feb 22, 2011 2:50 AM
                    • 7. Re: Dynamic Tabular Form sum two columns in another
                      vee
                      That JS code uses the jQuery library which is built into apex 4.0. Do u have that loaded it in to your application(you have to add the Jquery library file to the page header/template manually) ?
                      • 8. Re: Dynamic Tabular Form sum two columns in another
                        726115
                        Sorry for the late reply Vee,

                        I've downloaded and attached the JQuery library file into the page html header region.
                        The code for calculating sum is also pasted there under function f_tot_Sal(). I am calling the function on onBlur event on sal column, but still total salary column doesn't get updated with the result.
                        • 9. Re: Dynamic Tabular Form sum two columns in another
                          vee
                          with that code you don't need to add onblur events to the dependent items, the event hook aswell as the action can be defined in one place.

                          Start with the following code (add it to the page header as if it was a normal function definition)
                          <script>
                          $(document).ready( function(){
                            $('input[name=f05],input[name=f06]').change( function(){
                               alert('changed');
                            });
                          });
                          </script>
                          You should see that alert message every time fields f05 or f06 change.

                          If that works fine then add the rest of the code and check.
                          • 10. Re: Dynamic Tabular Form sum two columns in another
                            726115
                            Thanks Vee. Got it Now!
                            Appreciate your assistance! Full marks to you