如何创建自定义“确认”&暂停执行js直到用户点击按钮?

时间:2008-12-11 01:04:28

标签: jquery ajax ria javascript

好的,我正在做一堆RIA / AJAX的东西,需要创建一个“漂亮的”自定义确认框,这是一个DIV(不是内置的javascript确认)。我无法确定如何完成暂停执行,以便在恢复或暂停执行之前让用户有机会接受或拒绝该条件。 (取决于他们的答案)

所以这是我正在处理的一般逻辑流程:

  1. 用户从下拉列表中选择一个项目并单击按钮。
  2. 在客户端javascript eventhandler for button中,我需要检查他们在下拉列表中选择的项目的条件(这是关键)。
  3. 这些条件可能导致根本没有显示任何确认,或者可能只有一些条件可能评估为真,这意味着我需要在继续之前要求用户接受或拒绝该条件。一次只能显示一个确认。
  4. 演示逻辑:

    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 库,尽管我还没有找到任何可能已包含在此问题中的功能。

6 个答案:

答案 0 :(得分:7)

我害怕说,暂停Javascript运行时不可能与“确认”和“警告”对话框暂停它的方式相同。要使用DIV,您必须将代码分解为多个块,并在自定义确认框上使用事件处理程序调用下一部分代码。

有一些项目需要为Javascript带来“延续”支持,例如Narrative Javascript,所以如果你真的热衷于让它在单个代码块中工作,你可以查看它。

答案 1 :(得分: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
        }
    });
    

答案 2 :(得分:1)

试试这个,将您的javascript客户端功能传递给'this'对象并启动自定义确认对话框,但 始终 返回false以防止回发被触发。在退出处理功能之前,请复制相关信息以手动触发回发到自定义确认框的“是”按钮。

答案 3 :(得分:0)

就我而言,每当用户点击.Net Repeater每行中嵌入的删除链接时,目标就是显示customConfirm

每当用户单击任何特定行的删除链接时,都会调用自定义确认功能。现在在confirm函数中,除了渲染新框之外,还需要完成以下两件事:

// 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函数的连续性。

答案 4 :(得分:0)

像保罗说的那样......这对我有用(我猜你使用的是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
}

答案 5 :(得分: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);
      }

  });
豫ICP备18024241号-1