Question

我有一个带有jQuery模式弹出框的ajax POST删除方法，当我单击“删除”按钮时，它会删除一个课程。弹出窗口显示，但当我关闭弹出窗口并刷新页面时，我看到记录被删除。

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

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的代码移动到一个函数中。在单击中调用该函数。

<table border="1" cellpadding="0" cellspacing="0" width="100%">
	<tbody>
		<tr style="background-color:blue; color:white;">
			<td rowpsan="2">A</td>
			<td>B</td>
			<td>C</td>
			<td>D</td>
		</tr>
		<tr>
			<td style="background-color:yellow;">1</td>
			<td style="background-color:yellow;">2</td>
			<td style="background-color:yellow;">3</td>
		</tr>
	</tbody>
</table>

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

（AJAX）如何制作jQuery POST删除确认按钮？

2 个答案: