<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><span class='fa fa-home'></span> Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class='fa fa-envelope'></span> </span>Messages <span class='badge badge-info' id='badge'>0</span></span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" id="searchform">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" id="searchbox"><span class="fa fa-search search"></span>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<h2>Auto-refreshing badge numbers on navbar</h2>
</div>
<div class="row">
Just a simple little bootsnipp with jquery to auto-update notification badge. You can combine this with ajax to get a count from a database every thirty seconds or so, i.e. facebook style. For the purposes of this bootsnipp, I'm initializing with 0 and getting a random number between 1-100 from random.org to illustrate.
<br><br>Really, you would use this with an SQL count check, i.e.: <code class='p-2'>select count(*) as count from table where column='criteria'</code>Make a function in whatever back-end language you are using (php, javascript, asp, whatever) then call that function with ajax, returning only a number to the page. So, if you are recording messages in the database, you can get an accurate count every whatever-interval-you-set. For the purposes of this demo I've got it set to 5 seconds.
<br><br>Also in this snipp, a little css here with search on nav to include faded search icon from font awesome.
</div>
</div>
input[type=search] { padding-left: 30px; }
span.search {
margin-left: 8px;
position: absolute;
float: right;
opacity: .25;
}
.badge {
/* you don't have to use any of this
adds styling to badge */
text-align: center;
vertical-align: super;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
color: white;
font-size: 8px;
/* uncomment below line to have show over envelope icon */
/* margin-left: -100px; */
border-radius: 50%;
}
//sample ajax call -- make sure the datatype is text.
//for purpose of this demo, using random number generator api
var getCount=function(){
$.ajax({
url: "https://www.random.org/integers/?num=1&min=1&max=100&col=1&base=10&format=plain&rnd=new",
type: "POST",
dataType: "text",
cache: false,
success: (function(data) {
result = data;
$('#badge').text(result);
})
});
}
// set the count -- 1000/one second
setInterval(function() {
getCount();
}, 5000);
