Javascript Puzzle To Solve : Window.confirm = Divconfirm(strmessage)

Scenario is : old site which has lots of JS code already written. If user want to change all the alert messages to new age jazzy Div based alert which are very common using JQuery,

Solution 1:

Now this is problem that this cant help me change the confirm dialog across the site as we did with alert();

That's correct. It's not possible to reproduce the synchronous nature of the alert/confirm/prompt functions in native JavaScript. There is the non-standard method showModalDialog which can do it using a separate pop-up document, but it's not supported by all browsers and it's generally considered highly undesirable.

So the plug-in-replacement strategy isn't going to work. You are going to have to change every place you called these methods in the rest of the script.

The usual pattern is to do it using inline anonymous functions, to preserve the local variables using a closure, eg. replace:

functionbuttonclick() {
    var id= this.id;
    if (confirm('Are you sure you want to frob '+id+'?'))
        frob(id);
    wipe(id);
}

with:

functionbuttonclick() {
    var id= this.id;
    myConfirm('Are you sure you want to frob '+id+'?', function(confirmed) {
        if (confirmed)
            frob(id);
        wipe(id);
    });
}

If you need this to be preserved you would need to look at a further nested closure or function.bind to do it. If you have your call to confirm in a loop things get considerably more difficult.

Obviously you also have to ensure that critical global state doesn't change whilst the confirm box is up. Usually this risk is minimised by greying out the rest of the page with an overlay to stop clicks getting through. However if you have timeouts they can still fire.

Solution 2:

All 3 methods actually stop js execution, not just the confirm, because they're all modal dialogs. Personally, I would try to keep everything as asynchronous as possible as modal dialogs prevent interaction with the current document.

Your best bet is to use callback functions from the new confirm popup as you suggested yourself.

I'm having a hard time understanding exactly what you want to achieve. It sounds like you want to do something like the following:

• Run some javascript code
• Display a "confirm" box
• Wait until the ok button or cancel button is clicked
• Continue code when user clicks ok, return when user clicks cancel.

The reason you want to do this is that overriding the function with something that makes use of callbacks would require rewriting each section of code that uses the confirm function. If you want my advice, I would go ahead and rewrite the code so that it performs asynchronously. There's no way you can delay script execution without locking up the document which includes the OK and Cancel actions of your dialog.

Solution 3:

if you changed the roles Alert / Prompt / Confirm. slows the execution pending user interaction to run the following code.

Overriding these functions, the code continues its execution.

To achieve this you have to modify each part of the code and work as if you were with asynchronous functions.

Then you can use any plugin for windows as sexy-alert-box, and overwrite Alert / Prompt / Confirm

Solution 4:

The function signature would simply be:

functionnewConfirm(msg, okAction, cancelAction);

and would be used as:

functionnewConfirm(msg, okAction, cancelAction){
   var ok = doWhateverPromptIsNecessary();
   if (ok) {
     okAction();
   } else {
     cancelAction();
   }
 }

That is, to pass function "pointers" in to a function as arguments, simply pass in the function name without the (). The function signature is the same.