Bootstrap Alert Close when redirect

Question

Here when click on button a ajax request called.If ajax response will be success then alert box shown and redirect to another page.

My problem is when success response received then alert correctly shown but when redirect that time alert box disappear.

I want alert box also show after redirect complete for sometime and fadout slowly.

here I use $('.flash_alert').delay(5000).fadeOut("slow"); delay(5000),I think it make my alert visible after redirect but not work.

My code

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);

I need Help

Answer 1

Blied1952, the functionality that you are looking for is more commonly associated with single page apps. These web applications don't generally change out the full DOM completely when reaching out to a new resource which allows popups to persist across multiple pages. A great place to get started since you are accustomed to jQuery is http://sammyjs.org/ .

As a temporary solution if it had to be done the way the site currently works you could recreate the popup on page load as such.

 <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>

If this page is reachable through many different means then you could pass a get parameter to the page named redirect to ensure the popup only appears when appropriate. Hope this helps. Good luck.