（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刪除確認按鈕？

回答

相關問題