Question

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

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

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

我在页面中提供了一个带有硬编码警报的示例，然而这是使用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>

Answer 1

<强> $（本）.hide（）;

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

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

1 个答案: