Bootstrap Alert - show then hide - cannot show again

Question

I have a simple hidden dismissible bootstrap alert:

<div id="selectedAssets" class="alert alert-info text-center alert-dismissible" role="alert" style="display:none">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <div id="selectedAssetsDetails"> </div>
</div>

<button type="button" id="getSelectedAssets" class="btn btn-primary">Show Selected Assets</button>

A button is set to run a script that displays the hidden alert:

$("#selectedAssetsDetails").html('Selected Assets: '+values);
$("#selectedAssets").show();

This works successfully the first time to show the alert, but if the user closes the alert it won't display the alert again by clicking the button to show the alert. I assumed:

$("#selectedAssets").show();

would always show the alert?

Answer 1

Bootstrap documentation for alerts states that:

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.

(my emphasis)

So that is why show() does not work the second time - because the element is no longer there.

So a solution is to remove the data-dismiss="alert" attribute and handle the close event yourself. With the code below, I added an id to the close button and another event handler to your original code:

let values = 'foo';

$('#closeAlert1').on('click', function() {
  $("#selectedAssets").hide();  
});

$('#getSelectedAssets').on('click', function() {
  $("#selectedAssetsDetails").html('Selected Assets: '+values);
  $("#selectedAssets").show();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="selectedAssets" class="alert alert-info text-center alert-dismissible" role="alert" style="display:none">
  <button type="button" id="closeAlert1" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <div id="selectedAssetsDetails"> </div>
</div>

<button type="button" id="getSelectedAssets" class="btn btn-primary">Show Selected Assets</button>

Answer 2

data-dismiss remove Div from HTML , you must set your action for Close Button like this

$('#getSelectedAssets').click(function() {
  $('#selectedAssets').show();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="selectedAssets" class="alert alert-info text-center alert-dismissible" role="alert" style="display:none">
  <button type="button" class="close" onclick="$('#selectedAssets').hide()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <div id="selectedAssetsDetails">Alert </div>
</div>

<button type="button" id="getSelectedAssets" class="btn btn-primary">Show Selected Assets</button>