wait till jquery dialog box returns

Question

I need to open a popup window on clicking a button and used jquery dialog for this.

    $(document).ready(function(){
    $("#dialog-form").dialog({
        autoOpen : false,
        height : 300,
        width : 350,
        modal : true,
        buttons : {
            "Add" : function() {
                $("#tag1").text($("#textArea").val());
                $(this).dialog("close");
            },
            Cancel : function() {
                $(this).dialog("close");
            }
        },
        close : function() {
            $("#textArea").val("");
        }
    });

});

    function openWindow(){
        $("#dialog-form").dialog("open");
        statement1;
        statement2;
        }


<button id="add" onclick="openWindow()">Add</button>

problem over here is when i click the button dialog box is opened, but before even i enter some text in the dialog box statement1 and statement2 are getting executed and then focus is coming to the dialog box.

How can i make the statement1 and statement2 to execute only after dialog box returns?

I don't want to add the statement1 and statement2 to the "Add" function. The reason for not adding the statements in the "Add" function is because i have multiple buttons and each of these should first open the dialog box and then will execute different set of statements.

I meant statement1 and statement2 should execute after dialog box closes — vjk, Mar 18 '13 at 19:27

Aaron Blenkush · Answer 1 · 2013-03-18T19:30:03.853

5

Easy fix would be to use the close callback:

$(document).ready(function () {
    $("#dialog-form").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Add": function () {
                $("#tag1").text($("#textArea").val());
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            $("#textArea").val("");
            //statement1 -- won't fire until dialog is closed
            //statement2 -- won't fire until dialog is closed
        }
    });
});

function openWindow() {
    $("#dialog-form").dialog("open");
}

Another thing to consider would be $.Deferred

edited Mar 18 '13 at 19:30

answered Mar 18 '13 at 19:18

Aaron Blenkush

3,034
2
28
54

I just realized that... hopefully he can clarify – Aaron Blenkush Mar 18 '13 at 19:20
@aaron I need to run the statemens after dialog is closed – vjk Mar 18 '13 at 19:26
Why not use the `close` callback? It seems like that might be too obvious.. is there something else you're looking for? See my edit – Aaron Blenkush Mar 18 '13 at 19:31
I want to execute different set of statements for different buttons. On button1 click i want to execute statement1, statement2 and on button2 click statement3, statement4 – vjk Mar 18 '13 at 19:35

Tiago B · Answer 2 · 2013-03-18T19:36:07.763

I have an example for you:

$(".selector").click(function () {
        var dialog = $('<div title="Title"></div>').dialog({
            open: function (event, ui) {
                $.ajax({
                    url: 'www.google.com.br',

                    cache: false,
                    success: function (html) {
                        $(dialog).html(html);
                    },
                    error: function () {
                        $(dialog).remove();
                        alert("Some Error MSG");
                    }
                });
            },
            close: function () {
                $(dialog).remove();
            },
            resizable: false,
            width: 500,
            modal: true
        });
    });

In this case, the dialog is receiving the HTML result, only after it opens.

score 0 · Answer 3 · edited Aug 30 '18 at 14:46

This can be achieved by the following way:-

$('#mydialog').dialog("open");
$('#mydialog').load('serverURL',server_data_variable, function() {
    myfunction();
});

This will execute the function once the dialog loading is done.It will register the callback to be executed post dialog done.The variable server_data_variable is optional and is supposed to be used only if user wants to send some data otherwise it can be skipped as.well.

score 0 · Answer 4 · answered Apr 22 '21 at 13:53

Solution 1: (same as solution from Aaron Blenkush)

$("#dialog-form").dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
        "Add": function () {
            $("#tag1").text($("#textArea").val());
            $(this).dialog("close");
            //statement1 -- will fire only if "add" button is clicked
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    },
    close: function () {
        $("#textArea").val("");
        //statement1 -- will fire after dialog is closed
    }
});

Solution 2 is to make a promise:

const dialogPromise = new Promise(function (resolve, reject) {
    $("#dialog-form").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Add": function () {
                $("#tag1").text($("#textArea").val());
                $(this).dialog("close");
                resolve(true);
            },
            Cancel: function () {
                $(this).dialog("close");
                resolve(false);
            }
        },
        close: function () {
            $("#textArea").val("");
        }
    });
});
const addClicked = await dialogPromise;

score -1 · Answer 5 · answered Jan 26 '15 at 18:03

Call callback function after "open" clause in the dialog setup.

 modal: true,
 resizable: false,
 resize: 'auto',
 close: dialogCloseFunction,
 **open: function(){if(itemid) {showDailogSides(itemid);}** if(!siteParams[3]) {$(".detailSideClass").hide(); $(".addToChartinDialog").hide();}},
 //hide: {effect: "fadeOut", duration: 5000}
 show: { effect: "fade", duration: 1000 } //drop blind fade fold slide clip

wait till jquery dialog box returns

5 Answers5