JQuery Dialog Confirmation Pop Up

<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-1.11.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script> 

 @Html.ActionLink("Delete JQuery", "Delete", new { id = item.CategoryID }, new { @class = "delete-link" })
 

 
<div id="delete-dialog" title="Confirmation" class="my-dialogcls">
    <p>Are you sure you want to delete this Category?</p>
</div>

<script type="text/javascript">
    var deleteLinkObj;
 
    $(document).ready(function () {
      
        var deleteLinkObj;
        // delete Link
        $('.delete-link').click(function () {
            deleteLinkObj = $(this);  //for future use
            $('#delete-dialog').dialog('open');
            return false; // prevents the default behaviour
        });
 
        //definition of the delete dialog.
        $('#delete-dialog').dialog({
            autoOpen: false, width: 400, resizable: false, modal: true, dialogClass: 'my-dialog', //Dialog options
            open: function () {
                $("#btnok").css({ 'visibility': 'hidden' });
                $("#btnContinue").css({ 'visibility': 'visible' });
            },
            close: function () {
                $("#delete-dialog").html("Are you sure you want to delete this Category?");//.dialog("open");
                $("#btnContinue").css({ 'visibility': 'visible' });
                $("#btnok").css({ 'visibility': 'hidden' });
                $(".ui-dialog-title").html("Confirmation");
            },
 
            buttons: {
                "Continue": {
                    id: "btnContinue", text: "Continue", click: function () {
                        $.post(deleteLinkObj[0].href, function (data) {  //Post to controller action by getting url from the href of clicked link
                            if (data == '<%= Boolean.TrueString %>') {
                                deleteLinkObj.closest("tr").hide('slow'); //Hide Row that is deleted
                                //(optional) Display Confirmation
                            }
                            else {
                                $("#delete-dialog").html("Category cant be updated !").dialog("open");
                                //(optional) Display Error
                                $(".ui-dialog-title").html("Error");
                                //  $('#delete-dialog .ui-button-text:contains(Continue)').text('OK');
 
                                // $('.my-dialog .ui-button-text:contains(Continue)').text('OK');
                                $('.my-dialog .ui-button-text:contains(OK)').show();
 
                                // hide the continue button and show the OK button
                                $("#btnContinue").css({ 'visibility': 'hidden' });
                                $("#btnok").css({ 'visibility': 'visible' });
 
                                //To show the Trash Icon alongwith the button
                                //  $('.ui-dialog-buttonpane').find('button:contains("OK")').prepend('<span style="float:left;" class="ui-icon ui-icon-trash"></span>');
 
                              $('.ui-dialog-buttonpane')
                                        .find('button:contains("OK")')
                                        .removeClass('ui-button-text-only')
                                        .addClass('ui-button-text-icon-primary')
                                        .prepend('<span class="ui-icon ui-icon-trash"></span>');
                            }
                        });
 
                        $(this).dialog("close");
                    }
                },
 
 
                "Cancel": {
                    id: "btnCancel", text: "Cancel", click: function () {
                        $(this).dialog("close");
                        $(".ui-dialog-title").html("Confirmation");
                        $(this).html("Are you sure you want to delete this Category?").attr('title', 'Confirmation');
 
                    }
                },
 
                "OK": { id: "btnok", text:"OK", click: function () {
                    $(this).dialog("close");
                    $('.my-dialog .ui-button-text:contains(Continue)').show();
                    $("#delete-dialog").html("Are you sure you want to delete this Category?");
                    //(optional) Display Error
                    // $(".ui-dialog-title").html("Error");
 
                    // on next time click, show the continue button and hide the OK button
                    // put below lines in close function
                  //  $("#btnContinue").css({ 'visibility': 'visible' });
                 //   $("#btnok").css({ 'visibility': 'hidden' });
                }
                } 
            } // buttons bracket close
        });
    });
 
</script> 

Posted in: JQUERY