Here is a nice confirmation handler to replace javascript:confim() links using jQuery UI…

$(function() {
    $('.ui-icon-trash').click(function(event){
        event.preventDefault();
        var targetUrl = $(this).attr('href');
        $('<div title="Confirmation Required"><p>Delete this record?</p></div>').dialog({
            autoOpen: true,
            modal: true,
            resizable: false,
            buttons: {
                Yes: function() {
                    window.location.href = targetUrl;
                },
                No: function() {
                    $(this).remove();
                }
            }
        });
    });
});

I use it for “delete” links (should be obvious) but it can be easily adjusted for any other type of confirmation.

Cheers!

This question is posted quite a bit and nobody seems to be able to provide a good solution that won’t behave questionably. So here’s my take on it…

$('<div id="myDialog"></div>').appendTo('body').dialog({
    autoOpen: false,
    modal: true,
    closeOnEscape: true,
    buttons: {
        OK: function() {
            $.ajax({
                type: 'POST',
                url: 'save.php',
                data: $('#myDialog :input').serialize(),
                error: function(xml, status, error) {
                    $('#myDialog').html('<p><strong>Error Code:</strong> '+status+'</p><p><strong>Explanation:</strong> '+error+'</p>');
                }
            });
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    open: function() {
        $(this).html('').load('form.php');
    },
    focus: function() {
        $(':input', this).keyup(function(event) {
            if (event.keyCode == 13) {
                $('.ui-dialog-buttonpane button:first').click();
            }
        });
    }
});

Note: You can also trigger the event on any element (not just form fields) by using $(this) as the selector.

That’s it, enjoy 🙂