使用JQuery UI对话框从确认对话框中返回值 [英] Returning value from confirmation dialog using JQuery UI dialog
问题描述
当点击一个按钮时，我使用 jQuery UI对话框显示确认对话框。我想返回 true ，点击OK后， false ，否则返回。
在 onClick 中关联对话打开的调用（按给定这里， $ dialog.dialog（'open'）; ）事件不符合目的。所以，作为一种解决方法，我遵循了一种类似于以下的方法： http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery 。这个方法和我的方法有两点不同：
- 该示例使用锚标记和
- 它不使用jQuery UI对话框。
我修改了示例链接中给出的代码，但它不起作用。我想知道我做错了什么。有没有更便宜的方法来做到这一点？
以下是代码，所有CSS / JS都引用了jQuery CDN，因此您应该能够复制代码以查看行为。 b
$ b
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp： //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< link type =text / csshref =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/blitzer/jquery-ui.css =样式表/>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.4.2.min.js>< / script>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js>< /脚本>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>控制台< / title>
< / head>
< body>
< form action =http://google.com>
< button class =es-button ui-state-default ui-corner-allname =changeSemid =id2>启动热核战争< / span>
< / button>
< / form>
< div title =为什么这么认真？ id =id3style =display：none;>
< p>你即将开始一场战争。
< p>点击OK确认。点击取消即可取消此操作。< / p>
< / div>
< / body>
< script type =text / javascript> （$（this））.data（'propagationStopped'））{
// alert（$（$＃$ b $（'＃id2'）。 'true'）;
$（this）.data（'propagationStopped'，false）;
return true;
} else {
event.stopImmediatePropagation（） ;
$ b $（'＃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>
澄清：请注意这非常简单由bryan.taylor提供的解决方案 ）做一个表单提交。我想在这里做的是通过点击按钮模拟提交。更像是JavaScript的 confirm（）方法。
JavaScript是异步的。对
的调用 $ myDialog.dialog（'open'）;
不会阻塞，而是会立即返回。
相反，必须使用您在按钮中提供的事件回调 对话框选项。
这个近似重复提供了一个很好的例子：
I am using jQuery UI dialog to display a confirmation dialog when a button is clicked. I want to return true, when OK is clicked and false otherwise.
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:
- The example uses anchor tag and,
- It does not use jQuery UI dialog.
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.
<!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.
JavaScript is asynchronous. The call to
$myDialog.dialog('open');
will not block, but rather will return immediately.
Instead, one must use event callbacks that you provide in the buttons option of dialog.
This near-duplicate provides a good example:
jquery ui dialog box need to return value, when user presses button, but not working
这篇关于使用JQuery UI对话框从确认对话框中返回值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
