(AJAX) 如何制作 jQuery POST 删除确认按钮？

Question

我有一个带有 jQ​​uery 模态弹出窗口的 ajax POST 删除方法，当我单击删除按钮时它会删除课程。弹出窗口出现，但是当我关闭弹出窗口并刷新页面时，我看到记录已被删除。

有没有办法实现一个带有 jQ​​uery 弹出窗口的确认按钮，只有当用户点击“是”并自动刷新页面时它才会被删除？

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>
    $(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

正如 gerrit 所说，为对话框中的每个按钮定义点击函数，并使用 ajax 将代码移动到函数中。在点击中调用函数。

 $( ".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

您打开了对话框，但这并不能阻止 AJAX 请求被执行。为什么会呢？您所做的只是打开一个对话框，然后立即发送您的 AJAX 请求。您需要在单击模态对话框内的按钮时执行请求，而不是在打开时执行请求。

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
});