如何将 alertify js 与 django 一起使用以确认确定或取消

how to use alertify js with django to confirm either ok or cancel

嗨,当有人想删除 post 时,我需要使用提醒消息 要求 her/him 删除或取消

我试过了,但这是默认的警报浏览器

<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() 但似乎不起作用 感谢您的帮助..

...i want to ask the user when a user wants to remove a post ,( agree or disagree ) if selected agree(ok) then the post will be remove , if selected disagree (cancel) do nothing with the post

为了达到预期的结果,您需要稍微更改 html 以传递当前元素(参考:this 关键字)和 正如 examples section 中所报告的那样,您可以将一个名为 showAlert:

的函数附加到 window 对象
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>