Create Change Password Page Apex |User Authorization,Part-3

Ajax Call Back Process in Oracle Apex Use Dynamic Action And Execute JavaScript Code. Method=1

In modern web development, dynamic and interactive web pages have become the norm. To achieve this interactivity, developers often rely on asynchronous communication between the client-side and the server-side. One popular technique for achieving this is through Ajax (Asynchronous JavaScript and XML) calls. In this article, we will explore the Ajax callback process in Oracle Apex using dynamic actions and executing JavaScript code. We will delve into the Method=1 approach, which offers a powerful way to enhance the user experience of your Oracle Apex applications.

Understanding the Ajax Callback Process in Oracle Apex

Ajax Call Back Process - Method=1

The Ajax callback process in Oracle Apex using the Method=1 approach involves executing JavaScript code in response to a dynamic action. Dynamic actions are a powerful feature of Oracle Apex that allows developers to define client-side behavior declaratively. By leveraging dynamic actions, we can enhance the interactivity and responsiveness of our Apex applications.

Setting up a Dynamic Action

To initiate the Ajax callback process, we first need to set up a dynamic action in Oracle Apex. A dynamic action consists of a triggering event, a selection type, and an action. The triggering event determines when the dynamic action should be executed, while the selection type specifies the element(s) that will trigger the action. The action defines the behavior we want to occur when the dynamic action is triggered.

Executing JavaScript Code

Within the action of our dynamic action, we can execute JavaScript code to perform various operations. This JavaScript code can manipulate the DOM, make additional Ajax calls, or interact with other client-side components. By leveraging the power of JavaScript, we can create dynamic and interactive user experiences within our Oracle Apex applications.

Example: Updating a Region with Ajax

Let's walk through an example to better understand the Ajax callback process in Oracle Apex. Suppose we have an Apex page with a button that, when clicked, should update a region on the page with fresh data. We can achieve this functionality using the Method = 1 approach.

Create a New Blank page

1. Name- Ajax Call Back Proces

Create a Region
I will work with the data in a table of my choice. You can work with any table. I am currently working on my product table. 

 

CREATE TABLE "PRODUCT"
("PRODUCT_ID"
    NUMBER,
    "PRODUCT_CODE"
    VARCHAR2(250),
    "PRODUCT_NAME"
    VARCHAR2(250),
    "PRODUCT_DESCRIPTION"
    VARCHAR2(4000),
    "GROUP_NAME"
    VARCHAR2(250),
    "STATUS_ID"
    VARCHAR2(50))

Since I will be working with the product table, I will create the items in the table that will bring the data. 
Create items according to your needs
I will rename the items for the convenience of work

I will select the 1st item 

select PRODUCT_NAME,
PRODUCT_ID from product

Create a Ajax Call Back Process

1. Name- PROUCT
2.   PL/SQL Code

DECLARE v_proid number;
v_procode VARCHAR2(50);
v_proname VARCHAR2(50);
v_prodescr VARCHAR2(250);
v_progrope VARCHAR2(250);
v_prostates VARCHAR2(250);

CURSOR cur_c IS SELECT PRODUCT_CODE,
PRODUCT_NAME,
PRODUCT_DESCRIPTION,
GROUP_NAME,
STATUS_ID FROM PRODUCT WHERE PRODUCT_ID=APEX_APPLICATION.g_x01;
BEGIN FOR c IN cur_c LOOP v_procode:=c.PRODUCT_CODE;
v_proname:=c.PRODUCT_NAME;
v_prodescr:=c.PRODUCT_DESCRIPTION;
v_progrope:=c.GROUP_NAME;
v_prostates:=c.STATUS_ID;
END LOOP;

OWA_UTIL.mime_header('text/xml', FALSE);
HTP.p('Cache-Control: no-cache');
HTP.p('Pragma: no-cache');
OWA_UTIL.http_header_close;
HTP.prn('

    < body> ');
 HTP.prn('<desc>this xml genericly sets multiple items</desc>'); HTP.prn('<item id="' || APEX_APPLICATION.g_x02 || '">' || v_procode || '</item>'); HTP.prn('<item id="' || APEX_APPLICATION.g_x03 || '">' || v_proname || '</item>'); HTP.prn('<item id="' || APEX_APPLICATION.g_x04 || '">' || v_prodescr || '</item>'); HTP.prn('<item id="' || APEX_APPLICATION.g_x05 || '">' || v_progrope || '</item>'); HTP.prn('<item id="' || APEX_APPLICATION.g_x06 || '">' || v_prostates || '</item>'); HTP.prn('</body>'); EXCEPTION WHEN OTHERS THEN OWA_UTIL.mime_header('text/xml', FALSE); HTP.p('Cache-Control: no-cache'); HTP.p('Pragma: no-cache'); OWA_UTIL.http_header_close; HTP.prn('


        < body> ');
 HTP.prn('<desc>this xml genericly sets multiple items</desc>'); HTP.prn('<item id="' || APEX_APPLICATION.g_x02 || '">' || SQLERRM || '</item>'); HTP.prn('</body>'); END; 

Create a Dynamic Action the select list item

1. Name- Call Back Process

Action

1. Execute javascript code

apex.server.process("PROUCT", {
            x01: $v('P11_PRODUCT_ID'),
            x02: 'P11_PRODUCT_CODE',
            x03: 'P11_PRODUCT_NAME',
            x04: 'P11_PRODUCT_DESCRIPTION',
            x05: 'P11_GROUP_NAME',
            x06: 'P11_STATUS_ID',
        }

        , {

        dataType: 'xml',
        loadingIndicator: '#P11_PRODUCT_CODE,#P11_PRODUCT_NAME,#P11_PRODUCT_DESCRIPTION,#P11_GROUP_NAME,#P11_STATUS_ID',
        success: function(gReturn) {
            var l_Count=gReturn.getElementsByTagName("item").length;

            for (var i=0; i < l_Count; i++) {
                var l_Opt_Xml=gReturn.getElementsByTagName("item")[i];
                var l_ID=l_Opt_Xml.getAttribute('id');
                var l_El=apex.item(l_ID);

                if (l_Opt_Xml.firstChild) {
                    var l_Value=l_Opt_Xml.firstChild.nodeValue;
                }

                else {
                    var l_Value='';
                }

                if (l_El) {
                    if (l_El.tagName=='INPUT') {
                        $s(l_ID, l_Value);
                    }

                    else if (l_El.tagName=='SPAN' && l_El.className=='grabber') {
                        l_El.parentNode.innerHTML=l_Value;
                        l_El.parentNode.id=l_ID;
                    }

                    else {
                        $s(l_ID, l_Value);
                    }
                }
            }
        }
    }); 

Frequently Asked Questions (FAQs)

What is the purpose of the Ajax callback process?

The Ajax callback process allows for asynchronous communication between the client-side and the server-side, enabling dynamic and interactive web applications without requiring full page reloads. It enhances the user experience by providing real-time updates and responsiveness.

Can I use other methods besides Method=1 in Oracle Apex?

Yes, Oracle Apex provides multiple methods for implementing Ajax callback processes. Each method offers different functionalities and features. Method=1 is one of the popular approaches due to its simplicity and ease of use.

How does Ajax differ from traditional web page requests?

Traditional web page requests involve the complete reloading of the page, leading to a less interactive and responsive user experience. Ajax, on the other hand, allows for partial updates and real-time interactions without disrupting the user's workflow.

Can I perform server-side processing in Ajax callback processes?

Yes, Ajax callback processes can involve server-side processing. The JavaScript code executed during the callback process can make additional requests to the server, fetch data, perform computations, and update the client-side components accordingly.

Are there any limitations to using Ajax callback processes in Oracle Apex?

While Ajax callback processes offer great flexibility and interactivity, it's important to consider potential performance impacts. Frequent and unnecessary Ajax calls can result in increased server load and slower response times. It' s recommended to optimize and limit the number of Ajax requests for optimal performance.

Are there any security considerations when using Ajax callback processes?

Security is a critical aspect when implementing Ajax callback processes. It's essential to validate and sanitize any user inputs on both the client-side and the server-side to prevent potential security vulnerabilities such as cross-site scripting (XSS) attacks.

Conclusion

The Ajax callback process in Oracle Apex using dynamic actions and executing JavaScript code offers a powerful and efficient way to create dynamic and interactive web applications. By leveraging the Method=1 approach, developers can enhance the user experience of their Apex applications by providing real-time updates and responsiveness. It's important to understand the various aspects of the Ajax callback process and utilize it judiciously to ensure optimal performance and security.

Remember to always consider the specific requirements of your application and the needs of your users when implementing Ajax callback processes in Oracle Apex. With the right approach and careful consideration, you can create compelling and engaging web applications that deliver a seamless user experience.