Return value from custom alert

Question

Possible duplicate:
How to create TRULY modal warnings / confirmations in Javascript?

TL DR: I overridden the default alert() function with custom HTML. I want the new dialog to still block execution, and that the buttons in my dialog return true or false from the alert() call for use in the logic (and continue execution).

---

I am trying to implement a custom warning window that replaces the default browser warning with a nice theme field with the same (or similar) features.

I read this question and I am using the solution given in this answer (to the same question). Now I want my overridden alert to return true or false for use in if() , depending on whether OK or Cancel was pressed:

 if(alert('Confirm?') { // Do stuff } 

However, due to the fact that custom HTML instead of the usual warning, I cannot do this for two reasons:

• I cannot return the value from the buttons in the replacement dialog (click events related to $.on() ) because I have no idea how to do this.
• I cannot block the program flow with this warning, as far as I know.

I connected the $.on() events with the Cancel and OK buttons in the replace dialog that hide the window. They work fine, but the problem I'm currently facing is returning a value when a button is clicked, so execution pauses until the user completes the action.

HTML:

 <div class="alert background"></div> <div class="alert box"> <div class="message"></div> <hr> <div class="buttons"> <input type="button" name="cancel" value="Cancel"> <input type="button" name="confirm" value="OK"> </div> </div> 

Current JavaScript: (almost a copy of the answer in my related question)

 (function () { nalert = window.alert; Type = { native: 'native', custom: 'custom' }; })(); (function (proxy) { proxy.alert = function () { var message = (!arguments[0]) ? 'null' : arguments[0]; var type = (!arguments[1]) ? '' : arguments[1]; if (type && type == 'native') { nalert(message); } else { // Custom alert box code console.log(message); } }; })(this); 

Ideally, I want something similar in the // Custom alert box code part:

 $('.alert.box input[name="confirm"]').on('click', function() { // Hide dialogue box - I can do this already // *** Return `true` or other truthy value from // alert for use in `if()` statements }); 

Thus, when the OK or Cancel button is pressed, it removes the custom warning window and returns true or false from the alert() call. I can already remove the alert using $.fadeOut() and $.remove() , which is easy. Something that does not know how to receive button click events in order to receive alert() (overridden) in order to return something.

I tried to be as clear as I could, but I might have missed something. Please let me know if I have.

Answer 1

The following example shows an approach to creating a custom alert and handling the result of a user selection

 /* message = String describing the alert successCallBack = callback function for when the user selects yes */ function exampleAlert(message, successCallback) { /*Alert box object*/ var alertBox = document.createElement("div"); /*Alert message*/ var msg = document.createElement("div"); msg.innerHTML = message; /*Yes and no buttons The buttons in this example have been defined as div containers to accentuate the customisability expected by the thread starter*/ var btnYes = document.createElement("div"); btnYes.innerHTML= "Yes"; /*Both yes and no buttons should destroy the alert box by default, however the yes button will additionally call the successCallback function*/ btnYes.onclick = function(){ $(this.parentNode).remove();successCallback();} var btnNo = document.createElement("div"); btnNo.innerHTML= "No" btnNo.onclick = function(){ $(this.parentNode).remove();} /*Append alert box to the current document body*/ $(alertBox).append(msg, btnYes, btnNo).appendTo("body"); } function test() { alert("Example alert is working, don't use this test as a replacement test - horrible recursion!") } exampleAlert("shoe", test) 

It is quite simple and does not allow adding additional data to the callback function and for this reason is not ideal for production, but jQuery.bind () and similar methods allow you to associate data with the callback method

It is worth noting that, although the above demonstrates the full implementation of the problem, in fact there are only two lines.

 btnYes.onclick... btnNo.onclick... 

Since we achieve the desired result by binding the onclick events for true and false, respectively, everything else should draw an image.

With this in mind, you can effectively turn any container object with at least one brother into a warning field for eaxmple:

  <!-- Example html --> <div id='a'> <ul> <ul> <li>Something</li> <li>Something Else</li> <li id='yesIdentifier'>Something not necessarily suggesting a trigger?</li> </ul> </ul> </div> 

As long as your yes / no (if no exist) options destroy the corresponding container, converting the container to a warning field can be processed in a few lines of code.

 $('#yesIdentifier', '#a').click( function(){ someCallback(); $(this).closest('#a').remove()}); 

None of the above examples are exemplary models for implementation, but should contain some ideas on how to complete the task.

Finally ... do you really need to replace your own notification method? That is, you write alert calls, in which case you know how to use your own method, or rewrite the default behavior, which you cannot guarantee that other developers will know.

General recommendation:

I believe that the best approach to this would be to create a jQuery plugin that will generate custom alerts on the fly and track callbacks, results, and what's not included in the plugin.

SOliver.

Answer 2

Why don't you just use a confirmation window like this.

 var c = confirm('Confirm?'); if(c) { // Yes clicked } else { // No clicked } 

Or you can use the jQuery dialog confirmation box.

http://jqueryui.com/demos/dialog/#modal-confirmation