Ajax code help for conditional select list.

Question

Hi,
I am using AJAX code for the first time, I dont have knowledge in java, I just grabbed the code from this forum and trying to manipulate to my requirement.
My Requirement is I have two select lists, 1) host_name and 2) database_name.
As soon as I pick/choose the value in host_name select list, I need to populate only those databases on that particular host. I dont want to submit the page for this action.
Here is the code, I appreciate if some one can help.
On demand Application Process code:
declare
l_counter number;
l_o_name varchar2(2000);
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>');
for rec in (select "ORA_DATABASES_VW"."DATABASE_NAME" as "DATABASE_NAME",
     "ORA_DATABASES_VW"."DB_ID" as "DB_ID"
from "ORA_DATABASES_VW"
where "ORA_DATABASES_VW"."HOST_NAME" = :TEMP_ITEM)
loop
htp.prn('<option value="' || rec.db_id || '">' || rec.database_name || '</option>');
end loop;
htp.prn('</select>');
end;
HTML Header on that page:
=================
<script language="JavaScript1.1" type="text/javascript">
function get_List_XML (source_item,target_item){   
var v_Target = html_GetElement(target_item);
var v_Source = html_GetElement(source_item);
var ajaxResult = new htmldb_Get(null,&APP_ID.,'APPLICATION_PROCESS=POPULATE_LIST_XML',0);
ajaxResult.add('TEMP_ITEM',source_item.value);
var v_result_xml = ajaxResult.get('XML');
if(v_result_xml && v_Target)
var options_Contents = v_result_xml.getElementsByTagName("option");
v_Count = options_Contents.length;
v_Target.length = 0;
for(var i=0;i<v_Count;i++)
var v_opt_xml = v_result_xml.getElementsByTagName("option");
appendToSelect(v_Target, v_opt_xml.getAttribute ('value'),v_opt_xml.firstChild.nodeValue)
function appendToSelect(target_item, option_val, option_content) {  
var v_Opt = document.createElement("option");
v_Opt.option_value = option_val;
if(document.all){
target_item.options.add(v_Opt);
v_Opt.innerText = option_content;
}else{  
v_Opt.appendChild(document.createTextNode(option_content));
target_item.appendChild(v_Opt);
</script>
Form element attribute in the host_name column. P935_INSTANCE_DB_NAME is my page item for database_name.
onchange="get_List_XML (this,'P935_INSTANCE_DB_NAME')"

Answer 1

Here is the code, Hope I had put it correctly now.
This is fixed now. Thanks a lot for helping out this. I have two questions.
1) I am seeing very slowness when selecting the select list. Will these java code require much resource?
2) I need to put this logic in many screens for many columns. So having these many application process and application items and java code, will the application performance get a hit? I know that application process are on-demand and get called only when required.
declare
l_counter number;
l_o_name varchar2(2000);
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>');
for rec in (select "ORA_DATABASES_VW"."DATABASE_NAME" as "DATABASE_NAME",
"ORA_DATABASES_VW"."DB_ID" as "DB_ID"
from "ORA_DATABASES_VW"
where "ORA_DATABASES_VW"."HOST_NAME" = :TEMP_ITEM)
loop
htp.prn('<option value="' || rec.db_id || '">' || rec.database_name || '</option>');
end loop;
htp.prn('</select>');
end;
HTML Header on that page:
=================
<script language="JavaScript1.1" type="text/javascript">
function get_List_XML (source_item,target_item){
var v_Target = html_GetElement(target_item);
var v_Source = html_GetElement(source_item);
var ajaxResult = new htmldb_Get(null,&APP_ID.,'APPLICATION_PROCESS=POPULATE_LIST_XML',0);
ajaxResult.add('TEMP_ITEM',source_item.value);
var v_result_xml = ajaxResult.get('XML');
if(v_result_xml && v_Target)
var options_Contents = v_result_xml.getElementsByTagName("option");
v_Count = options_Contents.length;
v_Target.length = 0;
for(var i=0;i<v_Count;i++)
var v_opt_xml = v_result_xml.getElementsByTagName("option");
appendToSelect(v_Target, v_opt_xml.getAttribute ('value'),v_opt_xml.firstChild.nodeValue)
function appendToSelect(target_item, option_val, option_content) {
var v_Opt = document.createElement("option");
v_Opt.option_value = option_val;
if(document.all){
target_item.options.add(v_Opt);
v_Opt.innerText = option_content;
}else{
v_Opt.appendChild(document.createTextNode(option_content));
target_item.appendChild(v_Opt);
</script>
Form element attribute in the host_name column. P935_INSTANCE_DB_NAME is my page item for database_name.
onchange="get_List_XML (this,'P935_INSTANCE_DB_NAME')"
}