Question

I’ve search and can’t find a solution. Hopefully I’m overlooking something simple.

What I’m after is a standard jquery confirmation, a la:

$('.confirm').click(function(){
    var answer = confirm('Delete '+jQuery(this).attr('title'));
    return answer // answer is a boolean
});    

However, I’d like to use SimpleModal for the alert window. I can get the SimpleModal to appear and work if I do anything except try and get the original href to proceed should “Yes” be clicked in the SimpleModal dialog.

Code as it currently stands…..

jQuery(function ($) {

$('.confirm').click(function (e) {
    e.preventDefault();
    confirm("", function () {
        //alert('yes');
        $('.confirm').trigger('click');
    });
});
});

function confirm(message, callback) {
$('#confirm').modal({
    closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
    position: ["20%",],
    overlayId: 'please-wait',
    containerId: 'confirm-container', 
    onShow: function (dialog) {
        var modal = this;
        $('.message', dialog.data[0]).append('Delete '+$('a.confirm').attr('title'));

        // if the user clicks "yes"
        $('.yes', dialog.data[0]).click(function () {
            // call the callback
            if ($.isFunction(callback)) {
                callback.apply();
            }
            // close the dialog
            modal.close(); 
        });
    }
});
}

I’ve also got an alert commented out in the confirm function. The alert does work. But how do I get the browser to continue to the original href?

Thanks!

Answer 1

First of all you’ll need to modify your click handler to pass the url of the link:

jQuery(function ($) {
    $('.confirm').click(function (e) {
        e.preventDefault();
        confirm($(this).prop("href"), "", function () {
            $('.confirm').trigger('click');
        });
    });
});

If you’re using jQuery 1.6 or less, use $(this).attr("href") instead of .prop()

Then modify the function to use that url:

function confirm(url, message, callback) {
    $('#confirm').modal({
        closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
        position: ["20%",],
        overlayId: 'please-wait',
        containerId: 'confirm-container', 
        onShow: function (dialog) {
            var modal = this;
            $('.message', dialog.data[0]).append('Delete '+$('a.confirm').attr('title'));

            // if the user clicks "yes"
            $('.yes', dialog.data[0]).click(function () {
                // call the callback
                if ($.isFunction(callback)) {
                    callback.apply();
                }
                // close the dialog
                modal.close(); 

                // transfer to the url:
                window.location.assign(url);
            });
        }
    });
}