表单提交后自动关闭引导警报答案

【问题标题】：auto closing bootstrap alerts after form submission表单提交后自动关闭引导警报
【发布时间】：2018-10-26 04:16:32
【问题描述】：

我有一个将数据提交到数据库的 ajax 表单，它在成功时使用引导警报，我希望警报在一段时间后关闭，但这需要每次都发生。

例如，如果我加载表单并进行一些更改并按下提交，它将显示成功警报然后关闭，如果我再次提交表单，例如我忘记更改某些内容，它将再次显示警报，但这次它没有关闭。

如何让警报每次都显示和关闭？

我在页面中提供了一个带有硬编码警报的示例，但是这是使用 javascript 写入页面的，我无法找到一种方法来提供一个完整的示例，其中包含显示成功警报的有效 ajax 代码没有后端 PHP。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Alerts</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body class="bg-dark text-white">
    <div id="wrap">
        <div class="container-fluid mt-4">
            <p>Example Form</p>

            <div class="col-sm-6">
                <form action="process_add_task.php" method="post" class="row form-horizontal align-items-start" role="form">
                    <input name="task_id" type="hidden" value="1" class="form-control input-sm" />
                    <div class="col-sm-12">
                        <div id="name-group" class="form-group">
                            <label for="name" class="control-label">Name</label>
                            <input name="name" type="text" class="form-control input-sm" />
                        </div>
                    </div>

                    <div class="col-sm-12 mx-auto text-center">
                        <button type="submit" class="btn btn-md btn-primary">Submit <span class="fa fa-arrow-right"></span></button>
                    </div>
                </form>

                <div class="col-sm-12 mx-auto"><div class="alert alert-success" role="alert">Success</div></div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <script src="static/js/bootstrap/bootstrap.js"></script>
    <script src="static/js/bootstrap/bootstrap.notify.js"></script>

    <script type="text/javascript">
        window.setTimeout(function() {
            $(".alert").fadeTo(500, 0).slideUp(500, function() {
                $(this).remove();
            });
        }, 1000);
    </script> 
</body>
</html>

【问题讨论】：

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

$(this).hide();

<script type="text/javascript">
    window.setTimeout(function() {
        $(".alert").fadeTo(500, 0).slideUp(500, function() {
            $(this).hide();
        });
    }, 1000);
</script>

【讨论】：

这是什么？这是答案吗？
像什么？ remove() 移除 hide() 只是样式会改变
解释你做了什么
虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。
@UlasoftKoinotUz 不幸的是，这不起作用，好吧，当警报已经作为 html 出现在页面中时，remove() 和 hide() 都可以工作。但是，如果在页面加载后将警报写入页面，则警报不会关闭它只会永远停留在那里，直到我手动关闭它。