How to create a custom “confirm” & pause js execution until user clicks button?

Question

Ok, I\'m doing a bunch of RIA/AJAX stuff and need to create a \"pretty\", custom confirm box which is a DIV (not the built-in javascript confirm). I\'m having trouble determ

Answer 1

Try this, pass your your javascript client function the 'this' object and start your custom confirm dialog but always return false to prevent the postback from firing. Before you exit the handling function though, copy the relevent information to trigger the postback manually to your custom confirm box's 'Yes' button.

Answer 2

The way how I did this:

1. Create your own confirm dialog box with buttons, let's say "Yes" and "No".
2. Create function that triggers the dialog box, let's say confirmBox(text, callback).
3. Bind events on "Yes" and "No" buttons - "Yes" - callback(true), "No" - callback(false).

4. When you are calling the function use this syntax:

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

Answer 3

like Paul said... this works for me (I guess you use ASP.NET, but if not you can easily rewrite this):

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

I'm afraid to say that it's not possible to pause the Javascript runtime in the same way that the "confirm" and "alert" dialogs pause it. To do it with a DIV you're going to have to break up your code into multiple chunks and have the event handler on the custom confirm box call the next section of code.

There have been some projects to bring "continuations" support into Javascript, such as Narrative Javascript so if you're really keen on getting it to work in a single block of code you could look into that.

Answer 5

In my case, the goal was to display a customConfirm box whenever user clicks the delete link embedded within each row of a .Net Repeater

Whenever user clicks the delete link of any particular row,the Custom Confirm function is called. Now inside the confirm function, in addition to rendering the new box, the following 2 things needed to be done:

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

The above if/else construct pertains to my case. Main thing is to just know that you can simulate the confirm pause & continuity using the event object and __doPostBack function.

Answer 6

Check out my Fiddle modal alert box: http://jsfiddle.net/katiabaer/UXM9y/33/ with 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);
      }

  });