CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-4twitter-bootstrap-4
user3693281
user3693281

Reputation: 117

Bootstrap 4 Show Alerts

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>

Upvotes: 4

Views: 12819

Answers (4)

rybo111
rybo111

Reputation: 12588

Bootstrap 4 has .d-none, which does display: none. This comes in handy if your alert contains a dismiss button.

So add .d-none to your .alert element (e.g. on page load), and do the following:

// Show the alert
$('.alert').removeClass('d-none').addClass('show');

// Hide the alert
$('.alert').addClass('d-none').removeClass('show');

Upvotes: 2

Jos&#233; Reinaldo
Jos&#233; Reinaldo

Reputation: 11

I prefer to dynamically create alert content 

<div id="alert"></div>

<script type="text/javscript">
function showAlert(obj){
    var html = '<div class="alert alert-' + obj.class + ' alert-dismissible" role="alert">'+
        '   <strong>' + obj.message + '</strong>'+
        '       <button class="close" type="button" data-dismiss="alert" aria-label="Close">'+
        '           <span aria-hidden="true">×</span>'+
        '       </button>'
        '   </div>';

    $('#alert').append(html);
}

 $('#Show').on('click', function () {
    showAlert({message: 'Hello word!', class:"danger"});
 });

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362390

close removes it from the DOM so it can't be re-shown.

You can instead toggle the invisible class...

https://www.codeply.com/go/mbshAxZQMH

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

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

Upvotes: 2

MathKimRobin
MathKimRobin

Reputation: 1440

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

Upvotes: 3

Related Questions