Interactive Grid Checkbox And Insert Table to Table by Ajax Callback

 



Step:1
====

Create two Interactive Grid Regions.

My 1st Region--> Details Collection (For Insert the checkbox value)
My 2nd Region-->  SIM Request Of Approved List (For Checkbox Region)

Step:2
====

Function and Global Variable Declaration:

// ************* For check box column ****************//

//at first array declare 

let v_pkrownum = [];

function validationchk(el) {

    v_pkr = el.getAttribute("V_ID");

    function unset() {

        index = v_pkrownum.indexOf(v_pkr);

        if (index > -1) {

            v_pkrownum.splice(index, 1);

        }

    }


    if (el.classList.contains("fa-check-square")) {

        v_pkrownum.push(v_pkr);


    }

    else if (el.classList.contains("fa-square")) {

        unset();

    }

    $s("P31_V_ID", v_pkrownum);


};

function fCheckUncheck(el) {

  el.classList.toggle("fa-square");

  el.classList.toggle("fa-check-square");

};


Step:3
====

Create with Checkbox Interactive Grid.
The checkbox is Manual Column. (Column Name: Check)
And
Create an APEX Item to put the checkbox value. (P31_V_ID)

Select checkbox Column.
Type: HTML Expression
Heading: 

HTML Expression:

<span id="ckbx" class="fa fa-square checkbox"
   style="font-size:19px;color:var(--a-checkbox-checked-background-color)"
   V_ID="&ID." ></span>

========================

Create Dynamic Action.
Name: DETAILS_CHECKBOX
Event Scope: Dynamic 
Event: Click

Selection Type: jQuery Selector
jQuery Selector: #ckbx

Action: Execute Javascript code
Code: 

let el = this.triggeringElement;
fCheckUncheck(el);
validationchk(el);

========================

Step:4
====

Create or Replace PROCEDURE PS_SIM_CARD_PAYMENT_COLLECTION (

    P_MESSAGE         OUT   VARCHAR2,
    P_SIM_MST_ID              NUMBER,
    P_SIM_REQ_DTL_IDS     VARCHAR2,
    P_GUSER_ID                  NUMBER)

IS

    CURSOR C_APPUSER IS

       SELECT ID,
                   APPROVED_QTY
       FROM SIM_REQ_DTL
       WHERE REGEXP_LIKE (P_SIM_REQ_DTL_IDS, '(^|,)' || ID || '(,|$)');

BEGIN

    FOR i IN C_APPUSER
    LOOP

        INSERT INTO SIM_CARD_PAYMENT_DTL (ID,
                                          SIM_CARD_PAYMENT_MST_ID,
                                          SIM_REQ_DTL_ID,
                                          QTY,
                                          CREATOR,
                                          CREATED_ON)

         VALUES (SIM_CARD_PAYMENT_DTL_ID_SEQ.NEXTVAL,
                     P_SIM_MST_ID,
                     I.ID,
                     i.APPROVED_QTY,
                     P_GUSER_ID,
                     TO_CHAR (SYSDATE, 'DD-MON-RR HH24:MI:SS'));

    END LOOP;

    COMMIT;

    P_MESSAGE := '1';

EXCEPTION

    WHEN OTHERS    THEN
        P_MESSAGE := SQLERRM;
END;
/

Step:5
====

Create an Ajax callback (For run the Database process).
Name: 
PAYMENT_DETAILS_SAVE
Type: Execute Code

PLSQL Code:

DECLARE
    P_MESSAGE   VARCHAR2 (400);

BEGIN
    PS_SIM_CARD_PAYMENT_COLLECTION (P_MESSAGE,
                                APEX_APPLICATION.G_X01,
                                APEX_APPLICATION.G_X02,
                                :GUSER_ID);

    APEX_JSON.OPEN_OBJECT;
    APEX_JSON.WRITE ('jsonstatus', 200);
    APEX_JSON.WRITE ('message', P_MESSAGE);
    APEX_JSON.CLOSE_ALL;

EXCEPTION

    WHEN OTHERS    THEN

        APEX_JSON.OPEN_OBJECT;
        APEX_JSON.WRITE ('jsonstatus', SQLERRM);
        APEX_JSON.CLOSE_ALL;

END;


Step:5
====

Function and Global Variable Declaration:

function f_details_save() {

  let mst_pk = $v('P31_ID');

  let dtl_ids = $v('P31_V_ID');

  if (dtl_ids) {

      apex.server.process("PAYMENT_DETAILS_SAVE", {  //call ajax callback

          x01: mst_pk,
          x02: dtl_ids

      }, {

          dataType: "json",

          success: (pdata) => {

              if (pdata.jsonstatus == 200) {

                  apex.region('detailsid').refresh(); // Payment Details region refresh

                  closeModal('Show_modal'); // Approved list region close

              }

              else {

                  apex.message.clearErrors();

                  apex.message.showErrors({ type: "error", location: "page", message: "Unable to add." + pdata.status, unsafe: false });

              }

          },

          error: (r) => { console.log(r) }

      })

  }

  else{

    apex.message.alert("At first Check Request Number❗️");

    return;

  }


}


Step:6
====

Insert Region For Refresh. -->Static ID:  detailsid
Checkbox Region For Close Modal. -->Static ID: Show_modal

Post a Comment

Previous Post Next Post