jquery - support - ajax examples

¿Cómo crear una ejecución personalizada de "confirmar" y pausar 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í está el flujo general de lógica que estoy tratando:

1. El usuario selecciona un elemento del menú desplegable y hace clic en el botón.
2. En el gestor de eventos javascript del lado del cliente para el botón, necesito verificar una (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 pedir 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 ha enfrentado este desafío antes y ha encontrado una solución, la 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 que incorporan soporte de "continuación" en Javascript, como Javascript narrativo, por lo que si está realmente interesado en que funcione en un solo bloque de código, podría analizarlo.

Answer 2

Pruebe esto, pase su función de cliente de JavaScript al ''este'' objeto y comience su diálogo de confirmación personalizado, pero siempre devuelva falso para evitar que la devolución de datos se active. 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

como dijo Paul ... esto funciona para mí (supongo que usas ASP.NET, pero si no puedes reescribirlo fácilmente):

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

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

Answer 4

En mi caso, el objetivo era mostrar un cuadro de customConfirm siempre que el usuario haga clic en el enlace de eliminación incrustado dentro de cada fila de un .Net Repeater

Siempre que el usuario haga clic en el enlace de eliminación de cualquier fila en particular, se llama a la función de Confirmación personalizada. Ahora dentro de la función de confirmación, además de renderizar la nueva caja, se deben hacer las 2 cosas siguientes:

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

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

Answer 5

La forma en que hice esto:

1. Cree 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. Enlace los eventos en los botones "Sí" y "No" - "Sí" - callback(true) , "No" - callback(false) .

4. Cuando llame a la función, use 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

Mira mi caja de alerta modal Fiddle: 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);
      }

  });