Synchronous VBscript changed to incorrectly asynchronous Javascript

Question

So my boss asked me to look into an issue where they are porting old VBscript scripts into Javascript scripts but where the Javascript has incorrect program flow. The only problem is that I'm really ignorant about both, but if your boss asks you, then you have to make a plan. ;-)

In the VBscript, the user was given a choice and if "No" the next screen/view wasn't shown. However, with the Javascript, the next screen/view is loaded irrespective of whether the user chooses "No/Cancel" or not. This should not happen.

Here is the VBscript, the important part is between the //:

vEffectiveDate  = ScreenForm("smoke.Effective Date").Value
vLastRunDate    = ScreenForm("smoke.Last Run Date").Value
sStatus         = ScreenForm("smoke.Calc Status").Value

vMsg = ""

If Len(sStatus) = 0 Then
    sStatus = "SUCCESFUL"
    ScreenForm("smoke.Calc Status").Value = sStatus
End If

If Len(vEffectiveDate) > 0 Then

    If Not IsDate(vEffectiveDate) Then 
        vMsg = vMsg & "[Effective Date] Is not a date." & Chr(13)
    
    ElseIf cdate(vEffectiveDate) <= cdate(vLastRunDate) Then
        vMsg = vMsg & "[Effective Date] cannot be on/before " & vLastRunDate &"." & Chr(13)
    End IF

End If

//////////////////////////////////////////////////////////////////////////////
If UCASE(sStatus) <> "SUCCESFUL" Then
    sResponse = MsgBox ("Forecast calculation still busy. Results might not be accurate. Continue?", (vbYesNo), "WARNING")
    If sResponse = vbNo Then
        MsgBox cstr("Screen will refresh. Please click on Update to try again."), (vbOKOnly), "INFORMATION"
        ScreenForm("smoke.Calc Status").Value = "REFRESH"
        'msErr = "ABORT"
    End If
End If
//////////////////////////////////////////////////////////////////////////////

If vMsg <> "" Then
MsgBox (vMsg)
msErr = "ERROR"
End If

Here is the Javascript, the important part is between the //:

 var vEffectiveDate="";
var vLastRunDate="";
var sStatus="";
var vMsg="";
var sResponse="";
vEffectiveDate = document.getElementById("Smoke.Effective Date").value;
vLastRunDate = document.getElementById("Smoke.Last Run Date").value;
sStatus  = document.getElementById("Smoke.Calc Status").value;
vMsg = "";
if ((sStatus).length == 0  ){
    sStatus = "SUCCESFUL";
    document.getElementById("Smoke.Calc Status").value= sStatus;
}
if ((vEffectiveDate).length > 0  ){
    if (!isDate(vEffectiveDate)  ){
        vMsg = vMsg+"[Effective Date] Is not a date." + ";\r\n";
    } else if (  moment( toDate(vEffectiveDate)).isBefore(toDate(vLastRunDate)) ){
        vMsg = vMsg+"[Effective Date] cannot be on/before "+vLastRunDate+"." + ";\r\n";
    }
}
///////////////////////////////////////////////////////////
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;},
cancel: function() {sResponse= 2;return;}}});
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";
    }   
}
//////////////////////////////////////////////////////////


if (vMsg != ""  ){
$.alert({title: 'Validation Message',columnClass: 'col-md-6 col-md-offset-3', content:(vMsg),});
msErr = "ERROR";
}

So, I've seen that there is an async-await-promises concept in Javascript, but it seems that it is not supported by Internet Explorer, and we need to keep in mind that some of our users actually still use IE...sigh... So it seems that I won't be able to use an async-await concept, not that I'm sure that it would be necessary in this situation.

Then, I also read here about a submit button for a form, and that that might be my problem too?

I'm so clueless about Javascript, I don't even know how to change the button's default behaviour if that is the problem.

I would appreciate someone helping me in the right direction so that I can learn and grow.

Answer 1

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.