Using AJAX to load city, state, metro area based on zip code

Question

I'm new to getting APEX to work with AJAX properly. I've been reading some tutorials and trying to apply what they do to my situation, but I'm running into a problem. I have a text field item for zip code. What I want to happen is that when someone enters in a zip code, I want to use AJAX to populate 3 different select lists (1 each for state, city, and metro area) and to populate a checkbox (of neighborhoods based on the zip code as well). I'm looking at the examples in:
http://www.oraclealchemist.com/wp-content/uploads/2006/11/s281946.pdf
and
http://apex.oracle.com/pls/otn/f?p=11933:63
But they all use examples where the value of a text field item is used to populate 1 select list. I can't figure out how to apply that methodology to populate 3 select lists and 1 checkbox item. I've got all my SELECT statements written to populate these fields based on the value of the zip code text field item, but don't know how to convert what I already have to use AJAX.
Here are my SELECT statements:
P2805_STATE lov:
===========================================================================================
SELECT INITCAP(GEO_DATA_STATE.STATEFULLNAME) d,GEO_DATA_STATE.STATE v
FROM GEO_DATA_STATE, GEO_DATA_ZIP
WHERE isPrimary = 'P' and
trim(upper(GEO_DATA_ZIP.STATE)) = trim(upper(GEO_DATA_STATE.STATE)) and
GEO_DATA_ZIP.ZIPCODE = :P2805_ZIPCODE
ORDER BY STATEFULLNAME
P2805_CITY lov:
===========================================================================================
SELECT UNIQUE (INITCAP(GEO_DATA_CITY.CITY)) d,GEO_DATA_CITY.CITY v
FROM GEO_DATA_STATE, GEO_DATA_ZIP, GEO_DATA_CITY
WHERE
trim(upper(GEO_DATA_ZIP.STATE)) = trim(upper(GEO_DATA_STATE.STATE)) and
trim(upper(GEO_DATA_ZIP.CITY)) = trim(upper(GEO_DATA_CITY.CITY)) and
GEO_DATA_ZIP.ZIPCODE = :P2805_ZIPCODE
ORDER BY GEO_DATA_CITY.CITY
P2805_METRO_AREA lov:
===========================================================================================
SELECT UNIQUE (INITCAP(GEO_DATA_METRO.METRO_AREA)) d,GEO_DATA_METRO.CODE v
FROM GEO_DATA_STATE, GEO_DATA_ZIP, GEO_DATA_METRO
WHERE
trim(upper(GEO_DATA_ZIP.STATE)) = trim(upper(GEO_DATA_STATE.STATE)) and
trim(upper(GEO_DATA_ZIP.METROCODE)) = trim(upper(GEO_DATA_METRO.CODE)) and
GEO_DATA_ZIP.ZIPCODE = :P2805_ZIPCODE
ORDER BY 1
P2805_NEIGHBORHOOD lov:
===========================================================================================
SELECT UNIQUE (INITCAP(GEO_DATA_HOOD.HOOD)) d,GEO_DATA_HOOD.HOOD v
FROM GEO_DATA_STATE, GEO_DATA_ZIP, GEO_DATA_METRO, GEO_DATA_HOOD
WHERE
trim(upper(GEO_DATA_ZIP.STATE)) = trim(upper(GEO_DATA_STATE.STATE)) and
trim(upper(GEO_DATA_ZIP.METROCODE)) = trim(upper(GEO_DATA_METRO.CODE)) and
GEO_DATA_HOOD.METRO_CODE = GEO_DATA_METRO.CODE and
GEO_DATA_ZIP.ZIPCODE = :P2805_ZIPCODE
ORDER BY 1Do all these statements need to go in 1 on-demand process? Where do I go from here?

Answer 1

Andy, cool. This is starting to make more sense. THANKS A BUNCH! OK. I've gone ahead and modified the on demand process to suit my needs, so I have:
begin
  owa_util.mime_header('text/xml', FALSE );
  htp.p('Cache-Control: no-cache');
  htp.p('Pragma: no-cache');
  owa_util.http_header_close;
  -- Building States list
  htp.prn('<SELECT>');
  FOR i in (
    SELECT INITCAP(GEO_DATA_STATE.STATEFULLNAME) d, GEO_DATA_STATE.STATE v
    FROM GEO_DATA_STATE, GEO_DATA_ZIP
    WHERE isPrimary = 'P' and
    trim(upper(GEO_DATA_ZIP.STATE)) = trim(upper(GEO_DATA_STATE.STATE)) and
    GEO_DATA_ZIP.ZIPCODE = :P2805_ZIPCODE
    ORDER BY STATEFULLNAME
  LOOP
    htp.prn('<OPTION VALUE=''' || i.v || '''>' || i.d || '</OPTION>');
  END LOOP;
  htp.prn('</SELECT>');
  -- Building Cities list
  htp.prn('<SELECT>');
  FOR i in (
    SELECT UNIQUE (INITCAP(GEO_DATA_CITY.CITY)) d, GEO_DATA_CITY.CITY v
    FROM GEO_DATA_STATE, GEO_DATA_ZIP, GEO_DATA_CITY
    WHERE
    trim(upper(GEO_DATA_ZIP.STATE)) = trim(upper(GEO_DATA_STATE.STATE)) and
    trim(upper(GEO_DATA_ZIP.CITY)) = trim(upper(GEO_DATA_CITY.CITY)) and
    GEO_DATA_ZIP.ZIPCODE = :P2805_ZIPCODE
    ORDER BY GEO_DATA_CITY.CITY
  LOOP
    htp.prn('<OPTION VALUE=''' || i.v || '''>' || i.d || '</OPTION>');
  END LOOP;
  htp.prn('</SELECT>');
  -- Building Metro Area list
  htp.prn('<SELECT>');
  FOR i in (
    SELECT UNIQUE (INITCAP(GEO_DATA_METRO.METRO_AREA)) d, GEO_DATA_METRO.CODE v
    FROM GEO_DATA_STATE, GEO_DATA_ZIP, GEO_DATA_METRO
    WHERE
    trim(upper(GEO_DATA_ZIP.STATE)) = trim(upper(GEO_DATA_STATE.STATE)) and
    trim(upper(GEO_DATA_ZIP.METROCODE)) = trim(upper(GEO_DATA_METRO.CODE)) and
    GEO_DATA_ZIP.ZIPCODE = :P2805_ZIPCODE
    ORDER BY 1
  LOOP
    htp.prn('<OPTION VALUE=''' || i.v || '''>' || i.d || '</OPTION>');
  END LOOP;
  htp.prn('</SELECT>');
  -- Building Neighborhood list
  htp.prn('<SELECT>');
  FOR i in (
    SELECT UNIQUE (INITCAP(GEO_DATA_HOOD.HOOD)) d, GEO_DATA_HOOD.HOOD v
    FROM GEO_DATA_STATE, GEO_DATA_ZIP, GEO_DATA_METRO, GEO_DATA_HOOD
    WHERE
    trim(upper(GEO_DATA_ZIP.STATE)) = trim(upper(GEO_DATA_STATE.STATE)) and
    trim(upper(GEO_DATA_ZIP.METROCODE)) = trim(upper(GEO_DATA_METRO.CODE)) and
    GEO_DATA_HOOD.METRO_CODE = GEO_DATA_METRO.CODE and
    GEO_DATA_ZIP.ZIPCODE = :P2805_ZIPCODE
    ORDER BY 1
  LOOP
    htp.prn('<OPTION VALUE=''' || i.v || '''>' || i.d || '</OPTION>');
  END LOOP;
  htp.prn('</SELECT>');
end;It doesn't look like I would have to modify the appendToSelect function at all, correct? Is the checkbox that I need to populate handled the same way as these select lists? And it seems like I only need to make the 2 changes that you mentioned to get_AJAX_SELECT_XML function, right? So my javascript function should be like:
<script language="JavaScript1.1" type="text/javascript">
function get_AJAX_SELECT_XML(pThis,pSelect1,pSelect2,pSelect3,pSelect4){
if  (document.getElementById('P2805_ZIPCODE').value.length == 5)
     var l_Return = null;
     var l_Select1 = $x(pSelect1);
     var l_Select2 = $x(pSelect2);
     var l_Select3 = $x(pSelect3);
     var l_Select4 = $x(pSelect4);
     var get = new htmldb_Get(null,$x('pFlowId').value,'APPLICATION_PROCESS=otn_Select_XML',0);
     get.add('TEMPORARY_ITEM',pThis.value);
     gReturn = get.get('XML');
     var sels = gReturn.getElementsByTagName("select");
     if(gReturn && l_Select1){
          var l_Count = sels[0].getElementsByTagName("option").length;
          l_Select1.length = 0;
          for(var i=0;i<l_Count;i++){
               var l_Opt_Xml = sels[0].getElementsByTagName("option");
               appendToSelect(l_Select1, l_Opt_Xml.getAttribute('value'), l_Opt_Xml.firstChild.nodeValue)
     if(gReturn && l_Select2){
          var l_Count = sels[1].getElementsByTagName("option").length;
          l_Select2.length = 0;
          for(var i=0;i<l_Count;i++){
               var l_Opt_Xml = sels[1].getElementsByTagName("option")[i];
               appendToSelect(l_Select2, l_Opt_Xml.getAttribute('value'), l_Opt_Xml.firstChild.nodeValue)
     if(gReturn && l_Select3){
          var l_Count = sels[2].getElementsByTagName("option").length;
          l_Select3.length = 0;
          for(var i=0;i<l_Count;i++){
               var l_Opt_Xml = sels[2].getElementsByTagName("option")[i];
               appendToSelect(l_Select3, l_Opt_Xml.getAttribute('value'), l_Opt_Xml.firstChild.nodeValue)
     if(gReturn && l_Select4){
          var l_Count = sels[3].getElementsByTagName("option").length;
          l_Select4.length = 0;
          for(var i=0;i<l_Count;i++){
               var l_Opt_Xml = sels[3].getElementsByTagName("option")[i];
               appendToSelect(l_Select4, l_Opt_Xml.getAttribute('value'), l_Opt_Xml.firstChild.nodeValue)
     get = null;
&lt;/script&gt;
And then since all 4 items (3 select lists and 1 checkbox item) are populated based on the value inputted in the text field item, I would only need to add the following to the html form element attribute of my text field item, right?
onKeyUp="javascript:get_AJAX_SELECT_XML(this,'P2805_STATE','P2805_CITY','P2805_METRO_AREA','P2805_NEIGHBORHOOD');"Denes, thanks for the example. It seems like what I need to do is somewhere inbetween what you have and what's in the example on http://apex.oracle.com/pls/otn/f?p=11933:37. I have 3 select lists and 1 checkbox item that should all be populate depending on the value entered for the text item. Do I still need to split everything up then into a function and an on demand process for each select list and checkbox?