Live Badge Notifications

Live Badge Counts

Update notification badge counts in real time using polling or WebSockets with jQuery DOM updates.

Example

function updateBadge($badge, count) {
  if (count > 0) {
    $badge.text(count > 99 ? "99+" : count).show();
    $badge.closest("[aria-label]").attr("aria-label", `Notifications: ${count} unread`);
  } else {
    $badge.hide();
    $badge.closest("[aria-label]").attr("aria-label", "Notifications: none");
  }
}
// Poll every 30 seconds
setInterval(() => {
  $.getJSON("/api/notifications/count", ({ unread }) => {
    updateBadge($("#notif-badge"), unread);
  });
}, 30000);

JAVASCRIPT

Full Editor

Pro Tip

Update aria-label when the badge changes — screen reader users need to hear the new count.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned