6 Replies Latest reply: Mar 18, 2014 11:32 AM by Tom Petrus RSS

    Update Tabular form column from popup LOV with dynamic action

    HarryF

      I am trying to update a column in a tabular form based on a change to a LOV column in that tabular form. It is not just id/description, I need another column.

       

      I can get the change event to fire, it is the javascript to change the field value I cannot get to work. I tried a number of forum solutions but could not get them to work. The LOV field is F07, the field being updated based on a query if F05.

       

      I tried this technique but could not get past "closest", which did not work.

       

      var row, priceelement, testelement,getpriceajax,price; 

      testelement = apex.jquery('#'+this.triggeringElement.id); 

      row = testelement.closest('tr');

      priceelement = row.find('[name="PRICE"]'); 

      getpriceajax  = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=get_price',$v('pFlowStepId'));

      getpriceajax.addParam('x01',$V(this.triggeringElement.id)); 

      price = getpriceajax.get();

      priceelement.text(price);

       

      I tried this kind of reference which did not work:

       

      $("td[headers='SAL'] input:visible:eq(2)")

        • 1. Re: Update Tabular form column from popup LOV with dynamic action
          Tom Petrus

          There is quite a difference between these 2 selectors:

          row.find('[name="PRICE"]');

          $("td[headers='SAL'] input:visible:eq(2)")

           

          The first one will attempt to find any element which has an attribute name with value PRICE on the row.

          The second one selects all table cells with attribute headers set to SAL, and then in those visible inputs, and of those the one at index 2 (which would equal the 3rd element...)

           

          If you know your target element is in array f05, then select the element with what you know. Setting up selectors for these kind of actions do require some knowledge of html and how to use dev tools to inspect your html. Don't make assumptions about arrays if you're not sure. Rather inspect the elements in the generated html. You could select by header, but not always. For instance, a hidden item will not have a column, it will be concatenated to the item in the last column (in a wizard tabform).

          row.find("input[name=f05]")

          or if you want by header:

          row.find("td[headers='PRICE'] input:visible")

          I use :visible here to make sure to only target the visible input. There could be concatenated hidden inputs for all you know. That's the deal with selecting an element in a broad sense here. The rule should be: if you can be more specific, do so.

          • 2. Re: Update Tabular form column from popup LOV with dynamic action
            Denes Kubicek

            This example will show you how you could do that:

             

            https://apex.oracle.com/pls/apex/f?p=31517:294

             

            Denes Kubicek

             

            -------------------------------------------------------------------

             

             

            -------------------------------------------------------------------

            • 3. Re: Update Tabular form column from popup LOV with dynamic action
              HarryF

              Thanks Tom but I cannot even get this to work:

               

              row = testelement.closest('tr');

              • 4. Re: Update Tabular form column from popup LOV with dynamic action
                Tom Petrus

                testelement = apex.jquery('#'+this.triggeringElement.id);

                 

                suggests you run this in a dynamic action. You're probably not. Where do you run this code?

                If you set up an example on apex.oracle.com we can take a look at your setup and help you out far better than me/us guessing what and where you have done what.

                 

                Further on, and no disrespect is meant, but please try to take some time to understand what you copy paste from the net. Far, far too often I see code which people have simply copy+pasted without even trying to understand what they've done, just that they've done it ("something"). That doesn't help anyone, least yourself. In this case it is the things such as inspecting html, understanding how arrays are assigned and how they are represented, things like just looking something up in the jquery api, using (or rather, not) htmldb_Get. People like and want to use javascirpt, but the less they understand the better it sometimes seems. We or I can solve your problem, but it should be you that is learning something of and in the experience. [/lecture]

                • 5. Re: Update Tabular form column from popup LOV with dynamic action
                  HarryF

                  Point taken. It is difficult when searching to know which technique is preferred. I know I can get the row number by sub-stringing the field name but know there is a more elegant way. Its hard to know which way is best to do a particular task and sometimes there are solutions that obviously did not work and cases where the work is probably in a project created to get help and that account is disconnected and the code not available. I know for example there are ways to get Oracle data in DA and was going to look at replaced htmldb_Get but wanted to get the field referencing working.

                   

                  And once I get it all figured out I am sure 5.x will replace tabular forms and come up with something simple and elegant.

                   

                  I created an account APEX_HELPER/APEX_HELPER in HARRY_WS. The project is Tabular Form if you have time.

                  • 6. Re: Update Tabular form column from popup LOV with dynamic action
                    Tom Petrus

                    var row

                      , bliId

                      , bliNbr

                      , getBliNbr;

                     

                    bliId = apex.jQuery(this.triggeringElement);

                    console.log(bliId);

                    row = bliId.closest('tr');

                    console.log(row);

                    bliNbr = row.find('input[name=f05]');

                    getBliNbr = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=GET_BLI_NBR',$v('pFlowStepId'));

                    getBliNbr.addParam('x01',$v(this.triggeringElement.id));

                     

                    var ajaxResult = getBliNbr.get();

                    alert(ajaxResult);

                    bliNbr.val(ajaxResult);

                     

                    1/ testelement = apex.jquery('#'+this.triggeringElement.id);

                    unnecessary as you already have a reference to this item with this.triggeringElement. Effectively you're taking the ID of it, and re-get it.

                    2/ bliNbr = row.find('input[name=f05]');

                    In your sample code the element is f05 and not 6

                    3/ var ajaxResult = getBliNbr.get();

                    do the get() only once. If you call this multiple times then the call will also be done multiple times. Because get() is synchronous it also means it will lock the browser up, and thus multiple calls cause longer periods of unresponsiveness.

                     

                    I've also made an apex.server.process example, which is currently in your demo application. You can find documentation on it here: JavaScript APIs

                     

                    var row

                      , bliId

                      , bliNbr

                      , getBliNbr;

                     

                    bliId = apex.jQuery(this.triggeringElement);

                    console.log(bliId);

                    row = bliId.closest('tr');

                    console.log(row);

                    bliNbr = row.find('input[name=f05]');

                    /*

                    getBliNbr = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=GET_BLI_NBR',$v('pFlowStepId'));

                    getBliNbr.addParam('x01',$v(this.triggeringElement.id));

                     

                    var ajaxResult = getBliNbr.get();

                    alert(ajaxResult);

                    bliNbr.val(ajaxResult);

                    */

                    apex.server.process("GET_BLI_NBR",

                                        {"x01":$v(this.triggeringElement.id)},

                                        {dataType: "text", success: function(pData){

                                           alert("complete: " + pData);

                                           bliNbr.val(pData);

                                        }});