Jquery - Custom Confirm Dialog

Question

I am in need to create a custom confirm dialog without any external libraries. Reason is, less code and i want style the design how i want.

Fiddle: https://jsfiddle.net/j4hmdy17/

The issue i am having with the code:

if( my_confirm() ) {
    console.log( 'Process ajax!' );
}

The condition doesn't return true when dialog confirmed box button "Yes" is clicked.

Code:

if( my_confirm() ) {
    console.log( 'Process ajax!' );
}

function my_confirm() {

var dialog = '<div id="confirm-dialog" class="confirm-dialog-open">';
        dialog += '<div class="confirm-dialog">';
            dialog += '<div class="confirm-dialog-container">';
                    dialog += '<div class="confirm-dialog-header">';
                        dialog += '<div class="confirm-heading">Are you sure?</div>';
                    dialog += '</div>';

                    dialog += '<div class="confirm-dialog-footer">';
                        dialog += '<button class="confirm-cancel">No</button>';
                        dialog += '<button class="confirm-success">Yes</button>';
                    dialog += '</div>';
            dialog += '</div>';
        dialog += '</div>';
    dialog += '</div>';

jQuery( '#dialog_container' ).html( dialog );
jQuery( document ).on( 'click', '#confirm-dialog .confirm-success', function() {
    return true;
});

return false;

}

Anyone?

The `return true;` you have is inside the click handler. It will not return true from the `my_confirm` function. — , May 14 '19 at 12:25
@Chris G, If i remove the click handler, what is the right way to do it? — JosephMurphy, May 14 '19 at 12:27
You can use a Promise: https://jsfiddle.net/khrismuc/wyr8cpef/ — , May 14 '19 at 12:30
Related (duplicate?): https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323 — freedomn-m, May 14 '19 at 12:48
You can keep the call simple using async/await: https://jsfiddle.net/khrismuc/wyr8cpef/ — , May 15 '19 at 10:09

score 0 · Accepted Answer · answered May 14 '19 at 12:30

0

The native confirm function, like alert, is blocking, and prevents any further script execution or page interaction until the user responds to the prompt. This has no equivalence in anything you can write in the GUI.

You will need to adapt your custom confirm function to be callback driven.

my_confirm(function() {
   alert('Process ajax!');
});

function my_confirm(confirmCallback, cancelCallback) {
    // your confirm dialog

    jQuery( document ).on( 'click', '#confirm-dialog .confirm-success', function() {
       if(typeof confirmCallback === 'function') {
           confirmCallback();
       }
    });

}

answered May 14 '19 at 12:30

David Hedlund

128,221
31
203
222

Alert function was used only for demonstration, will not use my_confirm with alert at all. Is it possible to keep the function simple like: if( my_confirm() ) { console.log( 'confirm button clicked!' ); } – JosephMurphy May 14 '19 at 12:58
@JosephMurphy: No, nevermind the comment about alert, it was just a comparison. `confirm` is also blocking, and you cannot write your own blocking component. Thus, you cannot write a custom `confirm` function that mimics the behaviour of the native implementation. You will have to use a callback (or a promise). – David Hedlund May 14 '19 at 13:04

Jquery - Custom Confirm Dialog

1 Answers1