Using JavaScript / jQuery to "pause" execution and wait for user input

Question

I am trying to use JavaScript & jQuery to overwrite standard functionality - namely alert and confirm.

For this, I have built something that shows a dialog when an alert or confirm is asked for by the code, and this looks like:

function throwError(e_content) {
 var e_title = "Error";
 var e = errordiv;
 var return_error = e.start + e.header_start + e_title + e.header_end + e.body_start + e_content + e.body_end + e.end;
 jQuery("body").append(return_error);
 return;
}
function throwConfirm(e_content) {
 function confirmCallback() {
 var retval = "213";
 jQuery("body").on("click", function (e) {
 if (e.target.id == "confirm_okay") {
 hideError();
 retval = true;
 }
 else if (e.target.id == "confirm_cancel") {
 hideError();
 retval = false;
 }
 })
 retval == "213" ? confirmCallback() : retval;
 return retval;
 }
 var e_title = "Confirm Action";
 var e = confirmdiv;
 var return_error = e.start + e.header_start + e_title + e.header_end + e.body_start + e_content + e.body_end + e.end;
 jQuery("body").append(return_error);
 return confirmCallback();
}
function hideError () {
 jQuery(document).find(".custom_error_div").remove();
 return;
}
var errordiv = {
 start: '<div class="custom_error_div"><div class="custom_error_div_content" >',
 end: '</div></div>',
 header_start: '<div class="custom_error_div_header">',
 header_end: '</div>',
 body_start: '<div class="custom_error_div_body">',
 body_end: '<div class="bottom-buttons">'
 + '<button id="alert_okay">Ok</button>'
 + '</div>'
};
var confirmdiv = {
 start: '<div class="custom_error_div"><div class="custom_error_div_content" >',
 end: '</div></div>',
 header_start: '<div class="custom_error_div_header">',
 header_end: '</div>',
 body_start: '<div class="custom_error_div_body">',
 body_end: '<div class="bottom-buttons">'
 + '<button id="confirm_okay">Ok</button><button id="confirm_cancel">Cancel</button>'
 + '</div>'
};

The basis of this is working, it alerts and confirms when I want it to - but the confirm is an issue, when clicking either "Yes" or "No", the throwConfirm function is supposed to return true or false and this doesn't seem to be happening, instead, I reach maximum call size.

The basis behind doing this are complex and convoluted and not relevant to the question at hand - what I need to know is:
How do I get the throwConfirm function to return true or false based on what button the user clicks?

• Sooraj: What error message are you getting ? can you make this into a working snippet to show the problem ?
• Reinstate Monica Cellio: You need to pass a callback function into throwConfirm, and execute that in confirmCallback, passing in the "return" value.
• Tibrogargan: You're getting the max call size because of this: "213" ? confirmCallback() : retval;. The onclick function is not being called, just created - so retval is going to always be "213" and so you're recursing forever. Instead of trying to return a value, set a global or call a callback function. Would you post a little more of the html, too lazt to invent e.start + e.header_start + e_title + e.header_end + e.body_start + e_content + e.body_end + e.end
• anon: @SoorajChandran, a working copy is tricky - there is (obviously) more to it that cannot be handled by the fiddles... As stated in the question: maximum call stack size is my error
• Tibrogargan: @Sooraj Chandran it's looping because the click handler has not been called before he tests retval, so it's never changed.

Answer 1

This shows one way of doing it. It's kind of kludgy - there's going to be a better way of setting the callback instead of using the global _callback variable

"use strict";
function throwError(e_content) {
 var e_title = "Error";
 var e = errordiv;
 var return_error = e.start + e.header_start + e_title + e.header_end + e.body_start + e_content + e.body_end + e.end;
 jQuery("body").append(return_error);
 return;
}
function throwConfirm(e_content, callback) {
 hideError();
 var e_title = "Confirm Action";
 var e = confirmdiv;
 var return_error = e.start + e.header_start + e_title + e.header_end + e.body_start + e_content + e.body_end + e.end;
 jQuery("body").append(return_error);
 // this is a hack, but I'm tired
 _callback = callback
}
function hideError () {
 jQuery(document).find(".custom_error_div").remove();
 return;
}
var errordiv = {
 start: '<div class="custom_error_div"><div class="custom_error_div_content" >',
 end: '</div></div>',
 header_start: '<div class="custom_error_div_header">',
 header_end: '</div>',
 body_start: '<div class="custom_error_div_body">',
 body_end: '<div class="bottom-buttons">'
 + '<button id="alert_okay">Ok</button>'
 + '</div>'
};
var confirmdiv = {
 start: '<div class="custom_error_div"><div class="custom_error_div_content" >',
 end: '</div></div>',
 header_start: '<div class="custom_error_div_header">',
 header_end: '</div>',
 body_start: '<div class="custom_error_div_body">',
 body_end: '<div class="bottom-buttons">'
 + '<button id="confirm_okay">Ok</button><button id="confirm_cancel">Cancel</button>'
 + '</div>'
};
var _callback;
function init() {
 jQuery("body").on("click", function (e) {
 if (e.target.id == "confirm_okay") {
 hideError();
 _callback( true );
 }
 else if (e.target.id == "confirm_cancel") {
 hideError();
 _callback( false );
 }
 })
 $(document).on("click", "#foo", function() { throwConfirm("bar", doSomethingWithMyRetval) } );
}
function doSomethingWithMyRetval(foo) {
// foo foo foo
console.log("The retval from the confirm was: "+foo);
}
$(document).ready(init);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<input id="foo" type="button">
</body>

• anon: Very interesting... I shall have a play with this and see if it does what I need it to on my page, thank you! :)
• Tibrogargan: @SamSwift웃 jQuery just adds new handlers when you call on(), which is why the previous version was logging multiple times. This version fixes that - but I believe there is a version of on() that creates 1 use callback handlers - just don't remember the syntax. Might be better to do it that way instead of using the _callback kludge