Question

I have tried many ways to have the page title automatically update every 3 seconds so the title can display how many unread messages they have.

Here is what I have tried:

setInterval(function() {
        document.title = "<?php echo $inboxcc; ?>";
    }, 3000);

and

$(function() {
setInterval(function() {
     $(this).attr("title", "<?php echo $inboxcc; ?>");
    }, 3000);
});

But none of them work.

Answer 1

This approach won’t work. Your PHP statement will execute once on the server-side, so no matter what you do in JavaScript, the title won’t change more than once.

You need an AJAX-based approach, which will set the document.title property on success:

$.ajax({
  url: 'new_page_title.php',
  data: {name: 'username', password: 'userpass'},
  success: function(data) { document.title = data;},
  dataType: 'text'
});

Now: while you certainly can tuck this code into a setInterval call, I would suggest that checking it every 3 seconds might get to be a bit hard on your server, and not necessary. Every 15 – 60 seconds would be gentler.

setInterval(function() {
    $.ajax({
        ...
    });
}, 30000); // milliseconds