AJAX Example

Follow the steps below to use AJAX in your APEX Applications.

Step 1: Create a PL/SQL API for the AJAX call

Create the PL/SQL stored procedure you want to use for the AJAX call. The only requirement is that the procedure return a valid JSON object.

-- ajax_example
PROCEDURE ajax_example(p_x01 IN apex_application.g_x01%TYPE) IS
BEGIN
  -- enter your DB logic here

  -- raise_application_error(-20000, 'User defined error for testing only');

  -- required: return a json object for the promise
  apex_json.open_object();
  apex_json.write('success', true);
  apex_json.write('message', 'We used AJAX to call this procedure - p_x01=' || p_x01);
  apex_json.close_object();
EXCEPTION WHEN OTHERS THEN
  -- required: return a json object for the promise
  apex_json.open_object();
  apex_json.write('success', false);
  apex_json.write('message', 'Something went wrong ...');
  apex_json.write('sqlerrm', SQLERRM);
  apex_json.close_object();
END ajax_example;

Step 2: Create the AJAX Callback Application Process in APEX

In your APEX application go to Shared Components - Application Processess. Create a new AJAX Callback process - I like to name it the same thing as the PL/SQL procedure for consistency.

-- ajax_example - application process
ajax_example(p_x01 => apex_application.g_x01);

Step 3: Create a javascript function to call the Application Process
Create the javascript function to call apex.server.process. This is what ties together the PL/SQL API and the AJAX Callback Process.

// ajax-template.20240206.js
// Author: Corey Roadcap
// Add this file to your application/workspace
// Be sure to reference it in your theme or page.

// set _log to true to turn console logs on
var _log = false; // true // false

// helper functions

// logging function
function c_log() {
if (_log) {
  for (var i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}
}

// show the apex error message
function showPageErrors(message) {
// clear then show the error message
apex.message.clearErrors();
apex.message.showErrors({
  type: "error",
  location: "page",
  message: message,
  unsafe: false
});
}

// show and auto-hide success messages
function showPageSuccess(message) {
var showTime = 5000; // in milliseconds
// show the success message
apex.message.showPageSuccess(message);
// auto-hide the success message
setTimeout(function() {
  apex.message.hidePageSuccess();
}, showTime);
}



// AJAX function

// ajax_example - copy this and replace with your ajax call info
function ajax_example(param) {
c_log(
  "ajax_example(param)",
  param
);

// wait popup (page spinner)
if (param) {
  setTimeout(function() {
    $wp = apex.widget.waitPopup();
  }, 1);
}

// do ajax call (comment this out and replace with your info)
apex.server
.process("ajax_example", {
  x01: param
}, {
  success: function( data ) {
    c_log("success", data);

    if (data.success) {
      showPageSuccess(data.message);
      // do any subsequent work here

    } else {
      showPageErrors(data.message);
    }
  },
  error: function( jqXHR, textStatus, errorThrown ) {
    c_log("error", jqXHR, textStatus, errorThrown);
    showPageErrors(errorThrown);
  }
})
.always(function() {
  // remove wait popup
  $wp.remove();
})
}

Step 4: Call the javascript function in your app

In your application, add javascript calls wherever you want and provide the correct parameters.

<a href="javascript:ajax_example(1000);">Click to AJAX</a>

Breadcrumb

Get Body Content

AJAX Example