El cuadro de diálogo de jquery ui debe devolver el valor, cuando el usuario presiona el botón, pero no funciona

Obtuve un cuadro de diálogo de jquery ui que quiero usar para solicitar al usuario que confirme una eliminación. Cuando el usuario presiona “sí” o “no”, debo devolver “Verdadero” o “Falso” para continuar la ejecución de JavaScript. El problema con el código siguiente es cuando aparece el cuadro de diálogo que inmediatamente ejecuta un “retorno verdadero”; pero el usuario aún no ha presionado el botón “Sí”?

¿Qué estoy haciendo mal?

HTML:

 

Llamada javascript:

 $("#modal_confirm_yes_no").html("Are you sure you want to delete this?"); var answer = $("#modal_confirm_yes_no").dialog("open"); if (answer) { //delete } else { //don't delete } 

Diálogo de Jquery:

 $("#modal_confirm_yes_no").dialog({ bgiframe: true, autoOpen: false, minHeight: 200, width: 350, modal: true, closeOnEscape: false, draggable: false, resizable: false, buttons: { 'Yes': function(){ $(this).dialog('close'); return true; }, 'No': function(){ $(this).dialog('close'); return false; } } }); 

javascript es asincrónico.

entonces tienes que usar devoluciones de llamada:

  $("#modal_confirm_yes_no").dialog({ bgiframe: true, autoOpen: false, minHeight: 200, width: 350, modal: true, closeOnEscape: false, draggable: false, resizable: false, buttons: { 'Yes': function(){ $(this).dialog('close'); callback(true); }, 'No': function(){ $(this).dialog('close'); callback(false); } } }); function callback(value){ //do something } 

Si alguien necesita una demostración gráfica del comportamiento asincrónico, aquí hay uno que podría ser útil. Ajustar el diálogo de Ronedog en una función. He usado “showConfirm” a continuación. Capture el valor de retorno en una variable. Llámalo en algún evento de clic de botón y trata de alertar qué botón se presionó:

 $('.btn').on('click', function(event) { var cVal = showConfirm('Really?'); alert('User pressed ' + cVal); }); 

Encontrarás que siempre obtienes la alerta antes de que tengas la oportunidad de presionar el botón. Como javascript es asíncrono, la función de alerta no tiene que esperar el resultado de la función showConfirm.

Si luego configuras la función de la forma de Neal, todo funcionará (gracias Neal).

U debería ver esta respuesta.

Bueno, esto puede funcionar.

Su función de diálogo … showDialog ()

 function confirmation(question) { var defer = $.Deferred(); $('
') .html(question) .dialog({ autoOpen: true, modal: true, title: 'Confirmation', buttons: { "Yes": function () { $(this).dialog("close"); defer.resolve("true");//this text 'true' can be anything. But for this usage, it should be true or false. }, "No": function () { $(this).dialog("close"); defer.resolve("false");//this text 'false' can be anything. But for this usage, it should be true or false. } }, close: function () { $(this).remove(); } }); return defer.promise(); }

y luego el código donde usas la función …

 function onclick(){ var question = "Do you want to start a war?"; confirmation(question).then(function (answer) { if(answer=="true"){ alert("this is obviously " + ansbool);//TRUE } else { alert("and then there is " + ansbool);//FALSE } }); } 

Esto puede parecer mal para la mayoría de las personas. Pero siempre hay situaciones en las que simplemente no puede continuar sin regresar de JQuery Dialog.

Esto básicamente imitará la función de confirmación (). Pero con un código feo y un bonito cuadro de confirmación 🙂

Espero que esto ayude a algunas personas.

Honestamente, me tomó mucho tiempo para esto, finalmente encontré la mejor solución. Puedes ver más detalles aquí => Awesome Solution

Necesita usar funciones de callback. Aquí está el ejemplo de trabajo:

Lo siguiente es el icono fa. Cuando el usuario hace clic en él, llama a javascript.

   

A continuación se muestra el código JavaScript que se ejecuta cuando el usuario hace clic en el icono “Eliminar nodo” fa.

 $("a#removeNode").click(function(){ // returns the attribute of "selected" Table Row either it is expanded or collapsed based on it's class var datattid = $("tr.expanded.selected, tr.collapsed.selected").attr("data-tt-id"); //alert($("tr.expanded.selected").attr("data-tt-id")); if(typeof datattid != 'undefined'){ //alert(datattid); displayConfirmDialog("You are trying to remove selected node : " + datattid + ". Are you sure?", proceedToRemoveNode); }else { showErrorDialog("Invalid Row Selection", "Node is not selected.\n You must select the node to remove it." ); // displayMessage ("#dialog-message", "Invalid Row Selection", "ui-icon-heart", "Node is not selected.\n You must select the node to remove it." ); } }); 

DisplayConfirmDialog muestra el mensaje de confirmación y, en función de la acción de uso, llama a la función de callback. Aquí está el código de displayConfirmDialog.

 //Confirmation dialog to remove node function displayConfirmDialog(message, proceedWithRequest) { var retVal; $("div#dialog-confirm").find("p").html(message); var confirmDlg = $( "#dialog-confirm" ).dialog({ resizable: false, height: "auto", width: 400, modal: true, buttons: { "Remove Node": function() { this.retVal = true; proceedWithRequest() $( this ).dialog( "close" ); }, Cancel: function() { this.retVal = false; $( this ).dialog( "close" ); } }, show:{effect:'scale', duration: 700}, hide:{effect:'explode', duration: 700} }); confirmDlg.dialog("open"); } 

A continuación está la función de callback:

 //Callback function called if user confirms to remove node. function proceedToRemoveNode() { var datattid = $("tr.expanded.selected, tr.collapsed.selected").attr("data-tt-id"); $("#nh_table").treetable("removeNode", datattid); showErrorDialog("Node removed successfully", "The node " + datattid + " is removed successfully" ); // alert("The node " + datattid + " is removed successfully"); } 

A continuación se muestran las imágenes de la aplicación en funcionamiento que elimina el nodo de una TreeTable utilizando JQuery.

enter image description here

Después de la confirmación, el nodo “qa-2” se elimina del árbol como se muestra en la siguiente imagen.

enter image description here

 function confirm() { $("#dialog-message").dialog({ modal : true, buttons: { "Yes" : function() { $(this).dialog("close"); document.forms[0].action = "actionname-yes"; document.forms[0].submit(); }, "No" : function() { $(this).dialog("close"); document.forms[0].action = "actionname-no"; document.forms[0].submit(); } } });