1

I have this JavaScript (KnockoutJS) code. I Have a function that in some cases prompt a confirm dialog, and returns the user's answer or "true" if it didn't have to prompt the dialog at all.

The JS regular dialog is ugly and I'd like to create a custom dialog, but I need a kind of modal dialog that I can get the user's answer - I don't want to define the next operation (what to do if the user clicks OK) in the dialog itself, because - as you can see in my code - I use the same dialog for many different functions that each has a different behavior so every time the next operation is different.

 self.confirmDialog = function () {
       if (condition) {
           return (confirm("text text text"));
       }
       else {
             return true;
       }
  }


 self.doSomething1 = function () {
     if (self.confirmDialog ()) {
         // do something 1
     }
     // some code
 }
 self.doSomething2 = function () {
     // some code
     if (self.confirmDialog ()) {
         // do something 2
     }
 }
 self.doSomething3 = function () {
     if (self.confirmDialog ()) {
         // do something 3
     }
 }
TamarG
  • 3,522
  • 12
  • 44
  • 74

2 Answers2

0

Try this sweet alert

Good UI and feature rich

Trishul
  • 998
  • 1
  • 7
  • 17
  • 2
    It doesn't wait for a response, it takes callback functions. So it can't be used as a drop-in replacement for `confirm()`. – Barmar Aug 27 '15 at 06:30
0

You can do this with jQuery UI Dialogs. Check this example on Modal Forms in the official documentation, the full source code is at the bottom. Basically, you create a div with your form fields:

<div id="dialog-form" title="Create new user">
    <form>
        <fieldset>
            <label for="name">Name</label>
            <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
            <label for="email">Email</label>
            <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
        </fieldset>
    </form>
</div>

Then you can open that as a jQuery UI dialog and handle your form data in the callback to your dialog's submit button.

var dialog = $("#dialog-form").dialog({
    height: 300,
    width: 350,
    modal: true,
    buttons: {
        "Create an account": function() {
            // handle your form here
            var name = $("#name"),
            email = $("#email"),
            password = $("#password");

            var nameValue = name.val();
            //...
        },
        Cancel: function() {
            dialog.dialog( "close" );
        }
    }
});

Going back to the layout of your original code, you could apply it like this:

self.dialogOptions = {
    height: 300,
    width: 350,
    modal: true,
    buttons: {
        "Create an account": function() {
            self.acceptCallback();
        },
        Cancel: function() {
            dialog.dialog( "close" );
            self.cancelCallback();
        }
    }
}

self.doSomething1 = function () {
    self.acceptCallback = function() {
        // do something if the user accepts
    };
    self.cancelCallback = function() {
        // do something if the user cancels
    };

    $("#dialog-form").dialog(self.dialogOptions);
}
self.doSomething2 = function () {
    // do the same, setting different callbacks before opening the dialog
}

If you need to do something regardless of whether the user accepts or not, just put the code into a function and call it from both acceptCallback and cancelCallback.

Mirroar
  • 252
  • 2
  • 9
  • As I said - if the user clicks on OK - every time there will be a different action, depends on the function that called the dialog. So I can't insert the code in the dialog - I must get the user's answer outside the dialog exactly like the JS confirm dialog. – TamarG Aug 27 '15 at 06:17
  • I'm having some trouble understanding why you can't do it in the dialog, say by setting a flag when opening the dialog, and checking that flag in the confirm function. However, the form elements will still exist after closing the dialog, so you can get their values from outside the dialog as well. – Mirroar Aug 27 '15 at 06:29
  • And how can I know when the user clicked the button? I need that my function to wait to the user's answer line the original "confirm". How does you code help? – TamarG Aug 27 '15 at 06:31
  • Since the dialog has `modal: true`, it hides the main page while the dialog is displayed. So he can't do anything until he closes the dialog, and then the callback function does what you want. – Barmar Aug 27 '15 at 06:32
  • 1
    Unfortunately, you can't really halt the execution of you jquery script until the user clicks the button, because these solutions need javascript to run. `confirm` is a bit special but is implemented directly in the browser.You'll have to either put your handling code in the callback (like suggested) or if for some reason you really can't do that, you could create a loop with setTimeout or setInterval and keep checking until the user accepted the dialog - which is essentially also a callback. – Mirroar Aug 27 '15 at 06:39
  • I've edited my answer, trying to recreate what you were outlining in the question. – Mirroar Aug 27 '15 at 06:48