Question

I have this link on my page:

<a href='/Admin/Users/Delete/123' class='confirm'>Delete</a>

<div id="dialog-confirm" title="Delete this user?">
    <p>
        <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        This item will be permanently deleted and cannot be recovered. Are you sure?
    </p>
</div>

And this javascript:

$("#dialog-confirm").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        "Delete": function () {
            window.location.href = $(this).attr("href"); ;
         },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$("a.confirm").click(function () {
    $("#dialog-confirm").dialog("open");
});

The dialog opens like I should when I click the link. The only problem is that it doesn’t wait for me to confirm or cancel, the dialog just pops up and it redirects to the url.

What am I doing wrong here?

Answer 1

$("a.confirm").click(function () {
    $("#dialog-confirm").dialog("open");
    return false;
});

You need to prevent the default action from occurring by returning false.