auto close alert in html / js

Question

I was looking to implement the helpful answer here but it isn't working for me in my browser or even in the code snippet here but works in jsfiddle http://jsfiddle.net/joydh7L0/2/

Basically the alert is always shown and the script doesn't seem to be working. Am a beginner so might be missing something very obvious. Any help appreciated!

Update: Based on a couple of comments on this I am using bootstrap and with that using their recommended jQuery link. Thanks!

"https://code.jquery.com/jquery-3.4.1.slim.min.js"

<!doctype html>
<html lang="en">

  <head>
  </head>
  <body>
    <button type="submit" class="btn btn-primary">Submit</button>

    <div class="alert alert-success" id="submitsuccess"   role="alert"> Thanks for letting us know!</div>
    <script>
      $(document).ready(function() {
        $(".alert").hide()
        $("button").click(function showAlert() {
          $(".alert").fadeTo(2000, 500).slideUp(500, function() {
            $(".alert").slideUp(500);
          })
        })
      })
    </script>
  </body>

What if you change '$(".alert").slideUp(500);' (the last one) to 'console.log("Hi");'. Can you see something on the developer console and if yes then when? — boj
– boj, Commented May 6, 2020 at 21:40
unfortunately changing to console.log("Hi") doesn't seem to do anything. — rtrt1
– rtrt1, Commented May 6, 2020 at 22:01

Tranquillity · Accepted Answer · 2020-05-06 21:46:19Z

0

Make sure you have included Jquery plugin.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

also if using css framework like booststrap you can also include.

answered May 6, 2020 at 21:46

Tranquillity

3872 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

rtrt1 Over a year ago

I am using bootstrap and have included the standard bootstrap recommendation <script src="code.jquery.com/jquery-3.4.1.slim.min.js"

Tranquillity Over a year ago

Here created sample check the html part, that you can run locally as well.

Tranquillity Over a year ago

@user13448168 were you able to solve with above resources?

rtrt1 Over a year ago

Thanks yes this worked. The two problems were, the default bootstrap jQuery link was "..slim.min.js" - with the slim version this did not work. And second, my jQuery plugin was declared at the bottom of the html file. When I moved it up (and used min.js) it worked. Many thanks for the help.

Tranquillity Over a year ago

@user13448168 if you wish you can like/vote my answer and comments. It will be great help. Thank you!

|

Collectives™ on Stack Overflow

auto close alert in html / js

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related