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?

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>