Bootbox Confirm Popup - Doesnt Proceed

[marcoczen]

Guys, I have a native javascript confirm box working fine in a php application. When the user clicks 'Ok', the action proceeds and if cancel is clicked - the action aborts.

But when i replace the javascript confirm box with bootbox.confirm, the popup appears and when i click 'Ok' the action doesnt proceed ? If i click 'Cancel' the PopUp doesnt disappear ?

What is wrong with my code shown below? I followed the guide at https://bootboxjs.com/examples.html

function singleConfirm(msg1) {


  bootbox.confirm( msg1, function(result) {
     if(result){

      return true;
     } else {

      return false;
    }

    })


} //end of singleConfirm



document.addEventListener('DOMContentLoaded', function () { 

const elems = document.getElementsByClassName('confirmProceed');

Array.prototype.forEach.call(elems, (elem) => {    
 
    elem.addEventListener('click', (event) => {
     
       if ( !singleConfirm('Proceed with Action?') ){
            event.preventDefault();
       } 
       
       
    });
    
}); // end Array.prototype.forEach 


});  // end document.addEventListener

[marcoczen]

p.s. - why is it so difficult to indent code ?

[Tarmo Leppänen]

You should realize that your singleConfirm doesn't really return anything and therefore this if ( !singleConfirm('Proceed with Action?') ){ statement doesn't make sense.

[marcoczen]

So ...

  if(result){

       return true;
   } else {

       return false;
   }

wont return true / false ?

Hmmmm ... why is it so difficult to replace the Javascript Confirm Popup .... damnnnn

[Tarmo Leppänen]

Your function is literally doing

function singleConfirm(msg1) {
  bootbox.confirm( msg1, function(result) {
    ...
  });
}

You should see that your function is not returning anything, but you could try something like explained in this - https://stackoverflow.com/a/25845348 - not sure if that works or not.

Also you should realize that bootbox.confirm doesn't do the same as javascript confirm, see this - https://bootboxjs.com/documentation.html#confirm-callout-callback - "Any code that depends on the user's selection must be placed in the callback function."

[marcoczen]

Thanks. I am checking out https://stackoverflow.com/questions/tagged/bootbox

[Tieson Trowbridge]

If it's not completely clear: Bootbox is (mostly) a dynamic Bootstrap modal generator. Bootstrap modals are just <div> elements styled to approximate a dialog, using CSS to position them in the screen. The code that does this, and responds to user interaction, is entirely asynchronous and can't mimic the "stop processing code until the dialog closes" behavior of the native alert, confirm, and prompt functions.

So, if you do this:

let confirmed = confirm('Really do the thing?');
console.log(confirmed);

Then you won't see true or false in the console until the confirm is dismissed. On the other hand, if you do this:

let confirmed = false;
bootbox.confirm('Really do the thing?', function(result){ confirmed = result; });
console.log(confirmed);

Then you're always going to see false in the console immediately - it will happen while the Bootbox confirm modal is still open, because Bootbox has no way of blocking the flow of execution.

If you really want a modal that can be styled AND behaves like the native functions, then you need to learn how to use <dialog>. I might eventually work on a Bootbox version that uses dialog, now that browser support is there, but it's not happening anytime soon, and since I seem to be the most active maintainer at this point... well, I understand your frustration, but it is what it is, at this point.

[Tarmo Leppänen]

Or use promise to do that all

function singleConfirm(msg1) {
  return new Promise((resolve) => {
    bootbox.confirm(msg1, function (result) {
      resolve(result);
    });
  });
}

document.addEventListener('DOMContentLoaded', function () {
  const elems = document.getElementsByClassName('confirmProceed');

  Array.prototype.forEach.call(elems, (elem) => {
    elem.addEventListener('click', async (event) => {
      const result = await singleConfirm('Proceed with Action?');
      if (!result) {
        event.preventDefault();
      }
    });
  });
});

Literally chat gpt answer for initial question, and it looks like it should work.

And still this is not the same as native javascript alert, confirm, etc. that is something that we cannot do.

[Tieson Trowbridge]

@tarlepp I suspect that's how the Angular/React versions of Bootbox function, although it's been quite a while since I looked. Interesting idea - suppose I should really start learning how the Promise API works.

[Tarmo Leppänen]

I would say don't waste your time for promises now, use observables instead - but that is totally my own preference.

[Tarmo Leppänen]

Although promises might be the proper solution for bootbox library, because bootbox just does one thing at time - show some "dialog"