My Bootstrap alert will not display after being closed

Question

Hi I have the following alert that is hidden on the page

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

I display it with the following javascript

    $('#send_reject_btn').click(function () {
        var selRowIds = $("#ApprovalGrid").jqGrid('getGridParam', 'selarrrow');
        if (selRowIds.length > 0) {
            $('#reject_alert').show();
        } else {
            $('#selectCodeNotificationArea').show();
        }
    });

This is obviously linked to a button in my html.

After the alert is shown if I close it using the<button type="button" class="close" data-dismiss="alert">&times;</button> The next time I press the button to open the alert I can see $('#selectCodeNotificationArea').show(); being called in my debug screen but the alert doesn't display again.

Has anyone experienced this before?

Answer 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();
    });
});

Answer 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.]

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

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

Answer 5

Actually bootstrap alert are designed to be removed rather than hidden. You can tell that by looking at the alert message, it hasn't got any wrapping element. So any attempt to change alert message require extra code (finding text node elements). You should redesign your application and create new .alert element every time you willing to change it / show it again.

Answer 6

I used the following working approach.

$(document).ready(function(){
    $("#btnFV").click(function()
    {
        $("#alertFV").addClass("in");
    });

    $("#alertFV").on("close.bs.alert", function ()
    {
        $("#alertFV").removeClass("in");
        return false;
    });
});

Html body contains below alert

<button id="btnFV" class="form-control">Button To Show/Hide Alert</button>

<div id="alertFV"  class="alert alert-danger alert-dismissable fade show">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
      </button>
      <strong>Danger!</strong> 
    </div>