Home » BootStrap » CSS » HTML 5 » jQuery » Preventing BootStrap Alert From Being Remove on the DOM

Preventing BootStrap Alert From Being Remove on the DOM

in , , , - on Saturday, July 05, 2014 - 6 comments
BootStrap Alert is used to display messages or error messages on the DOM while users tries to navigate or perform some actions on the web. But by default, the BootStrap Alert is only one time use. The moment the alert was closed, it will never appear again.

We can solved this problem by using JavaScript:

 Lets say on the html, this is the alert block.
<div id="alertMsg" class="alert alert-warning collapse">
Name required. Please supply!
</div>
view raw BootStrap_Alert_html.html hosted with ❤ by GitHub
On the JavaScript, we will add an on listener to prevent it from removing from the DOM when the user closes it.

 By adding return false on the close event, this will prevent the alert from being remove from the DOM. Prior to that we should hide it so that it not be visible on the page.
var $alertMsg = $("#alertMsg");
$alertMsg.on("close.bs.alert", function () {
$alertMsg.hide();
return false;
});
view raw BootStrap_Alert_return_false.js hosted with ❤ by GitHub
When we want to show it again, we will just invoke the show method.
if ($("#Name").val()=="") {
$alertMsg.show();
}
view raw BootStrap_Alert_alert_show.js hosted with ❤ by GitHub


I believe this can be further explain if we have a sample code to play with:

 The example below is a form entry that will validate empty entry before posting data to server.

 Screen Shot:


index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>BootStrap Alert</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<link href="css/footerBottom.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<header>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<a class="navbar-brand" href="#">CodexSquare</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="nav active"><a href="#">Home</a>
</li>
<li class="nav"><a href="#">About</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<div class="content container">
<div id="alertMsg" class="alert alert-warning collapse box-shadow">
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-2">
<label for="Name" class="control-label">Name</label>
</div>
<div class="col-md-4 col-sm-6 col-xs-10">
<input type="text" id="Name" class="form-control" placeholder="Your Name" />
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="Address" class="control-label">Addess</label>
</div>
<div class="col-md-4 col-sm-6 col-xs-10">
<input type="text" id="Address" class="form-control" placeholder="Your Address" />
</div>
</div>
</div>
<hr />
<div>
<input type="button" class="btn btn-success" id="submitButton" value="Submit" />
</div>
<footer>
<div class="container float-left">
<p>&copy; Copyright CodexSquare</p>
</div>
</footer>
</div>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/site.js"></script>
</body>
</html>
view raw BootStrap_index.html hosted with ❤ by GitHub

site.js
(function () {
"use strict";
var $alertMsg = $("#alertMsg");
var alertHtmlClose = '<a href="#" data-dismiss="alert" class="close">&times;</a>';
var alertHtml;
$(function () {
configListeners();
});
function configListeners() {
$("#submitButton").click(function () {
submitComments();
});
$alertMsg.on("close.bs.alert", function () {
$alertMsg.hide();
return false;
});
}
function submitComments() {
if (!validateInput($("#Name"),"Name is required. Please supply") ) {
return false;
}
if (!validateInput($("#Address"),"Address is required. Please supply") ) {
return false;
}
$alertMsg.hide();
}
function validateInput($inputText, message) {
if ($inputText.val() == "") {
alertHtml = alertHtmlClose;
alertHtml = alertHtml.concat(message);
$alertMsg.show();
$alertMsg.html(alertHtml);
$inputText.focus();
return false;
}
return true;
}
})();
view raw BootStrap_alert_site.js hosted with ❤ by GitHub

Thank you! Hope this article helps. 
Labels: , , ,

6 comments

Anonymous mod
February 2, 2018 at 4:17 PM

Thanks you saved a lot of time

Reply
Unknown mod
April 10, 2018 at 5:12 AM

You made some good points there. I did a search on the topic and found most people will agree with your blog..

Also Visit this site for to learn more about Bootstrap Training

Reply
Unknown mod
June 25, 2018 at 11:15 PM

You really did a great job. I found your blog very interesting and very informative. I think your blog is great information source & I like your way of writing and explaining the topics. Keep it up. A bootstrap is a small strap or loop at the back of a leather boot that enables you to pull the entire boot on.In computers, to bootstrap (or “to boot”) is to load a program into a computer using a much smaller initial program to load in the desired program Readmore..

Reply
vandana boro mod
July 16, 2021 at 6:43 AM

Nice Article, thank you for sharing.
learn power bi

Reply
Post a Comment