Category Archives: alert-dismissable

Angular alert will not display after being closed

Problem :

when you try to close the angular success and error pop up using manullay or using alert(‘close’) event.


HTML
  <div class="cacheSuccessMessage alert alert-success alert-dismissable-success">
<span class="cacheMessageHeader"><strong></strong></span>
<div class="cacheMessageDetails"></div>
</div>
JS:
$(".alert-dismissable-success").fadeTo(4000, 500).slideUp(500,
function() {
$(".alert-dismissable-success").alert('close');
})

so when you fire event of close Data-dismiss completely removes the element. 


Solution : 

 Use jQuery’s .hide() or angular hide method instead to hide error.
and modify you HTML and JS as 

HTML
  <div class="cacheSuccessMessage alert alert-success">
<span class="cacheMessageHeader"></span>
<div class="cacheMessageDetails"></div>
</div>

JS:
$(".cacheSuccessMessage").fadeTo(4000, 500).slideUp(500,
function() {
$(".cacheSuccessMessage").hide();
})

73 total views, no views today