Show Bootstrap Alert on Button Click via Javascript / jQuery

Question

I've referenced some other questions on here about showing and hiding a Bootstrap Alert on button click, but for some reason my implementation is not working. I am using Bootstrap 4, however, although from my beginner knowledge things should still work correctly.

I've referenced Bootstrap's documentation on dismissing alerts, and I have modified their sample to remove the show class from the alert as I simply want to show the alert upon a button click. The dismissal should work fine as the close button on the alert will be implemented from the HTML.

HTML

<!-- Alert -->
<div class="alert alert-success alert-dismissible fade" role="alert" id="buttonAlert">
    <strong>Success!</strong> You just showed an alert.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<!-- Submit Button -->
<div class="form-group">
    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#ModalCenter" id="modalButton">Click me</a>
    </div>
</div>

JavaScript

  $(document).ready(function() {
      $("#modalButton").click(function(){
          // alert("Success!") //Test to see if the function worked, it did
      $("#buttonAlert").show() //Shows Bootstrap alert
      })
  })

So the JavaScript function works as I've tested it with alert("Success!"), but the Bootstrap alert line $("#buttonAlert").show() does not show anything?

Note I am brand new to Bootstrap and Javascript/Jquery, I'm just trying to put some sample code together to learn so please bear with me.

Answer 1

You don't have anything called "buttonAlert". Give the alert an id="buttonAlert"

    <div class="alert alert-success alert-dismissible fade" role="alert" id="buttonAlert">
          <strong>Success!</strong> You just showed an alert.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
   </div>

Also, jQuery show() won't work. You need to user addClass('show')...

$("#modalButton").click(function(){
      $("#buttonAlert").addClass('show') 
})

https://www.codeply.com/go/57smFfXNh0