jQuery dialog confirm delete does not trigger the delete

Question

I have the following function to be called when I click a delete button (I have got a list of user with their related id and delete button based on their id to be deleted) which works fine:

function confirmDelete(name, deleteURL) {
    var description = "Delete " + name + "?";
    var check = confirm(description);
    if(check == true) {
        self.location = deleteURL;
    } else {
        window.location.deleteURL = deleteURL;
    }
    return false;
}

Then I decided to override the confirm function and turn it to a jquery dialog like the following:

$(function () {

    window.confirm = function (message) {
        $('#overrideAlert').text(message).dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                "Delete item": function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    };
});

When I click the delete link, the jQuery dialog pops up properly but when I click the 'delete item' it does not actually trigger the delete, it only close the dialog (as it should). what I m missing here is probably there should be way (same as the JavaScript confirm to trigger the delete when ok is selected) to delete my item. Can anyone please let me know what am I missing here? Thanks.

Answer 1

The approach I take to this is to have the .confirm function return a promise.

var confirm = function() {
    var def = $.Deferred();
    ...
        "Delete Item": function() {
            $(this).dialog('close');
            def.resolve();
        },
        "Cancel": function() {
            def.reject();
        }
    }
    return def;
}

confirm("prompt").done(function() {
     console.log('success');
}).fail(function() {
     console.log('cancel');
});

Answer 2

You might have to re-write confirmDelete() to make this work.

Maybe something like this:

function confirmDelete(name, deleteURL) {
    var description = "Delete " + name + "?";
    confirm(description, doDelete, deleteURL);
}

function doDelete(check, deleteURL) {
    if(check == true) {
        self.location = deleteURL;
    } else {
        window.location.deleteURL = deleteURL;
    }
}


$(function () {

    window.confirm = function (message, callbackFunc, funcArg) {
        $('#overrideAlert').text(message).dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                "Delete item": function () {
                    $(this).dialog("close");
                    if ($.isFunction(callbackFunc)) {
                        callbackFunc(true, funcArg);
                    }
                },
                Cancel: function () {
                    $(this).dialog("close");
                    if ($.isFunction(callbackFunc)) {
                        callbackFunc(false, funcArg);
                    }
                }
            }
        });
    };
});

Better yet you could pass a callback function to your new confirm function...