20210916 - AJAX Call 예제

AJAX Call 예제


1. https://apex.oracle.com/pls/apex/germancommunities/apexcommunity/tipp/3341/index-en.html


function getEmpInfo () {
  apex.server.process(
    'getEmpInfo',                             // Process or AJAX Callback name
    {x01: apex.item("P1_EMPNO").getValue()},  // Parameter "x01"
    {
      success: function (pData) {             // Success Javascript
        apex.item("P1_EMP_INFO").setValue(pData);
      },
      dataType: "text"                        // Response type (here: plain text)
    }
  );
}

Execute on Page Load


$("#P1_EMPNO").on("change", getEmpInfo);


2. https://www.linkedin.com/pulse/calling-plsql-from-javascript-oracle-apex-rodrigo-mesquita/


Declare
   ln_error_code         Number;
   lv_error_msg          varchar2(4000);   
Begin
FOR i IN 1..apex_application.g_f01.COUNT
LOOP
PROCESS_ORDER (p_order_num => apex_application.g_f01(i),
               p_return_code => ln_error_code ,
               p_return_message => lv_error_msg);
END LOOP;
/* below, the function return a JSON formatted string with the two returned values */
apex_json.open_object;
  apex_json.open_array('output');
    apex_json.open_object;
      apex_json.write('lv_error_code', ln_error_code);
       apex_json.write('lv_error_msg', lv_error_msg);
  apex_json.close_object
   apex_json.close_array;
apex_json.close_object;
End;

function processOrder(id) {
    /* to avoid the user to click on some other order while a order is being processed,
        we show the apex spinner, you need to set a ID on the report. in this case the ID is ORDER_REPORT */var lSpinner$ = apex.util.showSpinner( $( "#ORDER_REPORT" ) );
    /* ajax to call the database procedure */
    apex.server.process("PROCESS_ORDER", { // the ajax callback process name
        dataType: 'text',
        async:false/*by setting to false is equivalent to checking the Wait For Result option in the dynamic action */
        f01 : id, /* The order id passed from the report link */
        pageItems: "#P1_ORDER_ID" // The page item that we want to submit before calling the process.
    }, {
        success: function(pData) {
            /* now we can remove the spinner */
            lSpinner$.remove();
            
            /* The Ajax process will return lv_error_msg and lv_error_code, if lv_error_code = 0 
            show the successful message, if not show the error */ 
            var errorMsg = pData.output[0].lv_error_msg; 
            if (pData.output[0].lv_error_code == '0') {
                apex.message.clearErrors();
                apex.message.alert( 'Order processed successfully' );
            } else {
                apex.message.clearErrors();
                apex.message.showErrors([{
                    type: "error",
                    location: ["page"],
                    message: errorMsg,
                    unsafe: false
                }]);
            }
        }
    });
}



Edit the order id column to call the JavaScript function.

Type: Link
Target: Type: URL / Target: javascript:processOrder(#ORDER_ID#);
Link Text: #ORDER_ID#
Link Attributes: class="t-Button t-Button–simple t-Button–hot t-Button–stretch"


3. https://rimblas.com/blog/2020/07/video-using-apexserverprocess-for-ajax-calls-in-apex/


apex.server.process( "MY_PROCESS", {
    x01: 123,
    f01: jsArray,
    pageItems: "#P1_DEPTNO,#P1_EMPNO"
},
{
    dataType: "text"// default is json
    success: function( data )  {
        // do something here

    },
    error: function( jqXHR, textStatus, errorThrown ) {
        // handle error
    }
).always( function() {
    // code that needs to run for both success and failure cases
 }
);


그 외 참조

http://www.grassroots-oracle.com/2015/12/calling-plsql-from-javascript-in-apex.html

https://docs.oracle.com/database/apex-18.1/AEAPI/apex-server-namespace.htm#AEAPI29517

https://www.youtube.com/watch?v=ga-IgB15wDI

https://www.youtube.com/watch?v=yyuoIcF7hPI


댓글 없음:

댓글 쓰기

20250202 - IG 다운로드 버튼 바로 보이기

JS initialization Code : function (config) {     var $ = apex.jQuery,         toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),  ...