AJAX – The Simplest Example

It is quite easy to implement AJAX in APEX (Thanks to Carl Backstrom for a clear and conscience document). Here is a sample AJAX code to show how easy it is to use AJAX in APEX application.

The aim of my code was to select PRODUCT_NAME from Select list and populate the textarea with PRODUCT_DESCRIPTION without reloading the page. Here is what I did.

1. Created a select list P1_PRODUCT_NAME and a textarea P1_PRODUCT_DESCRIPTION.

2. In the HTML Form Element Attribute of select list I entered

onchange="getDescription( this , 'P1_PRODUCT_DESCRIPTION')"

3. In the HTML Page Header I entered the javascript which will call the ondemand process.

<script type="text/javascript">
function getDescription( pThis , pDescription)
{
   var ajaxRequest = new htmldb_Get( 'P1_PRODUCT_DESCRIPTION' , &APP_ID. , 'APPLICATION_PROCESS=getDescription' , 0);
   ajaxRequest.add( 'P1_PRODUCT_NAME' , pThis.value);
   var ajaxResult = ajaxRequest.get(); 
}
</script>

4. Last step is to create a ondemand process. For this go to shared component -> Click on Application process and
create a new application process getDescription

declare
   prod_desc varchar2(2000);
   id number;
begin
   id := : P1_PRODUCT_NAME;
   select PRODUCT_DESCRIPTION into prod_desc from DEMO_PRODUCT_INFO
   where PRODUCT_ID = id;
   htp.prn( prod_desc );
end;

Here is the example
E X A M P L E