如何使用帶有 django 的 alertify js 來確認確定或取消

Question

嗨，當有人想刪除帖子時，我需要使用警報消息要求她/他刪除或取消

我試過了，但這是默認的警報瀏覽器

<button onclick="return confirm('are you sure you want to delete {{obj.title}}')" class="bt mx-auto"><a href="{% url 'posts:post-detail' obj.id %}"><img src="{% static 'icons/delete.svg' %}" alt=""></a></button>

我想使用這個警報

alertify.prompt("are you sure you want to delete ", "{{obj.title}}",
  function(evt, value ){
alertify.success('Ok: ' + value);
  },
function(){
alertify.error('Cancel');
  });

提醒

但我不確定我應該將該腳本放在模板中的哪個位置？ 我在按鈕刪除中使用它，替換為confirm()但似乎不起作用感謝您的幫助..

Answer 1

...我想在用戶想要刪除帖子時詢問用戶，（同意或不同意）如果選擇同意（ok）則帖子將被刪除，如果選擇不同意（取消）對帖子不做任何事情

In order to achieve the desired result you need to change a bit your html in order to pass the current element (refer: this keyword) and like reported in the examples section you can attach to the window object a function called showAlert :

window.showAlert = function(msg, title, ele) {
    var that = ele;
    alertify.prompt(msg, title,
            function(evt, value){
                ele.closest('div').remove();
            },
            function(){
                // do nothing 
            });
}

並將您的按鈕更改為：

<button onclick="return showAlert('are you sure you want to delete',  '{{obj.title}}')".....

 <script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.rtl.min.css"/> <script type="text/javascript"> window.showAlert = function(msg, title, ele) { var that = ele; alertify.prompt(msg, title, function(evt, value){ ele.closest('div').remove(); }, function(){ // do nothing }); } </script> <div> <p> This is the first post</p> <button onclick="return showAlert('are you sure you want to delete', 'post n. 1', this)">Click Me</button> </div> <div> <p> This is the second post</p> <button onclick="return showAlert('are you sure you want to delete', 'post n. 2', this)">Click Me</button> </div> <div> <p> This is the third post</p> <button onclick="return showAlert('are you sure you want to delete', 'post n. 3', this)">Click Me</button> </div>