Nis*_*ant 19 html javascript jquery jquery-ui
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:
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.
Eri*_* J. 49
JavaScript是异步的.打电话给
$myDialog.dialog('open');
不会阻止,而是会立即返回.
相反,必须使用您在buttons 对话框选项中提供的事件回调.
这个近似重复提供了一个很好的例子:
当用户按下按钮但不能正常工作时,jquery ui对话框需要返回值
小智 8
你的代码有点复杂,我认为有一个更简单的方法来做到这一点.您应首先实例化对话框,然后在按钮的单击事件上打开它.代码看起来类似于:
<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>
这是jQuery UI Dialog API文档,因此您可以看到所有选项:
http://api.jqueryui.com/dialog/
| 归档时间： |
|
| 查看次数： |
83089 次 |
| 最近记录： |