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

Question

我在 mvc 页面中添加了 jquery UI 对话框。打开对话框后，如果对话框是 dismissed 或 confirmed.

，我需要捕获 bool 值

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

问题：

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

伪代码：

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

1.Call dialog open on a button click. - (working)

2.Pass back true or false depending on if the user selected 'ok' or 'cancel' in the modal dialog.

3.Close the dialog if the returned result to the button click event is false. Otherwise call window.location.href = RedirectTo; code.

代码：

对话框标记 -

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

Answer 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，逻辑上直接在按钮点击处理程序中编写代码更好。

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

How to pass back modal dialog confirmation result to calling function?

javascript

jquery

function

callback

jquery-ui-dialog