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

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 3

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

ike egudu, your code seems to work very fine in IE but when I try to use it in Firefox the function don't returns false and the __dopostback function is called, could you give us a link to your code or post a example?

Thanks!

Answer 5

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 6

answered Jul 9 at 0:23

Paginas:

It did'nt work Firefox because the event is out of scope at the point where it is referenced.

When dealing with FireFox, because the event is not available on every level, you pass a reference, to the event, to whateva function/routine that needs to use event information.

In IE, on the other hand, you can access the event object from the function level just as well as the caller's level.

Here is how you make it work with FireFox in 3 steps

1) Pass a reference to the event object when you call confirm function, in addition to the message:

confirm("Sure you want to Delete?", event)

2) When you override the default confirm, also add an aditional paramater for event:

window.confirm = function(message, event) { customConfirm(message, event); }

3) Leave everything else exactly the way it was when it worked in IE. It will work FireFox and also continue work in IE

Answer 7

The way how I did this:

1. Create your own confirm dialog box with buttons lets say "Yes" and "No".
2. Create function that triggers the dialog box lets 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 } });