Javascript 使用 JQuery UI 对话框从确认对话框返回值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3560872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Returning value from confirmation dialog using JQuery UI dialog
提问by Nishant
I am using jQuery UI dialogto display a confirmation dialog when a button is clicked. I want to return true, when OK is clicked and falseotherwise.
我正在使用jQuery UI 对话框在单击按钮时显示确认对话框。我想返回true，当点击 OK 时，false否则。
Associating dialog open call in onClick(as given here, $dialog.dialog('open');) event does not serve the purpose. So, as a workaround, I followed an approach, which is similar to this: http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery. There are two differences between this approach and mine:
在关联对话框打开调用onClick（如给出这里，$dialog.dialog('open');）事件不会达到目的。因此，作为一种解决方法，我采用了一种与此类似的方法：http: //www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery。这种方法和我的方法有两个区别：
- The example uses anchor tag and,
- It does not use jQuery UI dialog.
- 该示例使用锚标记和，
- 它不使用 jQuery UI 对话框。
I have modified the code given in the example link, but it does not work. I wonder what I am doing wrong. Is there any cheaper way to do this?
我已经修改了示例链接中给出的代码，但它不起作用。我想知道我做错了什么。有没有更便宜的方法来做到这一点？
Here is the code, all the CSS/JS are referencing to jQuery CDN, so you should be able to copy the code to see the behavior.
这是代码，所有 CSS/JS 都引用了 jQuery CDN，因此您应该能够复制代码以查看行为。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/blitzer/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Control Panel</title>
</head>
<body>
<form action="http://google.com">
<button class="es-button ui-state-default ui-corner-all" name="changeSem" id="id2">Start Thermonuclear War</span>
</button>
</form>
<div title="Why so serious?" id="id3" style="display:none;">
<p>You are about to start a war.
<p>Click OK to confirm. Click Cancel to cancel this action.</p>
</div>
</body>
<script type="text/javascript">
$('#id2').click(function (event) {
if ($(this).data('propagationStopped')) {
//alert('true');
$(this).data('propagationStopped', false);
return true;
} else {
event.stopImmediatePropagation();
$('#id3').dialog({
//autoOpen: false,
width: 600,
buttons: {
"Ok": function () {
$(this).dialog("close");
$('#id2').data('propagationStopped', true);
$('#id2').triggerHandler(event);
},
"Cancel": function () {
$(this).dialog("close");
return false;
}
}
});
//alert('false');
return false;
}
});
</script>
</html>
Clarification: Please note that it's very simple (see the solution by bryan.taylor) to do a form submission. What I want to do here is to simulate submission by button click. More like JavaScript's confirm()method.
说明：请注意，提交表单非常简单（请参阅bryan.taylor的解决方案）。我在这里要做的是通过单击按钮来模拟提交。更像是 JavaScript 的confirm()方法。
回答by Eric J.
JavaScript is asynchronous. The call to
JavaScript 是异步的。对
$myDialog.dialog('open');
will not block, but rather will return immediately.
不会阻塞，而是会立即返回。
Instead, one must use event callbacks that you provide in the buttonsoption of dialog.
相反，必须使用您在buttonsdialog 选项中提供的事件回调。
This near-duplicate provides a good example:
这个近乎重复的例子提供了一个很好的例子：
jquery ui dialog box need to return value, when user presses button, but not working
回答by bryan.taylor
Your code is a bit convoluted, I think there is a much easier way to do this. You should instantiate the dialog first, then open it on the click event for your button. Code would look similar to this:
您的代码有点复杂，我认为有一种更简单的方法可以做到这一点。您应该先实例化对话框，然后在按钮的单击事件上打开它。代码看起来类似于：
<script>
$(document).ready(function () {
var $myDialog = $('<div></div>')
.html('You are about to start a war.<br/>Click OK to confirm. Click Cancel to stop this action.')
.dialog({
autoOpen: false,
title: 'Why so serious?',
buttons: {
"OK": function () {
$(this).dialog("close");
window.open('http://google.com/');
return true;
},
"Cancel": function () {
$(this).dialog("close");
return false;
}
}
});
$('#myOpener').click(function () {
return $myDialog.dialog('open'); //replace the div id with the id of the button/form
});
});
</script>
<div id="myOpener"></div>
Here is the jQuery UI Dialog API documentation, so you can see all your options:
这是 jQuery UI Dialog API 文档，因此您可以查看所有选项：
