Custom alert box, wait for input (yes / no) until resume javascript

Question

Im using magnific popup for my site and found this script to create alert/confirm boxes:

var confirmDialog = function(headline, message, yes, no) {

        var dialog = '<div class="dialog confirm mfp-with-anim white-popup-block white-popup-block2">';
        if (headline) {
            dialog += '<h2>' + headline + '</h2>';
        }
        dialog += '<div class="content"><p>' + message + '</p></div><hr/>';

        dialog += ' <div class="product-action center">';
        dialog += '     <button type="button" class="btn btn-primary btn-submit greenback">' + yes + '</button> ';
        if(no){
            dialog += '     <button type="button" class="btn btn-default btn-cancel">' + no + '</button>';
        }
        dialog += ' </div>';
        dialog += '</div>';

        $.magnificPopup.open({
            modal: true,
            items: {
                src: dialog,
                type: 'inline'
            },
            callbacks: {
                open: function() {
                    var $content = $(this.content);

                    $content.on('click', '.btn-submit', function() {
                        $.magnificPopup.close();
                    });

                    $content.on('click', '.btn-cancel', function() {
                        event.preventDefault();
                        $.magnificPopup.close();

                    });
                }
            }
        });
    };

This code can be found orginal here: https://gist.github.com/sabl0r/e8f37147a2a263f4b860

The problem it does not work like a alert()/confirm() call, the event got executed before any input(button) is clicked.

I could use preventDefault() to solve this problem but there is no way to resume the event after and i use this alert on many and very different ways. But this alert box get triggered always after the site is load already, so it wouldnt harm if the handler would stuck on that window waiting for response.

Is there any way to pause the Javascript handler and resume after a input button yes/no is triggered ?

First of all i came to the idea i could use a timer(setTimeout) wich is running infinity, but i guess thats not a good solution.

Next i came to the idea to use Jquery.when and done, but i wasnt able to get this working if its even possible.

If i was able to pause id like to preventDefault when no is clicked and continue the event if yes is clicked.

A call of this function could look like that:

<a href="de/site.html/del/46" onclick="confirmDialog('head', 'text', 'yes', 'no');"></a>

or

<form method="post" id="delform2" autocomplete="off" onsubmit="confirmDialog('head', 'text', 'Yes', 'No');">
<input id="btn_newsdel" name="btn_newsdel" type="submit" value="Newsletter sign out">
</form>

But as i said it can be very different. It would make no sense to attract the link and call that location after preventDefault and yes get triggered.

And submitting after preventDefault is called would be another problem wich wouldnt be easy to solve on second example.

Whats the best way to solve this problem ?

Why are you using this line `$(document).on('keydown', keydownHandler);` ? it is listening to any keydown on whole document, and automatically perform click on popup opener. Can you try commenting out that line ? — Aleksej, Aug 09 '19 at 08:02
This is not my code but on ESC NO is triggered and ENTER triggers YES on that example. I could live witouth keydowns. — delato468, Aug 09 '19 at 08:03
why did you intitalize you events the the plugin open function? — madalinivascu, Aug 09 '19 at 08:04
@madalinivascu The Html isnt in the code until the modal opens. So it needs to get intialized when the modal is load. But yes i could intialize it outside with a function and call that function here its true. — delato468, Aug 09 '19 at 08:16
why not use event delegation?, right now you are creating events each time you trigger the open function, this can have multiple side efects — madalinivascu, Aug 09 '19 at 08:21
You could try removing `onsubmit` from form and remove `type="submit"` from button and set onclick instead! then in your .btn-submit in script you just do `$('#delform2').submit();` — D. Dahlberg, Aug 19 '19 at 08:44
AFAIK and from my experience, at this time, it's not possible to pause JavaScript execution while you wait on the promise of an input. I spent quite a lot of time trying this, and in the end, decided to move away from submit and put some fancy styles on custom alerts and confirms and trigger these to do a submit of complete where needed — Can O' Spam, Aug 19 '19 at 09:00

score 0 · Answer 1 · answered Aug 21 '19 at 13:20

You can't pause JavaScript execution like confirm or alert.

You need use alternative as below:

<a style="cursor: pointer;" onclick="confirmDialog('head', 'text', 'yes', 'no', 'de/site.html/del/46');">CLICK</a>

script:

    var confirmDialog = function(headline, message, yes, no, url) {

    var dialog = '<div class="dialog confirm mfp-with-anim white-popup-block white-popup-block2">';
    if (headline) {
        dialog += '<h2>' + headline + '</h2>';
    }
    dialog += '<div class="content"><p>' + message + '</p></div><hr/>';

    dialog += ' <div class="product-action center">';
    dialog += '     <button type="button" class="btn btn-primary btn-submit greenback">' + yes + '</button> ';
    if(no){
        dialog += '     <button type="button" class="btn btn-default btn-cancel">' + no + '</button>';
    }
    dialog += ' </div>';
    dialog += '</div>';

    $.magnificPopup.open({
        modal: true,
        items: {
            src: dialog,
            type: 'inline'
        },
        callbacks: {
            open: function() {
                var $content = $(this.content);

                $content.on('click', '.btn-submit', function() {
                    $.magnificPopup.close();
                    window.location.href=url
                });

                $content.on('click', '.btn-cancel', function() {
                    event.preventDefault();
                    $.magnificPopup.close();

                });
            }
        }
    });
};

score 0 · Answer 2 · answered Aug 22 '19 at 09:45

You can do event.preventDefault() and get the href attribute ($(this).attr("href");) and save it in a variable inside the confirmDialog function and after user submits, you can use window.location.href to point the location to href attribute saved in the variable

score -1 · Answer 3 · answered Aug 19 '19 at 23:14

Actually, this is not possible that easy because a custom dialog will not stop the javascript execution like the built in alert() or confirm() functions. I'm not familiar with the custom control, anyway.. events are your friend here. 1st of all, make sure to pass the event as an argument, e.g.

<button onclick="call(event, 'a', 'b')">click</button>

define an event handler that return false and shows the dialog, e.g.

function call(e, a, b) {
    console.log(e.target);
    console.log(a);
    console.log(b);

    // showDialog + attach custom handler using the target and the function, e.g.
    // dialog.onOK = function(e) { .. do something .. };
    return false;
}

This is just an example and untested code.. to give you a hint and to help you understand why you have to use events here. Let me know if you have troubles implementing it.

Custom alert box, wait for input (yes / no) until resume javascript

3 Answers3