How can I guarantee that the all callback functions of the first Ajax API call have finished executing before initiating the 2 call in JavaScript?

[asifakhtar]

I have a function called createNewKeyProgressType that triggers when I click a button, invoking UpdateL2AndGetL3 which contains two Ajax API calls. I want to ensure that everything(all callback functions) are completed after the first call, which looks like this: smartConnectSave("/API/1/leveltwo/", "VmQEZWNQBEhyZ2kDXDR0AUJTBUoMdHwBCgwO", JSON.stringify(arrData), processCreateNewKeyProgressType, keyProgressTypeObj);. Only then do I want to proceed with the second Ajax API call: smartConnectGet("/API/1/levelthree/", "Aw93R3dwYnRhHGdTSmNAA2oGelFXWE1FCgQJBQ~~", arrData, 0, processGetTypeProcessDataPoints, dataObject);
Please be aware that the Ajax API call within the callback functions can be conditional. How can I ensure that the first Ajax API call(smartConnectSave("/API/1/leveltwo/", "VmQEZWNQBEhyZ2kDXDR0AUJTBUoMdHwBCgwO", JSON.stringify(arrData), processCreateNewKeyProgressType, keyProgressTypeObj);) in my UpdateL2AndGetL3 function is completed before proceeding with the second Ajax API call: smartConnectGet("/API/1/levelthree/", "Aw93R3dwYnRhHGdTSmNAA2oGelFXWE1FCgQJBQ~~", arrData, 0, processGetTypeProcessDataPoints, dataObject);?

function createNewKeyProgressType(keyProgressTypeID, status) {
    UpdateL2AndGetL3(keyProgressTypeID, status, keyProgressTypeName);
    return true;
}

function UpdateL2AndGetL3(keyProgressTypeID, status, keyProgressTypeName) {
    //Ajax API Call
    smartConnectSave("/API/1/leveltwo/", "VmQEZWNQBEhyZ2kDXDR0AUJTBUoMdHwBCgwO", JSON.stringify(arrData), processCreateNewKeyProgressType, keyProgressTypeObj); //updateAFMM_L2_KeyProgressType

    if (status == globalPendingStatusIDL2 && keyProgressTypeID != 0) {
        setTimeout(() => {
            //javascript Statments
            //...
            //...
            //javascript Statments
            //Ajax API Call
            smartConnectGet("/API/1/levelthree/", "Aw93R3dwYnRhHGdTSmNAA2oGelFXWE1FCgQJBQ~~", arrData, 0, processGetTypeProcessDataPoints, dataObject); //getPIPM_L1_Publications
        }, 1500);
    }
}

function processCreateNewKeyProgressType(objResults, keyProgressTypeObj) {
    if (keyProgressTypeObj.recordid == 0) {
        createKeyProgressDataPoints(keyProgressTypeObj);
        setTimeout(() => {
            $('#newModal').modal('hide');
            getKeyProgressTypeList();
        }, 1000);
    } else if ($('#newModal').is(':visible')) {
        editKeyProgressType(keyProgressTypeObj.recordid, keyProgressTypeObj.status);
        setTimeout(() => {
            getKeyProgressTypeList();
        }, 1000);
    }

}

function createKeyProgressDataPoints(keyProgressTypeObj) {
    //javascript Statments
    //...
    //...
    //javascript Statments
    //Ajax API Call
    smartConnectSave("/API/1/levelthree/", "fGZGdwF1bUNQXGZcFn55f0VcenhFa3xKCgQJBA~~", JSON.stringify(arrData), processCreateKeyProgressDataPoints, recordid); //updateAFMM_L3_KeyProgressDataPoint
}

function processCreateKeyProgressDataPoints(jsonResults, keyProgressTypeRecordID) {
    if (jsonResults && jsonResults.records) {
        //javascript Statments
        //...
        //...
        //javascript Statments
        //Ajax API Call
        smartConnectSave("/API/1/leveltwo/", "VmQEZWNQBEhyZ2kDXDR0AUJTBUoMdHwBCgwO", JSON.stringify(arrData), processCreateNewKeyProgressType, keyProgressTypeObj); //updateAFMM_L2_KeyProgressType
    } else {
        hideSaving();
        alert("Key Progress Data Point creation failed. Please contact support.");
    }
}

function getKeyProgressTypeList() {
    //javascript Statments
    //...
    //...
    //javascript Statments
    //Ajax API Call
    smartConnectGet("/API/1/leveltwo/", "fFUBUlsIDQZ6BwV3TWN2c1xGeHhdMWZXCgwB", arrData, 0, processKeyProgressTypeList); //getAFMM_L3_PublicationRecords
}

function processKeyProgressTypeList(objResults) {
    if (objResults && objResults.records) {
        numLength = objResults.records.length;
        for (let i = 0; i < numLength; i++) {
            //javascript Statments
            //...
            //...
            //javascript Statments

            $bodyList.append(strHTML);
        }
    }
    hideSaving();

}

function editKeyProgressType(recordID, status) {
    if (status == globalPendingStatusIDL2) {
        enterTargets(recordID, status); // displaying Targets content
    } else {
        $targetsModal.hide(); // if was showing from previous call
    }

}

function enterTargets(keyProgressTypeID, status) {
    if (status == globalPendingStatusIDL2) {
        //javascript Statments
        //...
        //...
        //javascript Statments
        //Ajax API Call
        smartConnectGetSorted("/API/1/levelthree/", "Aw93R3dwYnRhHGdTSmNAA2oGelFXWE1FCgQJBQ~~", arrData, arrSortBy, 0, processGetDataPoints, revision); //listAFMM_L3_KeyProgressDataPoint
    }
}


function processGetDataPoints(objResults, revision) {
    try {
        var numLength = 0;
        var arrData = [];
        globalKeyProgressDataPoint = objResults.records;
        if (objResults && objResults.records) {
            let strHTML = "";
            let prevRecordID = "";

            numLength = objResults.records.length;

            for (let i = 0; i < numLength; i++) {
                let record = objResults.records[i];
                let recordID = record["recordid"];
                let statusID = record["sf_Status ID"];
                let statusCaption = record["sf_Status Caption"];
                let numProjectMonth = record["cf_1768957"];
                let calendarMonth = record["cf_1768958"];
                let initialTarget = record["cf_1768961"];
                let actualValue = record["cf_1768964"];
                let revisedTarget1 = record["cf_1768963"];
                let revisedTarget2 = record["cf_1770079"];
                let revisedTarget3 = record["cf_1770080"];
                let revisedTarget4 = record["cf_1770081"];
                let revisedTarget5 = record["cf_1770082"];
                let revisedTarget6 = record["cf_1770083"];
                let revisedTarget7 = record["cf_1770084"];
                let revisedTarget8 = record["cf_1770085"];
                let revisedTarget9 = record["cf_1770086"];
                let revisedTarget10 = record["cf_1770087"];

                let arrRevisions = [];
                arrRevisions.push(revisedTarget1);
                arrRevisions.push(revisedTarget2);
                arrRevisions.push(revisedTarget3);
                arrRevisions.push(revisedTarget4);
                arrRevisions.push(revisedTarget5);
                arrRevisions.push(revisedTarget6);
                arrRevisions.push(revisedTarget7);
                arrRevisions.push(revisedTarget8);
                arrRevisions.push(revisedTarget9);
                arrRevisions.push(revisedTarget10);

                // task 1330 moving draft to pending
                if (record["sf_Status ID"] == globalDraftStatusIDL3 && globalStatusIDL1 == globalActiveStatusL1) {
                    let objData = {};
                    objData["recordid"] = record["recordid"];
                    objData["sf_Status ID"] = globalPendingStatusIDL3;
                    arrData.push(objData);

                    // change status
                    statusCaption = "Pending";
                    statusID = globalPendingStatusIDL3;
                }

                let strHTML = createTargetRow(recordID, statusID, statusCaption, prevRecordID, numProjectMonth, calendarMonth, actualValue, initialTarget, revision, arrRevisions);

                $bodyTargets.append(strHTML);

                prevRecordID = recordID;
            }

            if (arrData.length > 0) {
                //Ajax API Call             
                smartConnectSave("/API/1/levelthree/", "fGZGdwF1bUNQXGZcFn55f0VcenhFa3xKCgQJBA~~", JSON.stringify(arrData), processSaveInitialTargets, null); //updateAFMM_L3_KeyProgressDataPoint
            }

        } catch (ex) {
            alert("Error in processGetDataPoints(): " + ex.toString());
            return false;
        }
    }

    function processSaveInitialTargets(objResults, keyProgressTypeID) {
        try {
            let numLength = 0;
            let arrData = [];
            let success = true;

            if (objResults && objResults.records) {
                //console.log(objResults.records);
                numLength = objResults.records.length;

                for (let i = 0; i < numLength; i++) {
                    let record = objResults.records[i];
                    //let recordID = record["recordid"];
                    let status = record["status"];
                    if (status != "updated successfully") {
                        success = false;
                    }
                }
            }
            if (!success) {
                alert("Something went wrong during saving. Please try again later");
                return;
            } else {
                showAlert("Key Progress Type was updated successfully!");
                if (keyProgressTypeID) {
                    resetModal();
                    $newModal.modal('hide');
                    window.location.href = window.location.href;
                }
            }

        } catch (ex) {
            alert("Error in processSaveInitialTargets(): " + ex.toString());
            return false;
        }
    }

    function smartConnectSave(url, apiToken, rset, resultsFunction, resultsParams) {
        try {
            if (globalExceptionOccurred == false) {
                //numAjaxRequests++;
                var objData = {
                    url: url,
                    apitoken: apiToken,
                    jsonrset: rset
                };

                var objRequest = $.ajax({
                    url: url,
                    type: "POST",
                    data: objData,
                    dataType: "json"
                });

                objRequest.done(function(data) {
                    //numAjaxRequests--;
                    if (globalExceptionOccurred == false) {
                        if (numAjaxRequests == 0) {
                            hideSaving();
                        }

                        if (resultsFunction) {
                            return resultsFunction(data, resultsParams);
                        }
                    }
                });

                objRequest.fail(function() {
                    globalExceptionOccurred = true;
                    disableAll();
                });
            }
        } catch (ex) {
            alert("Error in smartConnectSave(): " + ex.toString());
            disableAll();
            return false;
        }
    }

    function smartConnectGet(url, apiToken, criteria, recordid, resultsFunction, strExtra) {
        smartConnectGetSorted(url, apiToken, criteria, "", recordid, resultsFunction, strExtra);
    }

    function smartConnectGetSorted(url, apiToken, criteria, sortby, recordid, resultsFunction, strExtra) {
        try {
            if (globalExceptionOccurred == false) {
                let objData;
                let objRequest;

                if (criteria != undefined && criteria != "") //for list
                {
                    objData = {
                        url: url,
                        apitoken: apiToken,
                        criteria: JSON.stringify(criteria),
                        //,othersettings: { "getstorevalue": "1" }
                        sortby: sortby == "" ? "" : JSON.stringify(sortby)
                    };
                } else //for get
                {
                    objData = {
                        url: url,
                        apitoken: apiToken,
                        recordid: recordid
                    };
                }

                objRequest = $.ajax({
                    url: url,
                    type: "POST",
                    data: objData,
                    dataType: "json" //,
                    //async: false
                });

                objRequest.done(function(data) {
                    if (globalExceptionOccurred == false) {
                        if (strExtra) {
                            return resultsFunction(data, strExtra);
                        } else {
                            return resultsFunction(data);
                        }
                    }
                });

                objRequest.fail(function() {
                    globalExceptionOccurred == true;
                    disableAll();
                });
            }
        } catch (ex) {
            alert("Error in smartConnectGet(): " + ex.toString());
            disableAll();
            return false;
        }
    }

 

[VBService]

To ensure that the second Ajax API call is only executed after the completion of the first call and its associated callback functions, you can use JavaScript Promises or the async/await pattern.

Here's an example, but it's not exactly your JavaScript code, it's just what it might look like:

function smartConnectSavePromise(url, apiKey, data, callback, context) {
  return new Promise(function(resolve, reject) {
    smartConnectSave(url, apiKey, data, function(response) {
      // Your existing callback logic here
      callback(response, context);
      resolve(); // Resolve the Promise after the callback is complete
    });
  });
}

function smartConnectGetPromise(url, apiKey, data, index, callback, context) {
  return new Promise(function(resolve, reject) {
    smartConnectGet(url, apiKey, data, index, function(response) {
      // Your existing callback logic here
      callback(response, context);
      resolve(); // Resolve the Promise after the callback is complete
    });
  });
}

async function UpdateL2AndGetL3() {
  try {
    await smartConnectSavePromise("/API/1/leveltwo/", "VmQEZWNQBEhyZ2kDXDR0AUJTBUoMdHwBCgwO", JSON.stringify(arrData), processCreateNewKeyProgressType, keyProgressTypeObj);
    // The first Ajax call is completed here
      
    await smartConnectGetPromise("/API/1/levelthree/", "Aw93R3dwYnRhHGdTSmNAA2oGelFXWE1FCgQJBQ~~", arrData, 0, processGetTypeProcessDataPoints, dataObject);
    // The second Ajax call is executed after the first one is completed
  } catch (error) {
    // Handle any errors that may occur during the API calls
    console.error(error);
  }
}

// Call the UpdateL2AndGetL3 function when the button is clicked
yourButtonElement.addEventListener('click', UpdateL2AndGetL3);

 

[asifakhtar]

To ensure that the second Ajax API call is only executed after the completion of the first call and its associated callback functions, you can use JavaScript Promises or the async/await pattern.

Here's an example, but it's not exactly your JavaScript code, it's just what it might look like:

function smartConnectSavePromise(url, apiKey, data, callback, context) {
  return new Promise(function(resolve, reject) {
    smartConnectSave(url, apiKey, data, function(response) {
      // Your existing callback logic here
      callback(response, context);
      resolve(); // Resolve the Promise after the callback is complete
    });
  });
}

function smartConnectGetPromise(url, apiKey, data, index, callback, context) {
  return new Promise(function(resolve, reject) {
    smartConnectGet(url, apiKey, data, index, function(response) {
      // Your existing callback logic here
      callback(response, context);
      resolve(); // Resolve the Promise after the callback is complete
    });
  });
}

async function UpdateL2AndGetL3() {
  try {
    await smartConnectSavePromise("/API/1/leveltwo/", "VmQEZWNQBEhyZ2kDXDR0AUJTBUoMdHwBCgwO", JSON.stringify(arrData), processCreateNewKeyProgressType, keyProgressTypeObj);
    // The first Ajax call is completed here
     
    await smartConnectGetPromise("/API/1/levelthree/", "Aw93R3dwYnRhHGdTSmNAA2oGelFXWE1FCgQJBQ~~", arrData, 0, processGetTypeProcessDataPoints, dataObject);
    // The second Ajax call is executed after the first one is completed
  } catch (error) {
    // Handle any errors that may occur during the API calls
    console.error(error);
  }
}

// Call the UpdateL2AndGetL3 function when the button is clicked
yourButtonElement.addEventListener('click', UpdateL2AndGetL3);

Please note my first Ajax API call callback processCreateNewKeyProgressType also makes 2 Ajax API calls either smartConnectSave("/API/1/levelthree/", "fGZGdwF1bUNQXGZcFn55f0VcenhFa3xKCgQJBA~~", JSON.stringify(arrData), processCreateKeyProgressDataPoints, recordid); //updateAFMM_L3_KeyProgressDataPoint and smartConnectGet("/API/1/leveltwo/", "fFUBUlsIDQZ6BwV3TWN2c1xGeHhdMWZXCgwB", arrData, 0, processKeyProgressTypeList); OR smartConnectGetSorted("/API/1/levelthree/", "Aw93R3dwYnRhHGdTSmNAA2oGelFXWE1FCgQJBQ~~", arrData, arrSortBy, 0, processGetDataPoints, revision); listAFMM_L3_KeyProgressDataPoint and smartConnectGet("/API/1/leveltwo/", "fFUBUlsIDQZ6BwV3TWN2c1xGeHhdMWZXCgwB", arrData, 0, processKeyProgressTypeList); How can I handle this?