Alert auto close using Bootstrap

Navigation
1

Using Bootstrap and created a save button on which you run 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 only running once and not more. (I know it's 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><linkhref="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 does it have to be done for the alert to appear every time the selector() function is executed?

    
asked by anonymous 14.01.2017 / 17:25

1 answer

2

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 as a callback to get the string, ie it is wrong, this would suffice: 

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

You have two problems:

  • .remove deletes element, then can not display after
  • .fadeTo adds opacity (of CSS) equal to 0 , when to start animation again it is necessary to set as opacity: 1; to remove transparency, 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><linkhref="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 many times may 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><linkhref="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'm going to edit the answer later because I think being bootstrap-3 will fail, since their API uses the role and target for controlling the elements

        
    14.01.2017 / 17:41
    Python Using .replace () with list comprehension Popular ListView with data from Retrofit2