AJAX Cascading LOVs in Oracle APEX.

1) Create a new application level item to hold a temp value of the selected item so it can be passed to application process.

P_SELECTLIST_REGION_NAME

under Shared Components > Application Items
This step is crucial otherwise it won’t work you will get null from returned get.get('XML');

2) Create an Application Process (on demand) under Shared Components > Application Processes :

BEGIN

   OWA_UTIL.mime_header ('text/xml', FALSE);
   HTP.p ('Cache-Control: no-cache');
   HTP.p ('Pragma: no-cache');
   OWA_UTIL.http_header_close;

   HTP.prn ('');
      FOR c IN (select cr.country_name as country
         from asap_country_region_v cr, lov_values region
         where cr.region = region.lov_value
         and cr.attr_type = 'Country'
         and cr.region = :P_SELECTLIST_REGION_NAME
         order by cr.country_name)
      LOOP
   HTP.prn ('' || c.country || '');
   END LOOP;
   HTP.prn ('');

END;

3) JavaScript:

function get_country_name(pThis, pSelect) {
   var l_Return = null;
   var l_Select = html_GetElement(pSelect);
   var get = new htmldb_Get(null, html_GetElement('pFlowId').value, 'APPLICATION_PROCESS=CASCADING_COUNTRY_SELECTLIST', 0);
   get.add('P_SELECTLIST_REGION_NAME', pThis.value);
   gReturn = get.get('XML');
   if(gReturn && l_Select) {
      var l_Count = gReturn.getElementsByTagName("option").length;
      l_Select.length = 0;
      for(var i = 0; i < l_Count; i++) {
         var l_Opt_Xml = gReturn.getElementsByTagName("option")[i];
         appendToSelect(l_Select, l_Opt_Xml.getAttribute('value'), l_Opt_Xml.firstChild.nodeValue)}
      }
   get = null;
   }

function appendToSelect(pSelect, pValue, pContent) {
    var l_Opt = document.createElement("option");
    l_Opt.value = pValue;
    if(document.all){
        pSelect.options.add(l_Opt);
        l_Opt.innerText = pContent;
     }else{
        l_Opt.appendChild(document.createTextNode(pContent));
        pSelect.appendChild(l_Opt);
    }

}

4) Add to “HTML Form Element Attributes” of the first level item:

onchange = "get_country_name(this,P1_Country)"

Advertisement