Devolver el valor del cuadro de diálogo de confirmación mediante el diálogo de IU de JQuery

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().

Fuente

2010-08-24 Nishant

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

JavaScript es asíncrona. La llamada a

$myDialog.dialog('open');

no se bloqueará, sino que regresará inmediatamente.

En su lugar, se deben utilizar devoluciones de eventos de eventos que proporcione en el buttonsoption of dialog.

Esta casi duplicado proporciona un buen ejemplo:

jquery ui dialog box need to return value, when user presses button, but not working

Fuente

2012-04-06 04:18:45

http://stackoverflow.com/a/18474005/1876355 – Pierre

Su código es un poco intrincado, creo que hay una manera mucho más fácil de hacer esto. Primero debe crear una instancia del cuadro de diálogo, luego ábralo en el evento click para su botón. Código sería similar a esto:

<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>

Aquí está la documentación de la API jQuery UI de diálogo, para que pueda ver todas sus opciones:

http://api.jqueryui.com/dialog/

Fuente

2010-08-24 21:22:22

PS No probé este código, simplemente lo escribí para que pudiera tener una idea de cómo abordar este problema, por lo que podría haber algún error menor retoques necesarios. –

Sí, este código está bien. Lo único es que quiero enviar un formulario ... así que lo que haré es poner $ ('# formId'). Submit() en el lugar de window.open ('http://google.com/'); en tu respuesta. Pero el problema es que quiero simular el envío haciendo clic en el botón.Me di cuenta de que tal vez la pregunta no estaba clara, agrego una aclaración en la pregunta. Gracias por su sugerencia. – Nishant

@Nishant: No estoy muy seguro de lo que quiere decir con 'simular la presentación con un clic del botón'. ¿Quiere decir que quiere evitar que se produzca el evento de envío cuando alguien hace clic en Aceptar? Supongo que solo te pido que expliques qué significa "simular la sumisión", ¿puedes proporcionar un caso de uso relevante? –

Devolver el valor del cuadro de diálogo de confirmación mediante el diálogo de IU de JQuery

Respuesta

Cuestiones relacionadas