Question

I have a requirement to show a custom modal jQuery confirmation when a user clicks on an Ajax ActionLink. However, when I try to add this onto the Ajax link, the ajax call continues and doesn’t allow the confirmation to stop the call. I’ve tried using OnBegin function, but when I call preventDefault it throws a method not supported error. If I return false it doesn’t allow any way to continue the call. Does anybody know how to achieve this?

Here is the link I’m trying to add the confirmation to:

<div class="sign">@Model.Email | @Ajax.ActionLink("Sign Out", "SignOut", new { area = "", controller = "Account" }, new AjaxOptions { HttpMethod = "POST" })</div>

And here is the code that I’m trying to execute:

    $('#MainNav ul li a, .header-top a').click(function (e) {
        e.preventDefault();
        var link = $(this).attr('href');
        $('.confirm-dialog .confirm-this').attr('href', link);

        $('.confirm-dialog').dialog({
            modal: true,
            draggable: false,
            overlay: { opacity: 0.8 },
            resizable: false,
            width: 400,
            open: function () {
                $('.close-dialog').click(function (e) { e.preventDefault(); $(this).parents('.ui-dialog').remove(); });
                $('.confirm-this').click(function () { });
            }
        });
    });

Any help would be greatly appreciated. I’ve already done a lot of searching and trying to figure this out but am left with the same basic problem. How do I stop the Ajax call until the User clicks on Confirm?

Answer 1

Don’t rely too much on the predefined ActionLink way. There are two ways to archive this:

1. The Microsoft unobstrucive Ajax methods will be added automatically to the link – you have to remove them with jquery and do the ajax call by your own. But you have to remove the handler with jquery after they have been added – thats maybe strange and I don’t know when to do that exactly.

2. Don’t use the @Ajax.ActionLink in your case – just use build your own a tag with @Url.Action and set your onclick handler to your a tag. But you have to do the ajax call on your own as well.

In both cases to build your own ajax call just change your confirm:

$('.confirm-this').click(function () { $.post(link) });