Question

Following up from this question, I’m trying to implement an unobtrusive confirm dialog.

$(document).ready(function () {
    $("[data-confirmPrompt]").click(function (event) {
        var confirmPrompt = event.currentTarget.attributes['data-confirmPrompt'].value;
        event.preventDefault();
        $.prompt(confirmPrompt, {
            buttons: { Yes: true, No: false },
            callback: function (v, m, f) {
                if (v) {
                    // User clicked Yes.  Unbind handler to avoid
                    // recursion, then click the target element again
                    $(event.currentTarget).unbind('click');
                    event.currentTarget.click();
                }
            }
        });
    });
});

When the user has clicked on “Yes”, I want the default action associated with the event to execute. I’ve done it above by unbinding the jQuery handler, and clicking the element again. This works fine when submitting a form or navigating to a different page – but of course does not work in AJAX-enabled pages, where I want to keep the jQuery event handler.

Is there an alternative generic way to execute the default action? Logically something like event.executeDefault().

Answer 1

Using the suggestion Alexey Lebedev made in his second comment, my current implementation now looks like the sample below, except that I’ve also added my own implementation of localization for the button labels.

Notes:

• I’m now using a jqueryUI dialog widget
• Note the use of .delegate so that the handler is “ajax-aware”, i.e. works on elements added to the DOM after the page is loaded, e.g. as a result of an AJAX call
• Uses a flag to prevent recursion when the user clicks Yes on the confirm dialog.
• Uses jquery 1.6.4 and jquery-ui-1.8.16

If anyone can suggest improvements, please chime in.

<!-- Examples of usage -->
<input type='submit' data-confirm="OK to delete customer 123?" ... />
<a href="..." data-confirm="OK to navigate?" ... />

<!-- Implementation -->
<script type="text/javascript">
    var confirmClickHandler = function (event) {
        if ($(event.currentTarget).data('isConfirming')) return;
        var message = event.currentTarget.attributes['data-confirm'].value;
        event.preventDefault();
        $('<div></div>')
                .html(message)
                .dialog({
                    title: "Confirm",
                    buttons: {
                        "Yes": function () {
                            $(this).dialog("close");
                            $(event.currentTarget).data('isConfirming', true);
                            event.currentTarget.click();
                            $(event.currentTarget).data('isConfirming', null);
                        },
                        "No": function () {
                            $(this).dialog("close");
                        }
                    },
                    modal: true,
                    resizable: false,
                    closeOnEscape: true
                });
    };

    $(document).ready(function () {
        $("body").delegate("[data-confirm]", "click", confirmClickHandler);
    });
</script>