如何将模态对话框确认结果传回调用函数？答案

【问题标题】：How to pass back modal dialog confirmation result to calling function?如何将模态对话框确认结果传回调用函数？
【发布时间】：2016-05-19 16:44:52
【问题描述】：

我在 mvc 页面中添加了一个 jquery UI 对话框。打开对话框后，如果对话框被 dismissed 或 confirmed，我需要捕获 bool 值。

到目前为止，我已尝试添加另一个答案中提到的回调，但我不确定如何将该值传递回$('#escalation').on('click', '.delete', function (evt)，以便如果为真我可以执行重定向。

问题：

如何将布尔值从 Jquery UI 模式对话框传回调用函数？

伪代码：

这是我对以下功能的预期执行流程：

1.点击按钮打开调用对话框。 - （工作）

2.根据用户在模态对话框中选择“确定”还是“取消”返回真或假。

3.如果按钮点击事件的返回结果为假，则关闭对话框。否则调用window.location.href = RedirectTo;代码。

代码：

对话框标记 -

                            <div id="dialog-confirm" title="Delete Selected Record?">
                                <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This record will be permanently deleted.</p> <p>Are you sure?</p>
                            </div>

Jquery 脚本 -

<script>
    var baseUri = '@Url.Content("~")';

    $(document).ready(function () {
        $('#escalation').DataTable({
            "order": [[6, "desc"]]
        });


        $('#escalation').on('click', '.delete', function (evt) {
            var cell = $(evt.target).closest("tr").children().first();
            var EscalationID = cell.text();
            var RedirectTo = baseUri + "/EscalationHistory/DeleteEscalation?EscalationID=" + EscalationID;


            ////open dialog 
            evt.preventDefault();
            $("#dialog-confirm").dialog("open");

            //Need to call this code if the dialog result callback equals true
            window.location.href = RedirectTo;

           //Otherwise do nothing..close dialog
         
        });


        //Dialog opened here, not sure how to pass back the boolean values
        //to the delete click function above
        $("#dialog-confirm").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                "Confirm": function () {
                    callback(true);
                },
                "Cancel": function () {
                    $(this).dialog("close");
                    callback(false);
                }
            }
        });

      
    });
</script>

【问题讨论】：

标签： javascript jquery function callback jquery-ui-dialog

【解决方案1】：

只需在按钮单击处理程序中编写您的目标代码或设置一个标志并使用$(".selector").on("dialogclose", function(event, ui) {}); 事件处理程序来检查标志状态。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(function() {
    var baseUri = "http://localost";
    $("#dialog-confirm").dialog({
        autoOpen: false, 
        modal: true, 
        resizable: false, 
        width: 450, 
        open: function() {
            $(this).data("state", "");
        }, 
        buttons: {
            "OK": function() {
                $(this).data("state", "confirmed").dialog("close");
            }, 
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
    $(".btn").click(function() {
        var escalationId = $(this).data("escalation-id");
        var redirectTo = baseUri + "/EscalationHistory/DeleteEscalation?EscalationID=" + escalationId;
        // Use "bind" instead "on" if jQuery < 1.7
        $("#dialog-confirm").dialog("open").on("dialogclose", function(event, ui) {
            if ($(this).data("state") == "confirmed") {
                location.replace(redirectTo);
            }
        });
    });
});
</script>
</head>
<body>
<button class="btn" data-escalation-id="123">Delete 123</button>
<button class="btn" data-escalation-id="124">Delete 124</button>
<div id="dialog-confirm" style="display:none">Are you sure?</div>
</body>
</html>

但是，IMO，从逻辑上讲，直接在按钮单击处理程序中编写代码更好。

【讨论】：

你能举例说明在这种情况下我将如何使用标志吗？