gpt4 book ai didi

javascript - 如何将模态对话框确认结果传递回调用函数?

转载 作者:行者123 更新时间:2023-12-02 14:37:28 27 4
gpt4 key购买 nike

我已将 jquery UI 对话框添加到 mvc 页面。对话框打开后,如果对话框被关闭确认,我需要捕获bool值。

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

问题:

如何从 Jquery UI 模式对话框将 bool 值传递回调用函数?

伪代码:

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

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>

最佳答案

只需在按钮点击处理程序中编写目标代码或设置一个标志并使用 $(".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,从逻辑上讲,直接在按钮单击处理程序中编写代码更好。

关于javascript - 如何将模态对话框确认结果传递回调用函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37329393/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com