JavaScript puzzle to solve: window.confirm = divConfirm (strMessage)

Question

Scenario: An old site that has written a lot of JS code. If the user wants to change all warning messages to a new jazzy Div age based on alerts that are very common with jQuery, YUI, Prototype ... etc.
Mostly there are JS tree dialogs
<b> 1. Alert

To change this simply, we just need to write a new function that will show a popup div and show a message, then redefine window.alert

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

window.alert = showDivAlert;


2. invitation

It is too easy to write a function to accept a string and display a text field for an input value. Now that the return action is based on clicking the OK button, life here is very simple.

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


3. confirm

Now above the two, it was easy to override and change the default dialogs, but there are complications with confirmation.
However, in the JS confirmation dialog, JS execution stops by default, and when the user clicks OK or Cancel execution, it resumes by specifying the return value (true / false). But if we select a custom popup, execution will not stop, which is a problem.
We can still perform the confirmation, but in this case we need to bind methods for the case of OK and CANCEL, which will be attached to the OK and CANCEL buttons. The signature will look with this function. function newConfirm(msg, fun OkAction(), fun CancelAction)

Now this is a problem that does not help me change the confirmation dialog for the site, as was done with alert (); Question
I'm not sure if this is possible or not, but I think some JS template can be used. So let me know if possible.

Answer 1

Now this is a problem that does not help me change the confirmation dialog for the site, as was done with alert ();

It is right. It is not possible to reproduce the synchronous nature of alert / confirm / prompt functions in native JavaScript. There is a non-standard showModalDialog method that can execute it with a separate pop-up document, but it is not supported by all browsers and is generally considered highly undesirable.

Thus, the plug-in-replacement strategy will not work. You will have to change all the places you called these methods in the rest of the script.

The usual template is to do this with built-in anonymous functions to save local variables using closures, for example. replace:

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

from:

 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 to save this , you will need to look for another nested closure or .bind function to do this. If you have your confirm call in a loop, the situation becomes much more complicated.

Obviously, you also need to ensure that the critical global state does not change while the confirmation window is inserted. Usually this risk is minimized by unloading the rest of the page with an overlay to stop clicks from passing. However, if you have timeouts, they can still shoot.

Answer 2

All 3 methods actually stop js execution, not just confirmation, because all modal dialogs. Personally, I will try to keep everything as asynchronous as possible, since modal dialogs prevent interaction with the current document.

It’s best to use the callback functions from the new confirmation popup you suggested.

It's hard for me to understand what you want to achieve. It looks like you want to do something like the following:

• Run javascript code
• Display the confirmation window.
• Wait until the ok button or cancel button is pressed.
• Continue the code when the user presses the OK button, returns when the user presses the cancel button.

The reason you want to do this is because redefining the function with something using callbacks will require rewriting each section of the code that uses the confirmation function. If you want my advice, I would go and rewrite the code so that it runs asynchronously. You cannot delay the execution of a script without locking the document, which includes the OK and Cancel actions of your dialog.

Answer 3

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

Overriding these functions, the code continues to execute.

To do this, you need to change every part of the code and work as if you were with asynchronous functions.

Then you can use any Windows plugin as a sexy-alert-box and overwrite Alert / Prompt / Confirm

Answer 4

The signature of the function will be simple:

  function newConfirm(msg, okAction, cancelAction); 

and will be used as:

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

That is, pass the function "pointers" to the function as arguments, just pass the name of the function without (). The function signal is the same.