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 determining how to accomplish a pause in execution to give the user a chance to accept or decline the condition before either resuming or halting execution. (depending upon their answer)

So here's the general flow of logic I'm dealing with:

1. User selects an item from dropdown and clicks button.
2. In client-side javascript eventhandler for button, I need to check a (this is the key) SERIES of conditions for the item they chose in dropdown.
3. These conditions could possibly result in not showing any confirmation at all or possibly only some of the conditions may evaluate to true which means I'll need to ask the user to accept or decline the condition before proceeding. Only one confirmation should be show at a time.

To demonstrate the logic:

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
}

...  
}

If anybody has dealt with this challenge before and found a solution, help would be greatly appreciated. As a note, I'm also using the MS Ajax and jQuery libraries although I haven't found any functionality that may already be included in those for this problem.

Answer 1

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

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 4

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

  });