Я использую диалог jQuery UI, чтобы отобразить диалог подтверждения при нажатии кнопки. Я хочу вернуть true
, когда нажата кнопка "ОК" и false
в противном случае.
Связывание диалога с открытым вызовом в onClick
(как указано здесь, $dialog.dialog('open');
) событие не служит цели. Итак, в качестве обходного пути я последовал подходу, похожим на это: http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery. Существуют два различия между этим подходом и моим:
- В примере используется якорный тег и
- Он не использует диалоговое окно пользовательского интерфейса jQuery.
Я изменил код, указанный в ссылке примера, но он не работает. Интересно, что я делаю неправильно. Есть ли более дешевый способ сделать это?
Вот код, все 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="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/blitzer/jquery-ui.css'; return false;" 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>
Уточнение: обратите внимание, что это очень просто (см. решение от bryan.taylor), чтобы отправить форму. То, что я хочу сделать, это имитировать подачу нажатием кнопки. Скорее, как JavaScript подтвердить() метод.