2

我需要在单击按钮时打开一个弹出窗口并为此使用 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”函数中。没有在“添加”函数中添加语句的原因是因为我有多个按钮，每个按钮都应该首先打开对话框，然后执行不同的语句集。

4

5 回答 5

5

简单的解决方法是使用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

于 2013-03-18T19:18:15.480 回答
0

我有一个例子给你：

$(".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 结果。

于 2013-03-18T19:29:58.473 回答
0

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

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

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

于 2018-08-30T14:24:06.993 回答
0

解决方案 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;
于 2021-04-22T13:53:20.860 回答
-1

在对话框设置中的“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
于 2015-01-26T18:03:43.757 回答