弹出警报后立即消失答案

【问题标题】：Alertify alerts vanishes right after popping up弹出警报后立即消失
【发布时间】：2020-09-01 12:54:26
【问题描述】：

我已经构建了一个快速应用程序，最后，我为应用程序中的一个删除按钮添加了警报。但是，在我点击“确定”之前，警报就消失了。

这是我的删除表单

<form
  action="/grades/<%=grade._id%>?_method=DELETE"
  method="POST"
  class="delete-form"
>
  <input
    type="submit"
    class="btn btn-danger mt-3"
    value="Delete Class"
    id="delBotton"
  />
</form>

这是我的main.js 文件：

const delBtn = document.getElementById('delBotton');

delBtn.addEventListener('click', () =>
  alertify.alert('This is an alert dialog.', function () {
    alertify.message('OK');
  })
);

最后，这是我的删除路线：

router.delete('/:id', middleware.checkGradeOwnership, (req, res) => {
  Grade.findByIdAndRemove(req.params.id, (err) => {
    try {
      res.redirect('/grades');
    } catch (err) {
      res.redirect('/grades');
      console.log(err);
    }
  });
});

我怎样才能解决这个问题？

【问题讨论】：

显然，您使用相同的按钮来发布表单和发出警报。因此，表单被发布，然后您尝试发出警报。同时，服务器通过发送重定向来响应表单，因此当浏览器收到重定向时，它会立即取消您的警报并加载新页面。在用户点击 OK 按钮之前，您不需要发布表单。

标签： javascript node.js express alertify alertifyjs

【解决方案1】：

由于您的输入有type="submit"，因此默认情况下会提交表单。为了防止这种默认行为，您可以在点击处理程序中调用e.preventDefault()，或者更恰当地将输入设置为type="button"，因为您不打算使用此按钮提交表单。接下来库 alertify 似乎有一个 onok 事件，您可以使用它来检查用户是否已确认，然后您可以使用它手动调用表单的提交函数之后用户已按下 OK，请参阅下面的可运行代码 sn-p 以获取工作示例：

const delForm = document.getElementById('delForm');
const delBtn = document.getElementById('delBotton');

delBtn.addEventListener('click', () => {
  alertify.alert('This is an alert dialog.', () => {
    alertify.message('OK');
  }).set({ 'invokeOnCloseOff': true, 'onok': () => delForm.submit()})
});

<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css" />
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css" />
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>

<form action="/grades/<%=grade._id%>?_method=DELETE" method="POST" class="delete-form" id="delForm">
  <input type="button" class="btn btn-danger mt-3" value="Delete Class" id="delBotton" />
</form>

注意：最初我忘记将invokeOnCloseOff 设置为true，但无论用户是否按下OK 按钮，这似乎都会导致onok 事件触发。 invokeOnCloseOff 应该设置为 true 如果您想区分单击 OK 按钮和以其他方式关闭警报模式。阅读更多here

【讨论】：

非常感谢...帮助