How to override the default confirm in javascript/jquery

Question

Ok, I'm trying to implement this plugin for a custom confirmation box, but i'm a little lost as far as the return values go. Here's the original:

jQuery("a.confirm").click( function() { 

if ( confirm( '<?php _e( 'Are you sure?' ) ?>' ) ) return true; else return false;

});

and this what I'm trying to implement:

$("a.confirm").click(function(){

    var elem = $(this).closest('.item');

    $.confirm({
        'title'     : 'Delete Confirmation',
        'message'   : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
        'buttons'   : {
            'Yes'   : {
                'class' : 'blue',
                'action': function(){
                    elem.slideUp();
                }
            },
            'No'    : {
                'class' : 'gray',
                'action': function(){}  // Nothing to do in this case. You can as well omit the action property.
            }
        }
    });

really I just need to get the click event to recognize the second one instead of the first, and return correctly. Right now if you click, i get the original ( browser default) and i get the second afterwards. I think the "if statement" is whats throwing me off.

Any ideas?

Answer 1

First of all, the jQuery click method returns a jQuery object. It will not return whatever you specify to return in the anonymous function passed to .click() .

Secondly, your if statement has syntax errors. It should be written like this:

if ( confirm( "<?php _e( 'Are you sure?' ) ?>" ) ){
    return true;
} else {
    return false;
}