Question

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, YUI, Prototype… etc.
There are mainly tree JS dialogs
1. alert

To changes this its simple we just have to write new function which will show the div popup and show the message, after that override the window.alert


function showDivAlert(strMessage){
//div popup logic and code
}

window.alert = showDivAlert;


2. prompt

This too look easy to write function to accept the string and show the text box for input value. Now as return action is based on the click of “OK” button life is easy here.


function shoDivPromp(strMessage){
//div pop up to show the text box and accept input from the user
}
window.prompt = shoDivPromp;


3. confirm

Now above two were easy to override and modify the default dialogs but there is complication with the confirm.
However default JS confirm dialog stops JS execution and when user click OK or Cancel execution is resumed by determining the return value (true/false). But if we user div popup the execution is not stopped which is problem.
We can still implement the confirm but in that case we have to bind methods for OK and CANCEL case which will be attached to OK and CANCEL button. With this function signature will be like.
function newConfirm(msg, fun OkAction(), fun CancelAction)

Now this is problem that this cant help me change the confirm dialog across the site as we did with alert();
Question
I am not sure whether its possible or not to achieve but i think can be using some JS pattern. So let me know if its possible.

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

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

with:

function buttonclick() {
    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.