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?

What error message are you getting ? can you make this into a working snippet to show the problem ? — Sooraj
– Sooraj, Commented Aug 26, 2016 at 7:24
You need to pass a callback function into throwConfirm, and execute that in confirmCallback, passing in the "return" value. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Aug 26, 2016 at 7:27
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 — Tibrogargan
– Tibrogargan, Commented Aug 26, 2016 at 7:27
@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 — anon
– anon, Commented Aug 26, 2016 at 7:28
@Sooraj Chandran it's looping because the click handler has not been called before he tests retval, so it's never changed. — Tibrogargan
– Tibrogargan, Commented Aug 26, 2016 at 7:31

Tibrogargan · Accepted Answer · 2016-08-26 07:51:53Z

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>

edited Aug 26, 2016 at 7:51

answered Aug 26, 2016 at 7:42

Tibrogargan

4,6323 gold badges21 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

anon Over a year ago

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 Over a year ago

@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

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related