Search code examples
phpjavascriptajaxnotificationsmenubar

Menu bar notification badge update issue


I have a menu bar with notification bubble badge (CSS3), and a php script to retrive the new messages count from mysql database (messenger inbox system). I want to update the value of the notification badge every second with the number of unread messages from the script or hide the container completely if the script result is 0 (no new messages).


Solution

  • I finally figured it out after 48 hours awake!

    setTimeout('pullNewMessageCount()', 200);
    function pullNewMessageCount() {
    var url = 'models/bubble.php';
    $.ajax({
    url: url,
    dataType: 'html',
    type: 'POST',
    success: function(latestCount) {
     setTimeout('pullNewMessageCount()', 200);
     $('#bub').html(latestCount);
     if (latestCount > 0)
     {
       $('#bub').removeClass('hidden').addClass('bubble').addClass('animating');
     } else if ((latestCount = $('#bub').html()) && (latestCount > 0)) {
       $('#bub').removeClass('animating');
     } else if ((latestCount = '0') || (!latestCount)) {
       $('#bub').removeClass('bubble').addClass('hidden');
     } else {
       $('#bub').removeClass('bubble').addClass('hidden');
     }
    },
    error: function(jqXHR, textStatus, errorThrown) {
    }
    });
    }
    

    and finally a working facebook-like notification bubble system!