【问题标题】：Bootstrap Alert Close when redirect重定向时引导警报关闭
【发布时间】：2017-02-12 16:44:27
【问题描述】：

当点击按钮时，调用了一个 ajax 请求。如果 ajax 响应成功，则显示警告框并重定向到另一个页面。

我的问题是当收到成功响应然后正确显示警报但重定向时该时间警报框消失。

我希望在重定向完成一段时间后也显示警报框并慢慢淡出。

这里我使用$('.flash_alert').delay(5000).fadeOut("slow");delay(5000)，我认为它使我的警报在重定向后可见但不起作用。

我的代码

index.php

<div class="flash_alert">
</div>
<button class="btn btn-success btn-lg" type="button" id="PIDetails-1_btn" name="PIDetails-1_btn">Save</button>


$(document).ready(function() {
    $("#PIDetails-1_btn").click(function(){


        $.ajax({
            url: "ajax.php",
            type: 'POST',
            dataType : "json",
            success: function(response){

                $(".flash_alert").html(response.msg).delay(5000).fadeIn();
                $('.flash_alert').delay(5000).fadeOut("slow");  
                if (response.status == "success") {

                        window.location.href = "success.php";

                } 
                else {

                }


            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                window.location.reload();
            },
        });
    }); 
});

ajax.php

    $data1['status'] = "success";
    $data1['msg'] = '<div class="alert alert-success fade in"><a href="#" data-dismiss="alert" class="close">×</a><h5> Successfully Saved. </div>';
    echo json_encode($data1);

我需要帮助

【问题讨论】：

重定向加载一个没有警报的新页面。我会立即重定向并在 success.php 页面上显示警报（并将其淡出）。

标签： javascript php jquery ajax

【解决方案1】：

Blied1952，您正在寻找的功能通常与单页应用程序相关联。这些 Web 应用程序在访问允许弹出窗口持续跨多个页面的新资源时，通常不会完全更改完整的 DOM。 http://sammyjs.org/ 是一个很好的起点，因为您已经习惯了 jQuery。

作为临时解决方案，如果必须按照网站当前的工作方式完成，您可以在页面加载时重新创建弹出窗口。

 <script type="text/javascript">
   jQuery(function(){ // Equivalent to jQuery.ready();
     jQuery.ajax({
        "url": "ajax.php",
        "type": 'POST',
        "dataType" : "json",
        "success": function(response){
            // Add content to popup.
            $(".flash_alert").html(response.msg);
            $('.flash_alert').delay(5000).fadeOut("slow");
        }
     });
   });
 </script>

如果可以通过多种不同方式访问此页面，那么您可以将 get 参数传递给名为 redirect 的页面，以确保仅在适当时出现弹出窗口。希望这可以帮助。祝你好运。

【讨论】：