Bootstrap 4 Show Alerts

Question

In Bootstrap v4 how do I show alerts through JavaScript? My goal is to have the alert hidden when the page loads then when a AJAX call completes turn the alert on to display a message.

I see in the documentation how close the alert but no where how to display it: https://getbootstrap.com/docs/4.0/components/alerts/#methods

I have the following fiddle where I show the alert first (not what I want) then press a button to close it. A second button is there to turn it back on but no clue what to pass to it to make it work. I figure if I can make this sample work I can then figure out how to make it work with the alert not displayed on the page load

https://jsfiddle.net/jhf2e5h6/

<div class="row">
  <div class="col-sm-12">
     <div id="divInfo" class="alert alert-success show fade ">
        <div class="alert-heading"> :</div> <p></p>
     </div>
 </div>
</div>

<button id="close">Close</button>
<button id="show">Show</button>




<script type="text/javascript">
    $(function () {




        $('#close').on('click', function () {
            $('#divInfo').alert('close');
        });

        $('#Show').on('click', function () {
            $('#divInfo').alert('?????');
        });

        // 
    });


</script>

Answer 1

Method .alert destroys the DOM. So no possibility to go back. Have a look to documentation : https://getbootstrap.com/docs/4.0/components/alerts/#methods

You should try to use removeClass/addClass.

$('#close').on('click', function () {
    $('#divInfo').removeClass('show');
});

$('#show').on('click', function () {
    $('#divInfo').addClass('show');
});

And you have mistake on 'Show', you should try 'show'.