Introduction

Advanced Dynamic Actions in Oracle APEX extend beyond basic user interactions like showing or hiding fields, enabling or disabling components, or submitting forms. They support executing custom JavaScript code, asynchronous server-side processing using AJAX Callbacks, and dynamic manipulation of the Document Object Model (DOM). These features enhance user experience, improve performance, and enable the development of highly responsive applications, all without a full-page reload.

What is an AJAX Callback?

An AJAX Callback (Asynchronous JavaScript and XML) in Oracle APEX is an asynchronous request from the client to the server that avoids a full-page reload. Although historically based on XML, most implementations now use JSON for transmitting data.

How AJAX Callbacks Work in Oracle APEX

  1. Client-Side Request: The request can be triggered by a user action (like entering a value in a field, clicking a button, or even when a page loads) using a Dynamic Action or custom JavaScript (apex.server.process)

  2. Server Processing: The AJAX request sends data to a server-side process (typically a PL/SQL function or procedure) that processes the data or performs database operations. The result is usually returned in a format like JSON.

  3. Client-Side Response Handling: Once the server responds, a callback function on the client side (written in JavaScript) processes the response, updating the page based on the returned data (e.g., showing an error message, populating a form field, or refreshing a region).

AJAX Callbacks Flow Diagram

 

Key Features of AJAX Callbacks:

Asynchronous Communication: AJAX allows the web page to communicate with the server in the background while the user continues interacting with the page. The page doesn’t need to reload, leading to faster and more responsive user interfaces.

Partial Data Exchange: Unlike traditional HTTP requests that reload the entire page, AJAX only exchanges specific data (like a JSON object or an XML response). This makes data retrieval and updates more efficient.

Dynamic Updates: AJAX callbacks are often used to fetch data from the server (e.g., database queries or calculations) and dynamically update parts of the web page (like fields, regions, or charts) without interrupting the user’s workflow.

Example Use Cases of AJAX Callbacks in Oracle APEX:

  • Form Field Updates: When a user selects an employee ID, an AJAX callback retrieves the employee’s details from the server and populates fields like name, department, and salary without reloading the entire page.

  • Validations: You can validate user input (e.g., checking whether a username is available) by sending an AJAX request to the server and showing immediate feedback based on the server’s response.

  • Data Refreshing: In complex applications, you can use AJAX callbacks to refresh specific regions, charts, or reports with updated data while keeping the rest of the page intact.

Example of an AJAX Callback in Oracle APEX

I’ll search for an employee’s name using their ID.

Context

  • You have a form where the user enters the employee ID in a field (P2_EMPLOYEE_ID).

  • The system must make an AJAX call to the server to retrieve the employee’s name and display it in a text field (P2_EMPLOYEE_NAME) without reloading the page.

Steps to implement the Dynamic Action

1. Define the PL/SQL Process (AJAX Callback)

This process will retrieve the employee’s name based on the ID entered by the user.

  1. Go to the page where you have the form.

  2. In the Navigation Tree (left panel), select the “Processing” Tab.

  3. Under the “Ajax Callback” event, right-click and select “Create Process” from the context menu.

  4. Name it GET_EMPLOYEE_NAME.

  5. In “Source / Language”, select PL/SQL.

  6. In the PL/SQL block, enter the following code:

Copy to Clipboard

  1. Save the process. This process will execute when JavaScript makes the AJAX call.

2. Create the Dynamic action.

Now, we will configure the dynamic action to trigger the AJAX call when the user enters an employee ID.

  1. Click the “Rendering” tab and select the text input field P2_EMPLOYEE_ID.

  2. Right-click on the P2_EMPLOYEE_ID element and, from the context menu, select “Create Dynamic Action”.

  3. Configure the following settings:

    • Dynamic Action Name: Search Employee Name

    • Event: Select Change (when the user enters a new value in P2_EMPLOYEE_ID).

    • Item(s): The element on which we want to perform the dynamic action will automatically appear (P2_EMPLOYEE_ID)

3. Add a JavaScript Action in the Dynamic Action.

  1. Right-click on the dynamic action we just created and, from the context menu, select “Create TRUE Action”.

  2. For the new action that appears, in the Identification section, select “Execute JavaScript Code” as the Action.

  3. In the JavaScript Code box, enter the following:

Copy to Clipboard

In this section:

  • apex.server.process('GET_EMPLOYEE_NAME', { pageItems: '#P2_EMPLOYEE_ID' }): This makes the AJAX call to the PL/SQL process GET_EMPLOYEE_NAME and sends the value of P2_EMPLOYEE_ID as a parameter.

  • The success function retrieves the returned value (data.name) and inserts it into the P2_EMPLOYEE_NAME field using jQuery:

Copy to Clipboard

 

Then, we set the focus on that field:

Copy to Clipboard

  • The error function clears any existing content in P2_EMPLOYEE_NAME and displays an alert message if an issue occurs with the AJAX call.

  1. Save the Dynamic Action.

4. Test the functionality

  1. Run the page in Oracle APEX.

  2. Enter an employee ID in the P2_EMPLOYEE_ID field.

  3. Once the ID is entered, the Dynamic Action triggers an AJAX call to the server and retrieves the employee’s name.

  4. If everything is correct, the P2_EMPLOYEE_NAME field will be filled automatically without reloading the page.

  5. If the entered ID does not exist in the database, an alert message will be displayed, and the employee name field will be cleared.

5. Add a “False” action.

Let’s say we want to control the case where the user removes the employee ID after entering it. In this case, instead of performing a validation, we want to display an alert saying:
“No Employee ID has been entered.”

Steps to follow:

  1. Select the Dynamic Action “Search Employee Name” (from the left panel inside the “Rendering” tab).

  2. In the Dynamic Action properties (right panel), add a “Client-side Condition”:

  1. Ensure that the “Search Employee” action only triggers when the Client-side Condition is met:

“True” event

  1. Right-click the “Search Employee Name” dynamic action (left panel).

  2. From the context menu, select “Create FALSE action”.

  3. Select the newly created FALSE action and modify its properties to display an alert message stating:
    “You haven’t introduced any Employee ID”

Advantages of AJAX Callbacks in Oracle APEX:

  • Improved user experience: No need for page reloads, making applications more interactive and responsive.

  • Performance efficiency: Only the necessary data is exchanged between the client and the server, reducing server load and bandwidth usage.

  • Flexibility: You can trigger complex database operations or validations in the background, giving users immediate feedback or updates.

Conclusion

Using AJAX Callbacks in Oracle APEX is a powerful technique that allows developers to build highly dynamic and responsive web applications. By enabling asynchronous communication between the client and the server, developers can perform validations, retrieve data, or trigger complex logic without refreshing the entire page. This not only enhances the user experience but also improves performance by reducing server load and bandwidth consumption.

Oracle APEX’s seamless integration of PL/SQL and JavaScript, combined with declarative and low-code capabilities, makes implementing AJAX Callbacks both efficient and scalable. As modern applications demand real-time interactions and fluid UI behavior, mastering AJAX Callbacks is essential for delivering professional-grade solutions in enterprise environments.

References

apex.server.process