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

Question

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

<div id="modal_confirm_yes_no" title="Confirm"></div> 

Javascript llamada:

$("#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 
} 

de diálogo 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; 
         } 
        } 
      }); 

Answer 1

Javascript es asíncrona.

Así que hay que utilizar 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 
    } 

Answer 2

Si alguien necesita una demostración gráfica de 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. Llamar en algún evento de clic de botón, y tratar de alertar a lo que se ha pulsado el botón:

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

Usted encontrará que usted siempre obtener la alerta antes de que tenga la oportunidad de pulsar 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 configura la función de la forma de Neal, todo funcionará (gracias Neal).

Answer 3

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(); 
        }  
       } 
     }); 

Answer 4

U debería ver esta respuesta.

Bueno, esto puede funcionar.

su función de diálogo ... showDialog()

function confirmation(question) { 
    var defer = $.Deferred(); 
    $('<div></div>') 
     .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 en el que utiliza 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 la gente. 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 el código feo y un bonito cuadro de confirmación mira :)

Espero que esto ayude a algunas personas.

Honestamente, yo era tener muchos tiempo para esto, por fin he encontrado mejor solution.you puede ver con más detalle aquí =>Awesome Solution

Answer 5

Es necesario utilizar las funciones de devolución de llamada. Aquí está el ejemplo de trabajo:

A continuación se muestra el icono fa. Cuando el usuario hace clic en él, llama a javascript.

<a href="#" id="removeNode"><i class="fa fa-minus-circle fa-lg"></i></a> 

A continuación se presenta el código JavaScript que se ejecuta cuando el usuario haga clic icono fa "Nodo Eliminar".

$("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."); 
    } 
}); 

El displayConfirmDialog muestra el mensaje de confirmación y en base a la acción utilización llama a la función de devolución de llamada. 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 se presenta la función de devolución de llamada:

//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 presenta imágenes de la aplicación que elimina nodo de un TreeTable usando jQuery trabajo.

Después de la confirmación del nodo "qa-2" se retira del árbol como se muestra en la siguiente imagen.