Skip to main content

Command Palette

Search for a command to run...

Oracle Apex Ajax Callback Simple Example.

Updated
3 min read
Oracle Apex Ajax Callback Simple Example.
W
Building with ❤️ in Oracle APEX and PL/SQL Apps. I sit at the intersection of robust backend development and creative front-end design. When I'm not shipping apps, you’ll find me enjoying life, staying active, and following the technology trends.

1- The Full Flow of the Example


What apex_json Does in Oracle APEX apex_json is a built-in Oracle APEX package that builds and sends a JSON response back to the browser during an AJAX call.

JavaScript calls AJAX
        ↓
PL/SQL runs & builds JSON using apex_json
        ↓
JSON response sent back to browser
        ↓
JavaScript reads the result

Your Complete Working Example

PL/SQL Process (AJAX Callback):

declare
    v_ename varchar2(100);
    v_sal   number;
begin
    select ename, sal
    into   v_ename, v_sal
    from   emp
    where  empno = apex_application.g_x01;

    apex_json.open_object;
    apex_json.write('ename', v_ename);
    apex_json.write('sal',   v_sal);
    apex_json.close_object;
end;

JavaScript (Dynamic Action):

apex.server.process('GET_EMP_DATA', {
    x01: apex.item('P15_EMPNO').getValue()
}, {
    success: function(data) {
        apex.item('P15_ENAME').setValue(data.ename);
        apex.item('P15_SAL').setValue(data.sal);
    }
});

Key Methods for Setting Items

Method Purpose
apex.item('P15_X').setValue(data.x) Set a text/number item
apex.item('P15_X').getValue() Read an item value
$s('P15_X', data.x) Shorthand for setValue
$v('P15_X') Shorthand for getValue

Visual Result

No page refresh! 🚀

Code Execution Flow



User selects EMPNO (e.g. 7369)
        ↓
JavaScript sends AJAX request with x01 = 7369
        ↓
PL/SQL fetches from DB → builds JSON:
   { "ename": "SCOTT", "sal": 3000 }
        ↓
JSON returned to browser (data object)
        ↓
data.ename → set into P15_ENAME item
data.sal   → set into P15_SAL item
        ↓
Page items update WITHOUT page refresh
in other word

User enters EMPNO = 7369
        ↓
x01: apex.item('P15_EMPNO').getValue()
     ↑
     This CAPTURES 7369 and SENDS it to server
        ↓
Server receives it as apex_application.g_x01 = 7369
        ↓
SELECT WHERE empno = 7369

Tip: x01 in JavaScript IS apex_application.g_x01 in PL/SQL. One cannot work without the other.They Are Directly Connected — You MUST Send It!

Why due too this 2 reasons:

1-x01: is know in apex to sent HTTP request using JS APEX pre-defined a fixed set of reserved parameter

x01 → g_x01    (varchar2)
x02 → g_x02    (varchar2)
x03 → g_x03    (varchar2)
...up to...
x10 → g_x10    (varchar2)

n01 → g_n01    (number)
n02 → g_n02    (number)

f01 → g_f01    (array)
f02 → g_f02    (array)

APEX only listens for these exact names in the POST body. Anything else is ignored! Regards.........

2-apex_application.g_x01: is where APEX stores that key after receiving it is a preserved parameter in Apex pl/sql

It is exactly like:
POST request body: { x01: 7369 }
APEX reads it and puts it into g_x01
📱 You (JavaScript)      📬 HTTP Request       Server(PL/SQL)
─────────────────────────────────────────        
Write letter with  →→   Letter travels  →→  Reads letter
value 7369                through internet       tores in g_x01

If you send empty letter → server reads nothing → g_x01 = NULL Bottom line — x01 in JavaScript and g_x01 in PL/SQL are two halves of the same thing.JavaScript sends the value, PL/SQL receives it.You cannot skip the JavaScript side or the server will have nothing towork with.