Estoy usando jQuery UI dialog para mostrar un cuadro de diálogo de confirmación cuando se hace clic en un botón. Quiero devolver true
, cuando haga clic en Aceptar y false
en caso contrario.Devolver el valor del cuadro de diálogo de confirmación mediante el diálogo de IU de JQuery
Asociando diálogo abrir llamada en onClick
(dado here, $dialog.dialog('open');
) evento no sirve para el propósito. Entonces, como una solución alternativa, seguí un enfoque, que es similar a esto: http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery. Hay dos diferencias entre este enfoque y el mío:
- El ejemplo utiliza la etiqueta de anclaje y,
- que no utiliza de diálogo jQuery UI.
He modificado el código proporcionado en el enlace de ejemplo, pero no funciona. Me pregunto qué estoy haciendo mal. ¿Hay alguna manera más barata de hacer esto?
Aquí está el código, todos los CSS/JS hacen referencia a jQuery CDN, por lo que debería poder copiar el código para ver el comportamiento.
<!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>
Aclaración: Tenga en cuenta que es muy simple (véase la solution by bryan.taylor) para hacer un envío del formulario. Lo que quiero hacer aquí es simular la presentación con un clic de botón. Más como el método de JavaScript confirm().
Idealmente, este ejemplo debería le llevará a Google en Aceptar y cierre y no hacer nada en Cancelar. Intentaría evitar una solución explícita basada en $ (formName) .submit(). – Nishant
posible duplicado de [cuadro de diálogo de jquery ui debe devolver el valor, cuando el usuario presiona el botón, pero no funciona] (http://stackoverflow.com/questions/6049687/jquery-ui-dialog-box-need-to-return- value-when-user-presses-button-but-not-wor) – Liam