My Bootstrap alert will not display after being closed

Solution 1:

The Data-dismiss completley removes the element. You would need to hide the alert if you are intending on showing it again.

For example;

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
    <button type="button" class="close" data-hide="alert">&times;</button>
    @TempData["selCode"]
</div>

and this JS

$(function(){
    $("[data-hide]").on("click", function(){
        $(this).closest("." + $(this).attr("data-hide")).hide();
    });
});

Solution 2:

Better way is to remove , data-dismiss="alert" from your tag , and use class name i.e. close to hide and show the error / warning .

// WHEN CLOSE CLICK HIDE THE ERROR / WARNING .
$(".close").live("click", function(e) 
{   
    $("#add_item_err").hide();
});

// SOME EVENT TRIGGER IT.
$("#add_item_err").show();

[ I am working on dynamically added elements , that's why I am using 'live' , you may have to change as per your req.]

Solution 3:

Bootsrap $(selector).alert('close') (http://getbootstrap.com/javascript/#alerts) actually removes alert element so you cannot display it again. To implement desired functionality just remove data-dismiss="alert" attribute from close button defintion and add some little event handler to hide the alert

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
   <button type="button" class="close alert-close">&times;</button>
   @TempData["selCode"]
</div>

<script>
$(function() {
   $(document).on('click', '.alert-close', function() {
       $(this).parent().hide();
   })
});
</script>

Solution 4:

I ran into this problem as well and the the problem with ticked solution above is that I still need access to the standard bootstrap alert-close events.

My solution was to write a small, customisable, jquery plugin that injects a properly formed Bootstrap 3 alert (with or without close button as you need it) with a minimum of fuss and allows you to easily regenerate it after the box is closed.

See https://github.com/davesag/jquery-bs3Alert for usage, tests, and examples.