Single Article

"Cascading" popup list on tabular form

Category APEX and jQuery

Here is how you can create cascading popup LOV on tabular form.

 

First create application item called G_POPUP_PARENT_VALUE

Application item attributes

 

Create application On Demand process called DUMMY and enter to process text:

htp.prn('OK');

Application process attributes

 

Add to page HTML header:

<style type="text/css">
.ui-autocomplete-loading{background: url("#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/images/ui-anim_basic_16x16.gif") no-repeat scroll right center transparent;}
</style>

 

Add to tabular form page JavaScript Function and Global Variable Declaration:

(function($){;
 /*** Cascading popup list ***/
 $.fn.htmldbCascadePopup=function(parent,tempItem,options){
 
  options=$.extend({
   loadingTxt    : "Loading ...",
   loadingCss    : {"width":"80px","float":"left"}
  },options);
  
  return this.each(function(i){
  
   var self=$(this);
   var anchor=self.next("a");
   var lParent=$(parent).eq(i);
   var lHref=anchor.attr("href").substr(11);
   var lPopupFn=new Function(lHref);

   /* Clear child when parent changes */
   lParent.change(function(){
    self.val("");
   });
   
   anchor.click(function(e){

    e.preventDefault();
    
    var lParentVal=$(lParent).val();
    if(!lParentVal){lParentVal="";};
   
    $.ajax({
     type:"POST",
     async:false,
     url:"wwv_flow.show",
     data:{
      p_flow_id:"&APP_ID.",
      p_flow_step_id:"&APP_PAGE_ID.",
      p_instance:"&APP_SESSION.",
      p_request:"APPLICATION_PROCESS=DUMMY",
      p_arg_names:tempItem,
      p_arg_values:lParentVal
     },beforeSend:function(){
      self
       .hide()
       .after($("<div/>",{"html":options.loadingTxt,"css":options.loadingCss,"class":"ui-autocomplete-loading"})
        .width(self.outerWidth())
        .height(self.outerHeight())
       );
     },complete:function(){
      lPopupFn();
      self
       .show()
       .next("div.ui-autocomplete-loading")
       .remove();
     }
    });
    
   });
  });
 };
})(apex.jQuery);

 

Next edit your tabular form popup LOV column List of values definition. In my example Employees form I have placed to Manager column List of values definition:

SELECT ename AS DIS,
  empno AS RET
FROM emp
WHERE deptno = :G_POPUP_PARENT_VALUE

 

List of values definition

Create dynamic Action. Select Advanced

  • Name: Set cascading Popup LOV after refresh and onload
  • Event: After Refresh
  • Selection Type: Region
  • Region: {select your report region}
  • Condition: No Condition
  • Action: Execute JavaScript code
  • Fire On Page Load: True
  • Code:
    $("[name=f01]").htmldbCascadePopup(
    "[name=f02]",
    "G_POPUP_PARENT_VALUE"
    );
    
  • Selection Type: None

 

In JavaScript code use popup LOV name attribute as jQuery selector and replace f01 according your popup LOV column input name. Other parameters are parent item jQuery selector and application item name.

 

Edit tabular form Add Row button and change action to "Defined by Dynamic Action".

 

Create another dynamic Action. Select Advanced

  • Name: Set cascading popup LOV for new row
  • Event: Click
  • Selection Type: Button
  • Button: {select your form add row button}
  • Condition: No Condition
  • Action: Execute JavaScript code
  • Fire On Page Load: False
  • Code:
    addRow();
    $("[name=f01]:last").htmldbCascadePopup(
    "[name=f02]:last",
    "G_POPUP_PARENT_VALUE"
    );
    
  • Selection Type: None

In second dynamic action JavaScript we call addRow function. Rest of code is same as fist dynamic action, except add jQuery :last selector. We need add last selector to get only added row. See example from above where add last selector.

 

See working example.

 

Sample is also available for download.

Comment Button

Comments

  • Jari Laine 23 Sep 2017  

    Hi lutfi,

    Could you please create example to apex.oracle.com and share developer login details to workspace.

    Regards,
    Jari

        
  • lutfi 23 Sep 2017  

    hi Jari

    Thank you for sharing

    i try to implement on apex 5.1.2 with modal page

    i got js error:

    Uncaught TypeError: Cannot read property 'substr' of undefined

        
  • Sohail 25 Feb 2017  

    Hi Jari,

    I am using Apex 4.6. I just tried your Cascading Popup example. Everything goes right except when I use different value for master select list in a new row, after submit the child popup LOV of previous rows displays the return value not display value. I use "Popup Key LOV" for child tabular item.

    Thank you,

    Sohail

        
  • Jojo4Joy 14 Dec 2016  

    Thankz Jerri,

    Can you tell me how can i pass 2 parameters

        
  • Matt B 8 Nov 2016  

    Thank you Jari. It sent me in the right direction. I changed this:

    $.fn.htmldbCascadePopup=function(parents,tempItems)

    ...to this:

    jQuery.fn.htmldbCascadePopup=function(parents,tempItems)

    It works fine now. I am nervous though that jQuery broke like that. I thought jQuery normally is very good about being backwards-compatible.

        
  • Jari Laine 6 Nov 2016  

    Hi Matt B,

    I think problem is that jQuery is loaded after funtion. Could you please check that? 

    Regards,
    Jari

        
  • Matt B 4 Nov 2016  

    Hi Jari...good solution and it's been working well for us in a few of our apps for a year or two now. However, I am migrating an app to Apex 5 (v5.0.4.00.12) and at runtime I'm getting this error:

    Uncaught TypeError: $(...).htmldbCascadePopup is not a function

    Ideas? Thanks!

        
  • Jari Laine 20 Sep 2016  

    Hi 77Vetter,

    Please create example about problem to apex.oracle.com and share developer login details to workspace.

    Regards,
    Jari

        
  • 77Vetter 20 Sep 2016  

    Thanks for the example, but I have a slightly different scenario where my parent list is a PopUp list and my child is a select list. I cant seem to get it to work under this scenario. I have looked at the source and I dont get a f0N for my popup item so it seems I am stuck? Any advice

        
  • Rui 4 Aug 2016  

    Sorry, my mistake.

    Now is working!!!

        

Global Right Column

Search

Archives

Subscribe in a Reader