Cascading Select Lists - Not Working for me

Question

I am trying to implement Denes Kubicek's Ajax Cascading Select List solution.
http://apex.oracle.com/pls/otn/f?p=31517:119
But it is not working for me.
I'm a newbie to APEX and checked the forum for advice on cascading select lists. I saw the thread for
"Cascading Select Lists - Not Working" posted by sue and the replies by Varad Acharya, but I'm still
having issues of not seeing the alerts, not able to run the pl/sql process in SQL Workshop, and not
getting the expected results.
I have a list of countries (US - USA, CA - CANADA, etc.) and a list of states for each country. When a
user selects a country I would like to show the list of states within that country.
This is what I've done so far:
Defined an application process:
Process Point: On Demand: Run ... by a page process.
Name: CASCADING_SELECT_LIST1
Process Text:
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 ('<select>');
HTP.prn ('<option value="' || 99 || '">' || '- All States -'
|| '</option>'
FOR c IN (SELECT state_code || ' - ' || state_desc d, state_code r
FROM tbk_state
WHERE country_code = :cascading_selectlist_item_1)
LOOP
HTP.prn ('<option value="' || c.r || '">' || c.d || '</option>');
END LOOP;
HTP.prn ('</select>');
END;
defined and application item:
Name: CASCADING_SELECTLIST_ITEM_1
Build Option: - No Build Option -
Created a 'Form on a table with report' as follows:
Page 5: Report on TBK_HARDWARE_LOCATION
Page 6: Form on TBK_HARDWARE_LOCATION
in HTML Header of the page attributes for 'Form on TBK_HARDWARE_LOCATION' I have:
<script language="JavaScript" type="text/javascript">
<!--
htmldb_delete_message='"DELETE_CONFIRM_MSG"';
//-->
</script>
<script>
function get_select_list_xml1(pThis,pSelect){
var l_Return = null;
var l_Select = html_GetElement(pSelect);
alert ('Dept no=' + pThis.value);
var get = new htmldb_Get(null,html_GetElement('pFlowId').value,
'APPLICATION_PROCESS=CASCADING_SELECT_LIST1',0);
get.add('CASCADING_SELECTLIST_ITEM_1',pThis.value);
gReturn = get.get('XML');
// gReturn = get.get();
alert('Enames=' + gReturn);
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");
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);
</script>
On Page 6: 'Form on TBK_HARDWARE_LOCATION' I have the following items (plus some others):
Name: P6_COUNTRY_CODE
Display as: Select List
HTML Form Element Attributes: onchange="get_select_list_xml1(this,'P6_STATE_CODE');"
Source Used: Only when current value in session state is null
Source Type: Database Column
maintain session state: Per session
Source value or expression: COUNTRY_CODE
Named LOV: LIST OF COUNTRIES
Name: P6_STATE_CODE
Display as: Select List
Source Used: Only when current value in session state is null
Source Type: Database Column
maintain session state: Per session
Source value or expression: STATE_CODE
Named LOV: - Select named LOV -
List of Values definition:
     select state_code || ' - ' || state_desc d, state_code r
     from tbk_state
     where country_code = :P6_COUNTRY_CODE
     order by 1
LIST OF COUNTRIES is defined as:
select country_code || ' - ' || country_desc d, country_code r
from tbk_country
order by 1
Now to the problem:
I run page 5 (the report) to see the list of locations and then I try to edit a record (page 6). When I
try to select a different country I get the following error (on IE):
"Problems with this web page might prevent it from being displayed properly or functioning properly.
In the future, you can display this message by double-clicking the warning icon displayed in the status
bar.
Line: 17
Char: 5
Error: Object expected
Code: 0
URL: http//cmrac4.cm.timeinc.com:7777/pls/htmldb/f?
p=114:6:1413254636072443110::::P6_HARDWARE_LOCATION_ID:2
I don't see any of the alert messages.
I also tried to run the application process code in the SQL - Command Processor (I replaced
:cascading_selectlist_item_1 with 'CA' or 'US') and got the following:
The XML page cannot be displayed
Cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh
button, or try again later.
Only one top level element is allowed in an XML document. Error processing resource
'http://cmrac4.cm.timeinc.com:7777/pls/...
<select><option value="99">- All States -</option><option value="X1">X1 - X1</option><optio...
Can someone help me please?

Answer 1

Varad,
First, thank you for taking the time to try to help me with this problem.
When I view the page's source code (here are the first few lines):
<html lang="en-us">
<head>
<script src="/i/javascript/core.js" type="text/javascript"></script>
<link rel="stylesheet" href="/i/css/core.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
<!--
htmldb_delete_message='Would you like to perform this delete action?';
//-->
</script>
<script>
function get_select_list_xml1(pThis,pSelect){
var l_Return = null;
var l_Select = html_GetElement(pSelect);
//alert ('Dept no=' + pThis.value);
var get = new htmldb_Get(null,html_GetElement('pFlowId').value,
'APPLICATION_PROCESS=CASCADING_SELECT_LIST1',0);
get.add('CASCADING_SELECTLIST_ITEM_1',pThis.value);
gReturn = get.get('XML');
// gReturn = get.get();
//alert('Enames=' + gReturn);
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");
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);
</script>
It looks like line 17 is:
var l_Select = html_GetElement(pSelect);
I'm still not sure why I'm getting this error and why it's not working?
Thanks,
Eti