How to synchronize jQuery dialog box to act like alert() of Javascript

Question

I am currently working on developing custom dialog box to be used with my application using jQuery. The problem is that the call to create dialog is asynchronous i.e. the line of code after it is executed before it is displayed. Here is what I have done, I have created a function DisplayConfirm() which when called creates a modal dialog. I want to use it like the following:

if(DisplayConfirm()){
//do this
else
// do that

But I cannot because the line of code written after DisplayConfirm() is executed before the dialog is even created. How can I synchronize this operation so that I don't have to use callback functions?

You have to use callbacks unless you want to use the plain old js `confirm()` dialog — Paul, Aug 05 '11 at 05:55
Why do you want to avoid callbacks? If you're going to be doing any serious JS programming then you're going to need to embrace them and learn to love them. — alnorth29, Aug 05 '11 at 06:05
I tried looking at StratifiedJS but can't make it work either. I thought I might be missing something but apparently there is not solution. I have to design this function for other programmers and they don't want to get into call backs and want their logic to remain intact (no jumping such as in case of callbacks). — U.P, Aug 05 '11 at 06:13

sharat87 · Answer 1 · 2011-08-05T09:35:52.210

Why do you want to avoid callbacks? They are neat :)

function displayConfirm(confirmStr, okCallback, cancelCallback) {
    $('<div class=alert />')
        .append('<p>' + confirmStr + '</p>')
        .append('<button class=ok-btn>Ok</button>')
        .append('<button class=cancel-btn>Cancel</button>')
        .appendTo(document.body)
        .delegate('.ok-btn', 'click', function (e) {
            okCallback(e);
        })
        .delegate('.cancel-btn', 'click', function (e) {
            cancelCallback(e);
        });
}

There! You see, not too bad :)

Note: I wrote this just from the top of my head. Haven't tested it.

Edit: If this isn't clear enough, what I am suggesting here is that you have to use callbacks unless you want to use the native confirm function, just as @PaulPRO stated in a comment to the question.

Once the displayConfirm function is defined as above, you could use it with callbacks like so,

displayConfirm('Are you sure?', function (e) {
    // do if confirmed
}, function (e) {
    // do if not confirmed
});

I wanted to illustrate that it is indeed not too difficult to write a simple callback like functionality and you should be doing this.

Let me know if it still isn't clear.

Works ok but not if being used within a loop and you need a confirmation to continue the loop — David Labbe, Jul 22 '22 at 12:37

score 2 · Accepted Answer · edited Jan 22 '14 at 13:45

2

You cannot write a function in javascript that interacts with the user and blocks the javascript interpreter. confirm can do that because it is a browser built-in, written in C++ (or whatever).

edited Jan 22 '14 at 13:45

Xyz

5,955
5
40
58

answered Aug 05 '11 at 12:44

Sean McMillan

10,058
6
55
65

See post here, it works. http://stackoverflow.com/questions/13758928/jquery-deferred-and-dialog-box/18474005#18474005 – Pierre Jan 16 '14 at 05:47
2

@Pierre: Nice; Switching to promises means you can wait for an answer without having to block the javascript event loop. – Sean McMillan Jan 16 '14 at 17:11

score 0 · Answer 3 · answered Aug 05 '11 at 06:00

use alternative option, create one function of your that executed after User generate some event. and call into a dialog box event, that give you to same beheviour.

ex. $("#dialog-modal").dialog({ resizable: false, width: 350, modal: true, buttons: [{ text:"OK", width:80, height:26, click: function() { $(this).dialog("close"); } } ] });

so you are suggesting that I call the dialog twice? I'm sorry but I am unable to understand your answer. — U.P, Aug 05 '11 at 06:14
@Comet See post here: http://stackoverflow.com/questions/13758928/jquery-deferred-and-dialog-box/18474005#18474005 — Pierre, Jan 16 '14 at 05:48

How to synchronize jQuery dialog box to act like alert() of Javascript

3 Answers3

Linked