Alert auto close using Bootstrap

Question

Using Bootstrap and created a button save in which it performs a specific function selector(). This function will be executed only after saving in the bank, then it will show an alert that will disappear in a few moments. However it is running only once and not anymore. (I know it is something extremely simple)

function selector() {
  $(".alert").removeClass('hidden');
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
  }, 4000); 
}

body{
  padding: 30px;
}

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

<div class="alert alert-success hidden" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Congratulations!</strong> Saved successfully!
</div>

<button style="margin: 10px" type="button" onClick="$(selector).click()" class="btn btn-primary" data-toggle="modal" data-target="#category">save</button>

How it has to be done so that the alert appears every time the function is executed selector()?

Answer 1

First you are passing a function called selector as a selector onClick="$(selector).click()", and it only works because jQuery tries to solve any function like a callback to get the string, which is wrong, this would be enough:

 <button style="margin: 10px" type="button" onClick="selector()" class="btn btn-primary" data-toggle="modal" data-target="#category">save</button>

Has two problems:

1. .remove deletes the element, so you can’t display it later
2. .fadeTo adds opacity (CSS) equal to 0, when starting animation again it is necessary to set as opacity: 1; to remove transparence, you can use fadeTo itself, it will look like this:

function selector() {
  $(".alert").fadeTo(1, 1).removeClass('hidden');
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(".alert").addClass('hidden');
    });
  }, 1000); 
}

body{
  padding: 30px;
}

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

<div class="alert alert-success hidden" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Congratulations!</strong> Saved successfully!
</div>

<button style="margin: 10px" type="button" onClick="selector()" class="btn btn-primary" data-toggle="modal" data-target="#category">save</button>

Note that if clicking often can give error then use . stop:

function selector() {
  $(".alert").stop().fadeTo(1, 1).removeClass('hidden');
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(".alert").addClass('hidden');
    });
  }, 1000); 
}

body{
  padding: 30px;
}

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

<div class="alert alert-success hidden" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Congratulations!</strong> Saved successfully!
</div>

<button style="margin: 10px" type="button" onClick="selector()" class="btn btn-primary" data-toggle="modal" data-target="#category">save</button>

I’ll edit the answer later, because I think being bootstrap-3 will fail, since their API uses the scroll and target to control the elements