Question

I have 2 functions. First contains Jquery-UI dialog and called from the Second function. Something like :

function First() {
    $('div').dialog({
        buttons: {
            "Ok": function () { /* code */
            }
        }
    });
}

function Second() {
    First();
    /* rest of this function code is depend upon the "Ok button" 
       function code */
}

Now my problem is that after calling function First the execution of script doesn’t wait for dialog's Ok button press. Whats should i do, so that only after pressing the Ok button, the control return from the function First?

Answer 1

Move from the function Second the part after calling First into a 2nd function (here called SecondOkHandler). Call First with a new parameter (this callback function) and in the function First on ‘ok’ call this:

function First(okCallback) {
    $('div').dialog({ 
        buttons : {
            "Ok" : okCallback
        }
    });
}

function Second () {
    First(SecondOkHandler);
}

function SecondOkHandler() {
    /* rest of this function code is depend upon the "Ok button" function code */
}

Also see this example.

=== UPDATE ===

To make it more complex, here a link to an example with more callbacks.