(AJAX) How do I make a jQuery POST delete confirmation button?

Question

I have a ajax POST delete method with a jQuery modal popup which deletes a course just when I click the Delete button. The popup shows up, but when I close the popup and refresh the page, I see the record is deleted.

Is there a way to implement a Confirmation button with jQuery popup, where it only gets deleted when the user clicks "Yes" and refreshes the page automatically?

Html

@Html.ActionLink("Delete", "Delete", new { id = item.CourseID }, new { @class = "deletebtn", @id=item.DepartmentID })

<div id="dialog" title="Delete Department" style="display: none">
    <p>Are you sure you want to delete this Course?</p>
    <button id="confirm-deletion">Yes</button>
    <button id="abort-deletion">No</button>
</div>

Script

    <script>
    $(function () {
        $(".deletebtn").on("click", function (e) {
            e.preventDefault();
            $('#dialog').dialog();

            var btnobj = $(this);
            var id = btnobj[0].id;

            $('#confirm-deletion').on("click", function() {

                //$('#dialog').dialog();

                //var btnobj = $(this);
                //var id = btnobj[0].id;
                //console.log(btnobj);

                var token = $('input[name="__RequestVerificationToken"]').val();
                var data = { id: id, __RequestVerificationToken: token };

                $.ajax({
                    type: "POST",
                    url: "@Url.Action("Delete","Course")",
                    data: data,
                    //ajaxasync: true,
                    success: function () {
                        console.log("success");
                    },
                    error: function () {
                        console.log("failed");
                    }
                });
            });
        });
    });
</script>

Answer 1

What gerrit said, define the click functions for each button in your dialog and move your code with ajax into a function. Call the function in the click.

 $( ".selector" ).dialog({
  buttons: [
    {
      text: "Ok",
      icons: {
        primary: "ui-icon-heart"
      },
      click: function() {
        $( this ).dialog( "close" );
      }

      // Uncommenting the following line would hide the text,
      // resulting in the label being used as a tooltip
      //showText: false
    }
  ]
});

jquery dialog docs

Answer 2

You open the dialog, but that does not keep the AJAX request from being executed. Why would it? What you do is simply opening a dialog and then sending your AJAX request immediately. You need to execute the request when a button inside of the modal dialog is clicked, not when it is opened.

HTML:

<div id="dialog" title="Delete Department" style="display: none">
  <p>Are you sure you want to delete this Course?</p>
  <button id="confirm-deletion">Yes</button>
  <button id="abort-deletion">No</button>
</div>

Javascript:

$('#confirm-deletion').click(function() {
  // Send request here
});