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.

what version of the `popper.js` you are including with bootstrap? — Muhammad Omer Aslam, Feb 13 '18 at 20:29
Hi. I recopied my code above. I accidentally left that out of my original post, but the `id="buttonAlert" is in fact in my HTML. I also included the button HTML for reference. Still not working? I have all of the necessary Bootstrap file included as well. — Matthew, Feb 13 '18 at 20:30
@MuhammadOmerAslam Popper.js is from `src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js` directly from Bootstrap's Getting Started docs here http://getbootstrap.com/docs/4.0/getting-started/introduction/ — Matthew, Feb 13 '18 at 20:32
looks like you are doing something wrong while including the libraries you should add the relevant sections like the files you are including and in the same order as they are loading at your end to regenerate the issue — Muhammad Omer Aslam, Feb 13 '18 at 20:35

Carol Skelly · Accepted Answer · 2018-02-13T20:29:01.270

3

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

edited Feb 13 '18 at 20:29

answered Feb 13 '18 at 20:22

Carol Skelly

351,302
90
710
624

not sure why I left that out of the original post, it is in my actual project's HTML. I've updated my original question above. For some reason, still not working. Code in the OP should be exactly what I have in my project, in addition to the CSS and JavaScript files all required by Bootstrap. – Matthew Feb 13 '18 at 20:33
Perfect! Many thanks. Let me ask you one thing, I've noticed that even using double quotes around `show` works also, such as `$("#buttonAlert").addClass("show")`. Also, I've seen, as listed in my OP's reference link, others use single quotes around `id`'s they reference in `.js` files. Which is correct syntax? – Matthew Feb 13 '18 at 20:36
1

@Matthew both are correct in JS, but in languages like PHP, for example, single quotes improves performance a bit because it will display the exact string you have wrapped in them, while the double quotes can have variables in it and will render the variable value – Claudiu D. Feb 14 '18 at 11:16

score 0 · Answer 2 · edited Feb 28 '19 at 19:58

I am not sure which one is the issue, I guess that the way JQuery handles show and hide is different from bootstrap show and hide.

But you can hide the success message by using Jquery $("#buttonAlert").hide() and then showing it with $("#buttonAlert").show();

$(document).ready(function() {
  $("#buttonAlert").hide()
  $("#modalButton").click(function() {
    $("#buttonAlert").show()
  })
})

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

<head>
  <meta charset="utf-8">
  <title>Test page</title>
</head>

<body>
  <!-- Alert -->
  <div class="alert" 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>
</body>

</html>

score 0 · Answer 3 · answered May 30 '20 at 17:41

If you want it fully dynamic and can use the new templating in JS, you could do something like this if you had a div with id of "notification". I just pass in message hard-code "Success" for the title, but you could change that if you'd like.

The css for it is like this:

#notification {
    position: fixed;
    right: 20px;
    top: 50px;
    width: 400px;
    z-index: 999999;
}

JS Code:

const handleToastOpenAndClose = ($alert, autoCloseDelay) => {
    $alert.fadeIn();

    const fadeCall = fadingEvent => fadingEvent.slideUp(500, () => $alert.slideUp(500, () => $alert.alert('close')));
    if (autoCloseDelay) {
        var fadingEvent = $alert.fadeTo(autoCloseDelay, 500, () => fadeCall(fadingEvent));
        $alert.hover(
            () => fadingEvent.stop(),
            () => fadingEvent = $alert.fadeTo(autoCloseDelay, 500, () => fadeCall(fadingEvent))
        );
    }
};

window.toastSuccess = (message, autoCloseDelay) => {
    var html = `<div class="alert alert-success alert-dismissible hidden" role="alert">
            <div><strong>Success</strong></div>
            ${message}
            <button class="close" type="button" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">x</span>
            </button>
       </div>`;

    $('#notification').append(html);
    var $alert = $("#notification .alert:last");
    handleToastOpenAndClose($alert, autoCloseDelay);
};

Show Bootstrap Alert on Button Click via Javascript / jQuery

3 Answers3