Hi I have the following alert that is hidden on the page
<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
<button type="button" class="close" data-dismiss="alert">×</button>
@TempData["selCode"]
</div>
I display it with the following javascript
$('#send_reject_btn').click(function () {
var selRowIds = $("#ApprovalGrid").jqGrid('getGridParam', 'selarrrow');
if (selRowIds.length > 0) {
$('#reject_alert').show();
} else {
$('#selectCodeNotificationArea').show();
}
});
This is obviously linked to a button in my html.
After the alert is shown if I close it using the<button type="button" class="close" data-dismiss="alert">×</button>
The next time I press the button to open the alert I can see $('#selectCodeNotificationArea').show();
being called in my debug screen but the alert doesn't display again.
Has anyone experienced this before?
To close the alert message, add a . alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).
Bootstrap 4 provides an easy way to create predefined alert messages. Alerts are created with the . alert class, followed by one of the eight contextual classes .
The Data-dismiss completley removes the element. You would need to hide the alert if you are intending on showing it again.
For example;
<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
<button type="button" class="close" data-hide="alert">×</button>
@TempData["selCode"]
</div>
and this JS
$(function(){
$("[data-hide]").on("click", function(){
$(this).closest("." + $(this).attr("data-hide")).hide();
});
});
Better way is to remove , data-dismiss="alert"
from your tag , and use class name i.e. close to hide and show the error / warning .
// WHEN CLOSE CLICK HIDE THE ERROR / WARNING .
$(".close").live("click", function(e)
{
$("#add_item_err").hide();
});
// SOME EVENT TRIGGER IT.
$("#add_item_err").show();
[ I am working on dynamically added elements , that's why I am using 'live' , you may have to change as per your req.]
Bootsrap $(selector).alert('close')
(http://getbootstrap.com/javascript/#alerts) actually removes alert element so you cannot display it again.
To implement desired functionality just remove data-dismiss="alert"
attribute from close button defintion and add some little event handler to hide the alert
<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
<button type="button" class="close alert-close">×</button>
@TempData["selCode"]
</div>
<script>
$(function() {
$(document).on('click', '.alert-close', function() {
$(this).parent().hide();
})
});
</script>
I ran into this problem as well and the the problem with ticked solution above is that I still need access to the standard bootstrap alert-close events.
My solution was to write a small, customisable, jquery plugin that injects a properly formed Bootstrap 3 alert (with or without close button as you need it) with a minimum of fuss and allows you to easily regenerate it after the box is closed.
See https://github.com/davesag/jquery-bs3Alert for usage, tests, and examples.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With