Question

I have a PHP notification system, and the amount of notifications is put into a DIV using jQuery. The only problem is that when there are 0 notifications, the empty DIV still shows up. This is the jQuery I am currently using:

$(document).ready(function() {
    $.get('/codes/php/nf.php', function(a) {
        $('#nfbadge').html(a);
        $('#nfbadge:empty').remove();
    })
});
setInterval(function() {
    $.get('http://localhost/codes/php/nf.php', function(a) {
        $('#nfbadge').html(a);
        $('#nfbadge:empty').remove();
    })
}, 8000);

The only problem is that if at document load there is 0 notifications and a notification is added, the badge will not show up, so basically if the element is removed it won’t come back unless the page is reloaded, but I made the notification system so that the page wouldn’t have to be reloaded. How can I fix this?

Answer 1

If you have control over the PHP, you shouldn’t be using jQuery to be removing DIVs, it’s a waste of resources and load time, even if it’s just a few lines of code.

In your PHP template you should include the #nfbadge div in a conditional statement, something like:

if($notifications) {
     echo '<div id="nfbadge">';
     //notification stuff
     echo '</div>';
}

Then with your jQuery code you could do something like the following:

 var $nfbadge = $('#nfbadge');
 if($nfbadge) {$nfbadge.html(a)}