Custom confirm box in JQuery that returns a boolean value

Question

I am using JQuery & JQuery UI and I tried using JQuery UI Dialog to solve this problem but I was unable to accomplish it.

Basically I have for example this code that uses JS confirm box:

// if user presses cancel, do not proceed to the next section of the code
if ( ! confirm('Are you sure you want to press OK?')) {
  return;
}

.... Lots of code below

I want to turn this to use a custom box that I can customize using CSS. I tried with UI dialog:

function confirmIt(text) {
   $('#confirm_dialog').dialog({
      width: 300,
      height: 150,
      buttons: {
         "OK": function() { return true; },
         "Cancel": function() { return false; }
      }
   });
}

if ( ! confirmIt('Are you sure you want to press OK?')) {
   return;
}
.... Lots of code below

Now the problem with above code is that a lot of code below the if condition still executes. I understand that JQuery Dialog is aync process, but I was wondering if there are such plugins for free out there that I could use that will return boolean value? Basically functionality wise it should work exactly same as JS confirm(). I do not want to wrap that a lot of code within the callback of JQuery UI dialog to achieve this. I just want to stop script execution if CANCEL is clicked and continue execution if OK is clicked.

That's not possible in that way cause these dialogs have "callbacks" which get called on certain actions (clicking OK for instance). The native methods `prompt`, `alert`, and `confirm` will wait for a user input and pause the script execution — Xaver, Aug 25 '14 at 17:09
@revaxarts there is no way to pause the script execute similar to what JS native methods do ? — GGio, Aug 25 '14 at 17:10
Regarding your deleted question just now, consider asking about Masters courses in one of the SO chatrooms. — halfer, Aug 27 '14 at 17:49

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

Since it's not possible to stop script execution (except for debugging) you should alter your method:

function confirmIt(text, okFunc, cancelFunc) {
   $('#confirm_dialog').dialog({
      width: 300,
      height: 150,
      buttons: {
         "OK": okFunc && okFunc,
         "Cancel": cancelFunc && cancelFunc
      }
   });
}

confirmIt('Are you sure you want to press OK?', function(){
    .... Lots of code below
}, function(){
    ...function on cancel (which can be empty)
});

so if you haven't any action on the cancel button just use

confirmIt('Are you sure you want to press OK?', function(){
    .... Lots of code below
});

or

confirmIt('Are you sure you want to press OK?', confirmFunction);

function confirmFunction(){
    .... Lots of code below
}

edited May 23 '17 at 12:05

Community

1
1

answered Aug 25 '14 at 17:17

Xaver

11,144
13
56
91

`okFunc && okFunc()` -> `okFunc && okFunc` or simply `okFunc` – Kevin B Aug 25 '14 at 17:25
I see, that is what I had in mind. I wanted to try to avoid putting "lots of code" within a confirmIt function but I guess there is no other way. Thanks for your answer buddy. +1 – GGio Aug 25 '14 at 17:27
@KevinB `okFunk && okFunc()` will execute `okFunc`only if it exists. `okFunk && okFunk` would simple return true (if defined) but wouldn't execute `okFunc`. Ok? ;) – Xaver Aug 25 '14 at 22:21
@GGio you can avoid the anonymous function with `confirmIt('Are you sure you want to press OK?', confirmFunction)` to move the code in a dedicate method. I've updated my answer – Xaver Aug 25 '14 at 22:25
@revaxarts my point is you're executing the function immediately rather than passing it to be executed later when the button is clicked. – Kevin B Aug 25 '14 at 23:05

Custom confirm box in JQuery that returns a boolean value

1 Answers1