javascript - wait till jquery dialog box returns - Stack Overflow

admin管理员组

文章数量:1299997

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

• javascript
• jquery

Share Improve this question Follow asked Mar 18, 2013 at 19:12 vjkvjk 2,29377 gold badges3030 silver badges4343 bronze badges 2

• What do you mean by "after dialog box returns"? – Aaron Blenkush Commented Mar 18, 2013 at 19:19
• I meant statement1 and statement2 should execute after dialog box closes – vjk Commented Mar 18, 2013 at 19:27

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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

I have an example for you:

$(".selector").click(function () {
        var dialog = $('<div title="Title"></div>').dialog({
            open: function (event, ui) {
                $.ajax({
                    url: 'www.google..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.

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.

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; 

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

本文标签： javascriptwait till jquery dialog box returnsStack Overflow