Как создать пользовательский "подтвердить" и приостановить выполнение js, пока пользователь не нажмет кнопку?

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

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

  1. пользователь выбирает элемент из выпадающего списка и нажимает кнопку.
  2. в клиентском javascript eventhandler для кнопки Мне нужно проверить (это ключ) ряд условий для элемента, который они выбрали в раскрывающемся списке.
  3. эти условия могут привести к тому, что не будет отображаться никакого подтверждения вообще или, возможно, только некоторые из условий могут оцениваться как true, что означает, что мне нужно будет попросить пользователя принять или отклонить условие перед продолжением. Только одно подтверждение должно быть показано на a время.

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

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 библиотеки, хотя я не нашел никаких функций, которые уже могут быть включены в них для этой проблемы.

13
ajax javascript jquery ria

6 ответов

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

были некоторые проекты, чтобы принести поддержку "продолжения" в Javascript, такие как Повествовательный Javascript так что если вы действительно заинтересованы в получении его чтобы работать в одном блоке кода, Вы могли бы изучить это.

7

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

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

попробуйте это, передайте свою клиентскую функцию javascript объекту "this" и запустите диалог подтверждения, но всегда возвратить false, чтобы предотвратить обратную передачу от стрельбы. Однако перед выходом из функции обработки скопируйте релевантную информацию, чтобы вручную запустить обратную передачу, на кнопку " Да " пользовательского поля подтверждения.

1

Как сказал Павел... это работает для меня (я думаю, вы используете 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
}
0

В моем случае, целью было показать 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 относится к моему случаю. Главное-просто знать, что можно сымитировать подтвердите паузу и непрерывность с помощью объекта event и

0

Проверьте мою скрипку модальное окно оповещения: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);
      }

  });
0