Question

我需要在单击按钮时打开一个弹出窗口并使用jquery对话框。

    $(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>

这里的问题是当我点击按钮对话框打开时，但在对话框中输入一些文本之前，statement1和statement2正在执行，然后焦点进入对话框。

如何在对话框返回后才能使statement1和statement2执行？

我不想将statement1和statement2添加到“Add”函数中。不在“添加”功能中添加语句的原因是因为我有多个按钮，每个按钮应首先打开对话框，然后执行不同的语句集。

Answer 1

轻松修复将使用close回调：

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

另一件需要考虑的事情是$.Deferred

Answer 2

我有一个例子给你：

$(".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
        });
    });

在这种情况下，对话框只有在打开后才会收到HTML结果。

Answer 3

这可以通过以下方式实现：-

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

这将在对话框加载完成后执行该函数。它将在对话框完成后注册要执行的回调。变量 server_data_variable 是可选的，仅在用户需要时才使用发送一些数据，否则可以跳过。

Answer 4

解决方案 1：（与 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
    }
});

解决方案 2 是做出承诺：

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;

Answer 5

在对话框设置中的“open”子句后调用回调函数。

 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

等到jquery对话框返回

5 个答案: