¿Cómo crear una ejecución personalizada de "confirmar" y poner en pausa js hasta que el usuario haga clic en el botón?

Question

Ok, estoy haciendo un montón de cosas de RIA/AJAX y necesito crear un cuadro de confirmación personalizado "bonito" que sea un DIV (no la confirmación de javascript incorporada). Tengo problemas para determinar cómo realizar una pausa en la ejecución para dar al usuario la oportunidad de aceptar o rechazar la condición antes de reanudar o detener la ejecución. (Dependiendo de su respuesta)

Así que aquí es el flujo general de la lógica que estoy tratando con:

1. usuario selecciona un elemento del menú desplegable y el botón de clic.
2. En el gestor de eventos javascript del lado del cliente para el botón, necesito verificar una (esta es la clave) SERIE de condiciones para el elemento que eligieron en el menú desplegable.
3. Estas condiciones podrían dar como resultado que no se muestre ninguna confirmación o que solo algunas de las condiciones se evalúen como verdaderas, lo que significa que tendré que pedirle al usuario que acepte o rechace la condición antes de continuar. Solo se debe mostrar una confirmación a la vez.

Para demostrar la lógica:

function buttonEventHandler() { 

if (condition1) { 
    if(!showConfirmForCondition1) // want execution to pause while waiting for user response. 
    return; // discontinue execution 
} 

if (condition2) { 
    if (!showConfirmForCondition2) // want execution to pause while waiting for user response. 

    return; // discontinue execution 
} 

if (condition3) { 
    if (!showConfirmForCondition3) // want execution to pause while waiting for user response. 

    return; // discontinue execution 
} 

... 
} 

Si alguien se ha ocupado de este desafío antes y encontrado una solución, ayuda sería muy apreciada. Como nota, también estoy usando las bibliotecas MS Ajax y jQuery aunque no he encontrado ninguna funcionalidad que ya esté incluida en las de este problema.

Answer 1

Me temo que no es posible pausar el tiempo de ejecución de Javascript de la misma forma que lo hacen los cuadros de diálogo "confirmar" y "alertar". Para hacerlo con un DIV, tendrá que dividir el código en varios fragmentos y hacer que el controlador de eventos en el cuadro de confirmación personalizado llame a la siguiente sección del código.

Ha habido algunos proyectos para incluir soporte de "continuación" en Javascript, como Narrative Javascript, por lo que si está realmente interesado en ponerlo en funcionamiento en un solo bloque de código, podría analizarlo.

Answer 2

Prueba de esto, pasar su su función de cliente JavaScript del 'este' objeto y empezar el diálogo de confirmación personalizada, pero siempre retorno false para evitar la devolución de datos se dispare. Sin embargo, antes de salir de la función de manejo, copie la información relevante para activar la devolución de datos manualmente en el botón "Sí" de su casilla de verificación personalizada.

Answer 3

En mi caso, el objetivo era mostrar un cuadro de customConfirm cada vez que el usuario hace clic en el enlace borrar incrustado dentro de cada fila de un repetidor .Net

Cada vez que el usuario hace clic en el enlace borrar de cualquier fila en particular, la función Confirmar personalizada se llama. Ahora dentro de la función confirman, además de emitir la nueva caja, las siguientes 2 cosas había que hacer:

// obtain the element(we will call it targetObject) that triggered the event 

targetObject = (event.target==undefined ? event.srcElement : event.target); 

// include a call to _doPostBack in the onclick event of OK/YES button ONLY 

(targetObject.href!=undefined){ eval(targetObject.href); } else{ _doPostBack(targetObject.name,''); // it is assumed that name is available 

Lo anterior if/else pertenece a mi caso. Lo principal es simplemente saber que puede simular la pausa de confirmación & continuidad utilizando el objeto de evento y la función __doPostBack.

Answer 4

como Paul dijo ... esto funciona para mí (supongo que usas ASP.NET, pero si no puede volver a escribir fácilmente este):

function BeforeDelete(controlUniqueId) { 
    confirmPopup('question...?', function() { __doPostBack(controlUniqueId, ''); }); 
    return false; 
} 

function confirmPopup(message, okCallback) { 
    $('#popup-buttons-confirm').click(okCallback); 
    // set message 
    // show popup 
} 

Answer 5

La manera cómo hice esto:

1. Crear su propio cuadro de diálogo de confirmación con botones, digamos "Sí" y " No".
2. Crear la función que desencadena el cuadro de diálogo , digamos confirmBox(text, callback).
3. eventos de Unir por el "Sí" y "No" botones - "Sí" - callback(true), "no" - callback(false).

4. Cuando llame a la función utilizar esta sintaxis:

   confirmBox("Are you sure", function(callback){ 
       if (callback) { 
        // do something if user pressed yes 
       } 
       else { 
        // do something if user pressed no 
       } 
   }); 
   

Answer 6

Compruebe hacia fuera mi modal violín cuadro de alerta: http://jsfiddle.net/katiabaer/UXM9y/33/ con jQueryUI modal

showAlert = function (msg, header, callback) { 
     var mydiv = $("<div id='mydiv'> </div>"); 
     mydiv.alertBox({ 
      message: msg, 
      header: header, 
      callback: callback 
     }); 

    }, 

    $('#show').click(function() { 
     var m = $('#message').val(); 
     var h = $('#header').val(); 
     var callback = function() { 
      alert("I can do anything here"); 
     } 
     showAlert(m, h, callback); 

    }); 

    $.widget("MY.alertBox", { 
     options: { 
      message: "", 
      header: "", 
      callback: '' 
     }, 

     _create: function() { 
      var self = this; 
      self.callback = self.options.callback; 

      self.container = $(".alert-messagebox"); 
      var header = self.container.find(".alert-header"); 
      header.html(self.options.header); 

      var message = self.container.find(".alert-message"); 
      message.html(self.options.message); 

      var closeButton = self.container.find("button.modal-close-button"); 
      closeButton.click(function() { 
       self.close(); 
      }); 

      self.show(); 
     }, 

     show: function() { 
      var self = this; 
      self.container.modal({ 
       maxWidth: 500 
      }); 
     }, 

     close: function() { 

      if (this.callback != null) { 
       this.callback(); 
       $.modal.close(); 
       return; 
      } 
      $.modal.close(); 

     }, 

     destroy: function() { 
      $.Widget.prototype.destroy.call(this); 
     } 

    });