Как создать собственное «подтвердить» и приостановить выполнение до тех пор, пока пользователь не нажмет кнопку?

Question

Хорошо, я делаю кучу вещей RIA / AJAX и мне нужно создать "красивое", настраиваемое поле подтверждения, которое является DIV (не встроенным подтверждением javascript). У меня возникают проблемы с определением того, как выполнить паузу в выполнении, чтобы дать пользователю возможность принять или отклонить условие перед возобновлением или прекращением выполнения. (в зависимости от их ответа)

Итак, вот общий поток логики, с которой я имею дело:

1. Пользователь выбирает элемент из выпадающего меню и нажимает кнопку.
2. В клиентском JavaScript-обработчике события для кнопки мне нужно проверить (это ключ) СЕРИЮ условий для элемента, который они выбрали в раскрывающемся списке.
3. Эти условия могут привести к тому, что вообще не будут отображаться какие-либо подтверждения, или, возможно, только некоторые из условий могут быть оценены как истинные, что означает, что мне нужно попросить пользователя принять или отклонить условие перед продолжением. Одновременно должно отображаться только одно подтверждение.

Чтобы продемонстрировать логику:

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
}

...  
}

Если бы кто-то сталкивался с этой проблемой раньше и нашел решение, помощь будет принята с благодарностью. Как примечание, я также использую библиотеки MS Ajax и jQuery , хотя я не нашел каких-либо функций, которые уже могут быть включены в них для этой проблемы.

Answer 1

Как я это сделал:

1. Создайте свое собственное диалоговое окно подтверждения. с кнопками, скажем, «да» и "Нет".
2. Создать функцию, которая запускает диалоговое окно, скажем, confirmBox(text, callback).
3. Связать события с «Да» и «Нет» кнопки - «Да» - callback(true), «Нет» - callback(false).

4. Когда вы вызываете функцию используйте этот синтаксис:

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

Answer 2

Боюсь сказать, что невозможно приостановить выполнение Javascript так же, как это делают диалоговые окна «Подтверждение» и «Предупреждение». Чтобы сделать это с DIV, вам нужно разбить код на несколько частей, и обработчик событий в настраиваемом окне подтверждения вызывает следующий раздел кода.

Были некоторые проекты, чтобы обеспечить поддержку «продолжений» в Javascript, например, Narrative Javascript , так что если вы действительно заинтересованы в том, чтобы заставить его работать в одном блоке кода, вы можете посмотреть на это .

Answer 3

Попробуйте, передайте своей клиентской функции javascript объект 'this' и запустите диалоговое окно пользовательского подтверждения, но всегда верните false, чтобы предотвратить запуск обратной передачи. Прежде чем выйти из функции обработки, скопируйте соответствующую информацию, чтобы вручную запустить обратную передачу, нажав кнопку «Да» в пользовательском окне подтверждения.

Answer 4

Проверьте мой модальный блок предупреждений Fiddle: http://jsfiddle.net/katiabaer/UXM9y/33/ с JqueryUI модальным

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

  });

Answer 5

как сказал Пол ... это работает для меня (я полагаю, вы используете ASP.NET, но если нет, то вы можете легко переписать это):

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

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

Answer 6

В моем случае цель состояла в том, чтобы отображать поле customConfirm всякий раз, когда пользователь нажимает ссылку удаления, встроенную в каждую строку .Net Repeater

Каждый раз, когда пользователь щелкает ссылку на удаление какой-либо конкретной строки, вызывается функция пользовательского подтверждения. Теперь внутри функции подтверждения, помимо рендеринга нового поля, необходимо сделать 2 вещи:

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

Вышеприведенная конструкция if / else относится к моему случаю. Главное, просто знать, что вы можете смоделировать паузу и непрерывность подтверждения, используя объект события и функцию __doPostBack.