[Solved] Synchronous VBscript changed to incorrectly asynchronous Javascript [duplicate]

Question

Indeed, the second part of the code (with the alert) is executed irrespective of the outcome of the confirm prompt.

The main difference with $.confirm and VBA’s MsgBox, is that MsgBox is blocking the further execution of code, while $.confirm does not do that. So that means that the code that follows it (the if (sResponse == 2) part), is executed immediately. At that time no change was made to sResponse (as no button was clicked), so that comes too early.

However, $.confirm accepts some functions as arguments, which will be called when a button is pressed on the popup. Actually, your code already passes such functions, but they don’t do anything else than setting sResult. So you should move the second part of the code (with the alert) in such a function.

First let’s format your code a bit so it becomes more readable, and you can better spot those callback functions:

if ((sStatus).toUpperCase() != "SUCCESFUL") {
    $.confirm({
        title:  "Confirmation",
        columnClass: 'col-md-6 col-md-offset-3', 
        content:"Forecast calculation still busy. Results might not be accurate. Continue?",
        buttons: {
            confirm: function() {
                // This executes when button is clicked
                sResponse= 1;
            },
            cancel: function() {
                // This executes when button is clicked
                sResponse= 2;
                return;
            }
        }
    });
    // This executes immediately (without waiting for button click)
    if (sResponse == 2  ){
        $.alert({
            title: "INFORMATION",
            columnClass: 'col-md-6 col-md-offset-3',
            content:("Screen will refresh. Please click on Update to try again.").toString(),
        });
        document.getElementById("Smoke.Calc Status").value= "REFRESH";
        msErr = "ABORT";
    }   
}
// Also this executes too early when confirm was executed:
if (vMsg != ""){
    $.alert({
        title: 'Validation Message',
        columnClass: 'col-md-6 col-md-offset-3',    
        content:(vMsg),
    });
    msErr = "ERROR";
}

I added comments to show where the important parts of the code are.

Now move that second part inside the callback function that relates to response #2:

if (sStatus.toUpperCase() != "SUCCESFUL") {
    $.confirm({
        title:  "Confirmation",
        columnClass: 'col-md-6 col-md-offset-3', 
        content:"Forecast calculation still busy. Results might not be accurate. Continue?",
        buttons: {
            confirm: function() {
                sResponse= 1;
                processMessage(); // <--- added this
            },
            cancel: function() {
                sResponse= 2;
                // Moved code here, as it needs to execute when Cancel is clicked
                $.alert({
                    title: "INFORMATION",
                    columnClass: 'col-md-6 col-md-offset-3',
                    content: "Screen will refresh. Please click on Update to try again.",
                    // Code that should execute when alert is closed:
                    onAction: function () {
                        document.getElementById("Smoke.Calc Status").value= "REFRESH";
                        msErr = "ABORT";
                        processMessage(); // <--- added this
                    }
                });
            },
        }
    });
} else { // <-- added
    processMessage();
}

function processMessage() {
    // Moved code in a function, as it should only execute after confirm/alert is closed 
    if (vMsg != "") {
        $.alert({
            title: 'Validation Message',
            columnClass: 'col-md-6 col-md-offset-3',    
            content: vMsg,
        });
        msErr = "ERROR";
    }
}

I didn’t test this code, as it has dependencies I do not know of.

Accepted Answer