How to wait for callback until user press any button on the bootboxJS prompt instead of executing the remaining script after showing the prompt

Question

This function is in a very big hierarchy of js functions so can't use html from views else I will lose all parameters as there are many parameters being passed in each script.

Using bootbox.js for this prompt -- because it has password masking in the prompt the not working code. I need to wait for callback instead of completing the execution of remaining script after showing the prompt.

function authorize() {
  alert("Script has started...");
  var final_result = 0;
  bootbox.prompt({
    title: "This is a prompt with a password input!",
    inputType: 'password',
    callback: function(result)
    {
      if (result!=null) 
      {
        final_result = 1;
      } else {
        final_result = 0;
      }
    }
  });
 alert("calling XYZ");  
function xyz();
alert("Script has finished... final result is" + final_result);  
 }

The working code with default JavaScript prompt -- want like this (using bootboxjs just to mask the input as I'm using this for password):

function authorize() {

  alert("Script has started...");
  var final_result = 0;
  let text = prompt("This is a prompt with a password input!", "")
  if (text!= null) {
    final_result = 1;
  } else {
    final_result = 0;
  }
  alert("calling xyz" );  
function xyz();
 alert("Script has finished... final result is" + final_result );  
}

Answer 1

This is covered in the documentation , many times:

All Bootstrap modals (and therefore Bootbox modals), unlike native alerts, confirms, or prompts, are asynchronous; meaning, the events which Bootstrap generates are non-blocking events. Because of this limitation, code that should not be evaluated until a user has dismissed your dialog must be called within the callback function of the dialog.

Given your example, this is what I'm assuming you're after:

function authorize() {
  alert("Script has started...");
  
  let final_result = 0;
  bootbox.prompt({
    title: "This is a prompt with a password input!",
    inputType: 'password',
    callback: function(result) {
      if (result != null) {
        final_result = 1;
      } 
      else {
        final_result = 0;
      }
      
      // call xyz() here, with your prompt's value
      xyz(final_result);
    }
  });
}

// Changed this to accept a parameter, to match what 
// it seems you're trying to do
function xyz(final_result) {
    alert("Script has finished... final result is" + final_result);  
}

To reiterate: Bootstrap modals are just positioned <div> elements, and the modal() function is just hiding and showing them.

If you really want a customizable prompt that does block program execution, your only option is <dialog> ( see MDN ). It's only recently gained enough browser support to be usable, though, so use at your own risk.