MVC 3 Ajax.ActionLink with JQuery UI Confirm Dialog

Question

I have a @Ajax.ActionLink which calls a Delete Action. Now I want to use JQuery UI Dialog confirm instead the regular \"Confirm\" attribute of the Ajax link. I hook the eve

Answer 1

Here is how I have implemented the confirm functionality with jquery UI:

$(document).ready( function () {
    $("#dialog-confirm").dialog({
      autoOpen: false,
      modal: true,
      resizable: false,
      height:180,
    });

    $(".deleteLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog-confirm").dialog({
        buttons : {
        "Confirm" : function() {
            window.location.href = targetUrl;
        },
        "Cancel" : function() {
            $(this).dialog("close");
        }
        }
    });

    $("#dialog-confirm").dialog("open");
    });

} );

and in your html you can add the dialog div

 
    
This item will be deleted. Are you sure?
 
 

your action link should look like this

@Html.ActionLink("Delete", "UpdateDelete", new { id = item.Id }, new { @class = "deleteLink" })