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?

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?

• javascript
• jquery

• 2 You have to use callbacks unless you want to use the plain old js confirm() dialog – Paul Commented Aug 5, 2011 at 5: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 Commented Aug 5, 2011 at 6: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 Commented Aug 5, 2011 at 6:13

3 Answers 3

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 ment 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.

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).

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"); } } ] });