Page Level Ajax Callback Function Use in the Oracle Apex Application

Topic Introduction: This tutorial will show the Page Level Ajax Callback Function Use in the Oracle Apex Application. We can use the Ajax Callback function on the Oracle Apex application to complete specific work in many ways. The Ajax Callback Function can be declared on the Application Level (Application 100\Shared Components\Application Processes) and Page Level. Here we will discuss the Page Level process.

Here we will use an Ajax Callback function to set the payment due amount against a supplier when selecting a supplier  (: P1_PARTY) value will be set on the due amount field (: P1_PAYM_TOTAL_DUE). Through this work, we can set this by a simple dynamic action Set Value by SQL Query, this work we will do in different ways.

Follow the process described below

1

Create a process on the page under Ajax Callback: PAYM_TOTAL_DUE

DECLARE

    vPAYM_TOTAL_DUE   NUMBER;

BEGIN

    SELECT SUM (NVL (DUE_AMT, 0))

      INTO vPAYM_TOTAL_DUE

      FROM PAYMENT_DUE_VW

     WHERE SUPPLIER_ID = :P1_PARTY;

    HTP.p (vPAYM_TOTAL_DUE);

EXCEPTION

    WHEN OTHERS

    THEN

        vPAYM_TOTAL_DUE := 0;

END;

2

Create a dynamic action under P1_PARTY item: Supplier Due 

Create an action: 

Action Type: Execute JavaScript Code

Code: 

apex.server.process ( "PAYM_TOTAL_DUE", {

        pageItems: "#P1_PARTY"

  },{

        //dataType: "text", 

        success: function( pData ) {

            $('#P1_PAYM_TOTAL_DUE').val(pData);

        }

  } );

Now to check this work select a supplier and if get any due amount by function it will be set on the specific item P1_PAYM_TOTAL_DUE.

Note:

We can also write this function in Function and Global Variable instant of dynamic action. in this way, dynamic action declares only the function name.

2

Write this Function on Function and Global Variable.

function set_due_amt(){    

apex.server.process ( "PAYM_TOTAL_DUE", {

        pageItems: "#P1_PARTY"

  },{

        //dataType: "text", 

        success: function( pData ) {

            $('#P1_PAYM_TOTAL_DUE').val(pData);

        }

  } );

}

3

Create a dynamic action under P1_PARTY item: Supplier Due 

Create an action: 

Action Type: Execute JavaScript Code

Code: 

set_due_amt()

Multiple values Get and Set

1

If we want to set multiple values Using Ajax Callback, we need to write this Process

DECLARE

    vPAYM_TOTAL_DUE   NUMBER;

    vTR VARCHAR2(5);

    vLOC NUMBER;

    vFYEAR NUMBER;

    vSL NUMBER;

BEGIN

    SELECT ISU_TR_CD,ISU_FROM_LOC,ISU_FYEAR,ISU_SLNO

    INTO vTR,vLOC,vFYEAR,vSL

    from INV_ISSUE_MASTER

    WHERE ISU_TR_CD='INV'

    AND ID = :P17_ISU_REF_ID;

    apex_json.open_object;        -- {

    apex_json.write('pTR', vTR);      --   "a":1

    apex_json.write('pLOC', vLOC);      --   "a":1

    apex_json.write('pFYEAR', vFYEAR);      --   "a":1

    apex_json.write('pSL', vSL);      --   "a":1

    apex_json.close_object;       --  }

EXCEPTION WHEN OTHERS THEN

    apex_json.open_object;        -- {

    apex_json.write('pTR', '');      --   "a":1

    apex_json.write('pLOC', '');      --   "a":1

    apex_json.write('pFYEAR', '');      --   "a":1

    apex_json.write('pSL', '');      --   "a":1

    apex_json.close_object;       --  }

END;

2

Dynamic action Java Script code for Multiple value set

apex.server.process ( "4-UK-Process", {

        //x01: "test",

        pageItems: "#P17_ISU_REF_ID"

  },{

        dataType: 'json',

        success: function( pData ) {

             console.log(pData)

            $s('P17_ISU_REFTR_CD', pData.pTR )

            $s('P17_ISU_REFFYEAR', pData.pFYEAR )

            $s('P17_ISU_REFSLNO' , pData.pSL)

            $s('P17_ISU_REFRLOC' , pData.pLOC )

        }

  } );