如何在 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');
  });

alertify

但我不确定我应该将该脚本放在模板中的哪个位置？我在按钮 delete 中使用它，替换为 confirm() 但似乎不起作用 感谢您的帮助..

Answer 1

...我想在用户想要删除帖子时询问用户，（同意 或不同意）如果选择同意（确定），则帖子将被删除，如果 选择不同意（取消）对帖子不做任何事情

为了达到预期的效果，您需要对 html 进行一些更改以传递当前元素（参考：this 关键字）和 就像examples section 中报告的那样，您可以将一个名为 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>