How to make AJAX Callback using apex.server.process

It involves two parts.

Part 1: Client-side JavaScript Code.

apex.server.process(
    "MY_PROCESS", 
    {
        x01: "val1",
        pageItems: "#P02_PAGE_ITEM_01,#P02_PAGE_ITEM_02"
    },
    {
        loadingIndicator: \(("#div-box-id-"+\)v("P10_PARENT_EXP_ID")),
		success: function( data)
        {
            console.log(data.ajaxResponse01); // This is how to get the data returned from ajax callback.
         // code to run on success
		},
        error: function( jqXHR, textStatus, errorThrown ) 
        {
         // handle error
        }
    }
);

Above JavaScript code I am passing three parameters to apex.server.process API.
1st parameter "MY_PROCESS" is the name of my Ajax Callback PL/SQL process. It can be a page process or an Application Process. Create a page process at Execution point - "Ajax Callback" as shown in below screenshot.
2nd parameter takes Input values that can be used on Server-side PL/SQL side. It can be page items or other values using Xnn or Fnn properties. (Check limits here).
3rd parameter primarily handles the response. It does more than just handling the response. You can show loading indicator on the regions or page items selected using JQuery and set to loadingIndicator property. (Check more properties here).

What to put inside the Ajax Callback PL/SQL code is explained in Part 2. Before that let's cover the other parameters of the JavaScript API.
Second Parameter takes the values that we want to pass (or submit) to the Server-side PL/SQL code. Everything is explained here.

Part 2: Server-side PL/SQL Code

DECLARE
		L_INPUT_01 VARCHAR2(200) := :P02_PAGE_ITEM_01; -- Only those page items can be referenced which are passed by the JavaScript AJAX Call.
        L_INPUT_02 VARCHAR2(200) := :P02_PAGE_ITEM_02;
		L_INPUT_03 VARCHAR2(200) := APEX_APPLICATION.GX01; -- Other method to pass values from Ajax callback JavaScript Code
	BEGIN
		-------
		Code
		-------
		 
		APEX_JSON.OPEN_OBJECT();
		APEX_JSON.WRITE('ajaxResponse01','l_response_01');
		APEX_JSON.WRITE('ajaxResponse02',' '||'l_response_02'); -- Concatenated extra space to the response value, as null response does not get sent.  Beware, It causes value comparison issues  later.
		APEX_JSON.CLOSE_OBJECT()
		 
	EXCEPTION
	    WHEN OTHERS THEN
	        APEX_JSON.OPEN_OBJECT();
	        APEX_JSON.WRITE('ERROR',L_LOG_MESSAGE ||'|--|'||SUBSTR(SQLERRM,1,200));
	        APEX_JSON.CLOSE_OBJECT();
	END;

The code below simulates a click on 2nd tab and opens it.

$('#myRegion li.t-Tabs-item:eq(1) a').click();

1. #myRegion is the static ID of the specific tab region which can be defined at » Right pane of your tab region » Advanced » Static ID

2. We have put :eq(1) to acces 2nd tab because, indexing in JavaScript starts with 0 and the 1st item (tab) is at index 0, 2nd tab is at index 1 and so on….

How to use this?

You can use this script to switch to a specific tab automatically based on user actions like:

1. Click on a URL.

    <a href="#" onClick="$('#myRegion li.t-Tabs-item:eq(1) a').click(); return false;"> Click Here </a>
   

2. Click on a Button.

   Create a Dynamic Action with action type Execute JavaScript Code and use the same JS code there.

3. Click on a link or buttion attached to an event listner or any other custom code..

Check this post if you are interested to know how to create and use Event listeners Oracle APEX.

Event listeners are the JavaScript code waiting to be executed as soon as the associated event gets triggered from the UI (e.g. User click on button or URL).

When to use custom Event Listeners?

1. (On client side) You want to execute a JavaScript Code when user clicks on your custom created Button or URL.

2. (optional) You also need to pass values from that button or URL to the JavaScript code you want to execute.

3. You are not able to achieve this using Dynamic Action or It’s getting too complex that way.

How to Create?

Event Listeners can be created by putting below code in page header attribute named “Execute when page loads”.

apex.jQuery(window).on('theme42ready', () => { // This line ensures that Theme42ready has loaded completely before proceeding
    var contextObjectName = apex.actions.createContext("ContextGroupName",$("#ContextElementID")); //creating a context to eliminate conflicts
    contextObjectName.add([
					{
						name : 'event-name',
						Label : 'Event Label',
						action: (event, element, args) => {
							var var1 = args.j_event_passed_value_1;
							//-------my code ------
							//--AJAX Call
						}
						 
					},
					{
                        //multiple event listeners can be added to the list
                        name : 'event-two',
                        Label : 'Event Two',
                        action : (event, element, args) => {
                            var var1 = args.j_event_passed_value_1;
                            //--------my code -----
                    }
    ]);
};

How to call (use)?

1. Using Button action

   <button 
       type="button" 
       title="Button Title" 
       data-action="action-name?j_event_passed_value_1=value1&j_event_passed_value_2=value2"
   > Text inside button </button>
   

2. Using Hyper-Link anchor tag

   <a 
       href="#action$action-name?j_event_passed_value_1=value_1&j_event_passed_value_2=value_2"
   > Link Text </a>
   

   You can also put #action$action-name?jevent_passed_value_1=value_1 in place of URL of declaratively created button after setting the button behavior to Redirect to a page in same application.

Soft validation error - Does not crash page, adds to stack, for business rule validation failure message. (for more check apex_error).

apex_error.add_error (
    p_message          => 'Username should not contain numbers',
    p_display_location => apex_error.c_inline_in_notification,
    p_page_item_name   => 'P3_USERNAME'
);

Hard Stop Exception - Crashes execution immediately, only for critical technical errors

-- Range must be between -20999 and -20000
RAISE_APPLICATION_ERROR(-20001, 'Critical Error: Authorization Failed');

Success Message after page submit - To be used in page processes, Display on next page load.

APEX_APPLICATION.G_PRINT_SUCCESS_MESSAGE := 'Record Saved Successfully.';

Better way to show static success message after page submit is to put it in the success message attribute of the page process. If you want to make success message dynamic (e.g. “Row ID - XXXX processed!”), return the row_id value in a hidden page item (let PX_ROW_ID) and define the success message attribute value like - Row ID - &PX_ROW_ID. processed!.

Check example use here.

Using apex JavaScript API apex.message.

Show and clear errors using JS

apex.message.showErrors([{
    type:       "error",
    location:   [ "page", "inline" ],
    pageItem:   "P10_ITEM_NAME",
    message:    "Value must be greater than 0",
    unsafe:     false
}]);
apex.message.clearErrors();

Show and clear Success messages using JS

apex.message.showPageSuccess("Process Completed Successfully!");

// auto dissmiss duration can be set by putting below code into "Execute When Page Loads" section of page header.
apex.message.setDismissPreferences({
    dismissPageSuccess: true,
    dismissPageSuccessDuration: 3000 // Duration in milliseconds (3 seconds)
});

Referances - apex.message