In the webpage I've designed, there are navigation tabs with notification badges. When a tab is in focus, an ajax call is made to the server to reset the badge count to zero upon a successful response. However, despite displaying the badge and receiving the successful response from the ajax call (not included below), the badge value does not update as expected.
Here's the relevant code snippet:
<div class="container-fluid">
<br/>
<div class="col-sm-10">
<div class="panel with-nav-tabs panel-tab-block">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" class="" href="#projects-tab">Projects</a>
</li>
<li>
<a data-toggle="tab" id="forum-notification-badge" class="notification-badge"
data-notification-badge="1" href="#forum-tab">Forum</a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div id="projects-tab" class="tab-pane fade in active">
<div class="row">
<div class="col-sm-12">
<div class="panel with-nav-tabs panel-tab-block">
<h1>
Projects
</h1>
</div>
</div>
</div>
<div class="row">
<div class="spacer-sml"></div>
</div>
<div class="row">
<div class="spacer-sml"></div>
</div>
</div>
<div id="forum-tab" class="tab-pane fade">
<div class="tab-block-content forum-posts">
<div class="">
<div class="col-sm-12">
<h1>
Forum
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JQuery Functionality:
jQuery(document).ready(function( $ ) {
$('#forum-notification-badge').on("focus", function() {
var self = $(this);
// Perform ajax call and reset badge if successful
self.data("data-notification-badge","0");
console.log("Badge count has been reset to zero");
});
});
CSS for Styling:
.nav {
/* CSS Styles */
}
/* More CSS styles... */
.notification-badge {
/* Positioning and styling for notification badges */
}
You can view this functionality in action via this jsfiddle link.