Question

我在mvc页面添加了一个jquery UI对话框。打开对话框后，如果对话框已解除或已确认，则需要捕获bool值。

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

问题：

如何从Jquery UI模式对话框中将bool值传回给调用函数？

伪码：

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

1.单击按钮打开电话对话框。 - （工作）

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

3.如果返回到按钮单击事件的结果为false，则关闭对话框。否则请拨打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>

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

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

1 个答案: