unobtrusive javascript confirm using bootstrap modal (bootbox)

Question

I have a link in my MVC application:

<a class="btn  btn-default" confirm="Are you sure you want to delete the selected group? This action cannot be undone!" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#TabsId-5" href="/Groups/DeleteGroup/38" id="btnDelGrp"><i class="glyphicon glyphicon-remove"></i> Delete Selected Group</a>

and the following js:

$(document).ready(function ()
{
$("[confirm]").each(function () {
    $(this).click(function (e) {
        e.preventDefault();
        var action = function () { alert("no action"); };
        switch ($(this).prop('tagName'))
        {
            case 'A':
                var url = $(this).attr("href");
                action = function () { document.location.href = url; };
                break;
            case 'BUTTON':
                var form = $(this).closest('form');
                if ($(this).attr("name") != "" && $(this).attr("value") != "")
                {
                    var foundIndex = $(form).attr('action').indexOf($(this).attr("name"));
                    if (foundIndex == -1) //don't add the same param over and over
                    {
                        $(form).attr('action', $(form).attr('action') + "?" + $(this).attr("name") + "=" + $(this).attr("value"));
                    }
                    else //else replace it
                    {
                        $(form).attr('action', $(form).attr('action').substring(0, foundIndex) + $(this).attr("name") + "=" + $(this).attr("value"));
                    }
                }
                action = function () { form.submit(); };
                break;
        }
        bootbox.confirm($(this).attr("confirm"), function (result) {
            if (result)
                action();
        });
    });
});
});

I'm having the issue where the link is firing after the dialog shows no matter what. The unobtrusive ajax doesn't seem to respect the preventDefault. I know there is a workaround using the data-ajax-confirm option, but this uses the generic js alert popup. Is there a way to get these two things to work together?

Answer 1

I would stop using the unobtrusive since it seems to be failing at it's primary goal: being unobtrusive!

Instead, use the jQuery ajax method. Here's a sample fiddle: http://jsfiddle.net/VM4HH/

And here's the snippet of code that's making the anchor functionality work:

$(function() {
    $('body').on('click', 'a.confirm', function(e) {
        e.preventDefault();
        var $tar = $(e.target);

        customConfirm($tar.data('confirm'), function() {

            var $contentTarget =  $('#' + $tar.data('custom-ajax-target-id'));

            $contentTarget.html('Loading...');

            $.ajax({
                url: $tar[0].href,
                // Following two lines for the JSFiddle demo only
                type: 'POST',
                data: { html: '<h1>' + $tar.html() + '</h1>', delay: 1 }
            }).success(function(data) {
                $contentTarget.html(data);
            });
            // You'll want to attach error handlers here to your promise
        });
    });
});

Here's the sample HTML:

<a href="/echo/html/" data-confirm="Go to Google?" data-custom-ajax-target-id="content"  class="confirm">Googs</a><br />
<a href="/echo/html/" data-confirm="Go to Yahoo?" data-custom-ajax-target-id="content" class="confirm">Yahoo</a><br />

Answer 2

you should be able to hack it to say function="return false;"

<a class="btn  btn-default" confirm="Are you sure you want to delete the selected group? This action cannot be undone!" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#TabsId-5" href="#" data-href="/Groups/DeleteGroup/38" id="btnDelGrp" function="return false;"><i class="glyphicon glyphicon-remove"></i> Delete Selected Group</a>

Or better, just use a data-href instead of href:

<a class="btn  btn-default" confirm="Are you sure you want to delete the selected group? This action cannot be undone!" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#TabsId-5" href="#" data-href="/Groups/DeleteGroup/38" id="btnDelGrp"><i class="glyphicon glyphicon-remove"></i> Delete Selected Group</a>

and js:

$(document).ready(function ()
{
$("[confirm]").each(function () {
    $(this).click(function (e) {
        e.preventDefault();
        var action = function () { alert("no action"); };
        switch ($(this).prop('tagName'))
        {
            case 'A':
                var url = $(this).attr("data-href");
                action = function () { document.location.href = url; };
                break;
            case 'BUTTON':
                var form = $(this).closest('form');
                if ($(this).attr("name") != "" && $(this).attr("value") != "")
                {
                    var foundIndex = $(form).attr('action').indexOf($(this).attr("name"));
                    if (foundIndex == -1) //don't add the same param over and over
                    {
                        $(form).attr('action', $(form).attr('action') + "?" + $(this).attr("name") + "=" + $(this).attr("value"));
                    }
                    else //else replace it
                    {
                        $(form).attr('action', $(form).attr('action').substring(0, foundIndex) + $(this).attr("name") + "=" + $(this).attr("value"));
                    }
                }
                action = function () { form.submit(); };
                break;
        }
        bootbox.confirm($(this).attr("confirm"), function (result) {
            if (result)
                action();
        });
    });
});
});