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

-1

我有一个ajax POST删除方法与一个jQuery模式弹出窗口删除课程，当我点击删除按钮。弹出窗口出现，但是当我关闭弹出窗口并刷新页面时，我看到记录被删除。（AJAX）如何制作jQuery 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>

来源

2017-03-08 StraightUp

-1

打开对话框，但不保留从正在执行的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 
});

来源

2017-03-08 20:36:10 gerrit

我需要的'的preventDefault（）'两者的功能，如点击打开它，然后点击实际删除记录？ – StraightUp

首先，我必须将Martinas的答案称为正确答案，因为她显然比我更了解jQuery对话框API。但要回答你的问题：只要你没有点击表单一侧的提交按钮，我认为你不需要任何'preventDefault（）'。 – gerrit

我做了'确认 - 删除'按钮来发送它下面的AJAX请求，但是当点击“是”时对话框不会自动关闭，我必须手动刷新页面。 – StraightUp

什么格里特说，定义每个按钮的点击功能在你的对话框并用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

来源

2017-03-08 20:40:40 Martina

删除后可以自动刷新页面吗？现在，我只能在手动刷新页面后验证记录是否被删除。 – StraightUp

你可以添加'window.location.reload（）;'在ajax成功之后刷新页面，或者如果您有权访问ajax成功中的'id'，您还可以选择该项并在没有页面重新加载'$（'＃'+ id）.remove（）'的情况下将其删除。你甚至可以将对话框中的id从ajax成功传递给对话框。 – Martina

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

回答

相关问题