How to update page title with notifications?

Question

I’m making a script that updates the page title and puts how many notifications the user has before the current title. But as it is dynamic and updates this page to check if there are new notifications it is giving problem in the title. I will give an example:

I have 01 notification and the current title of the page is Home, so the title is like "(1) Home", as you check if there are new updates the title is like this: "(1) (1) (1) (1) (1) Home". I wanted some help so this wouldn’t happen!

var title = document.getElementsByTagName("title")[0].innerHTML;
document.title = "('.$total_notifi.') "+title; 

This is the script I have at the moment, where the tag in PHP $total_notifi is the number of user notifications.

Answer 1

The problem is, you’re probably picking up the title again every time you update it. That’s why the (1) (1) ...

You can save the document title to a variable as soon as you run the script and keep it as if it were a constant once. Later you replace the current title with the value of the variable you picked up as soon as the script was executed, containing the first title.

/*
 * Coloquei um título para exemplificar. No caso, CONST_TITLE pegaria
 * o primeiro valor do próprio título do documento, e.g:
 * 
 *
 *    var CONST_TITLE = document.title;
 *
 */
 
 
var CONST_TITLE = 'Meu título incrível';

function setTitulo(notificacoes) {
  document.title = '(' + notificacoes + ') ' + CONST_TITLE;
}

setTitulo(10);
console.log(document.title); // (10) Meu título incrível

setTitulo(100);
console.log(document.title); // (100) Meu título incrível

console.log(CONST_TITLE);   // Meu título incrível

Answer 2

They may be a problem in PHP if you are not using the sum by Javascript, but if you are in front-end then I will explain what may be occurring.

Supposing the code actually is this (since what was posted makes no sense):

<?php
echo 'document.title = "(' . $total_notifi . ') " + title;';

So the updates now occur on front-end by increment, the way the code here can update the title by accessing the title already coming from php (back-end)

Something like:

document.title += "(1)";

If the problem is really in javascript, then you should convert to int using parseInt for example and also do the necessary treatments, something like:

• javascript:

  //Valor que virá do ajax ou js que você fez e será somado
  function atualiza(soma) {
      var re = /^\(\d+\)/g;
      var res = document.title.match(re);
  
      //Pega o total no titulo
      var atual = res && res[0] ? parseInt(res[0].replace(/\(|\)/g, "")) : 0;
  
      //Remove o total e os `()` do titulo
      var titulo = document.title.replace(re, "");
  
      document.title = "(" + (atual + parseInt(soma)) + ") " + titulo;
  }
  
  setInterval(atualiza, 1000, 1); //Adiciona +1 (terceiro parâmetro)
  

• html:

  <title>(<?php echo $total; ?>) Home</title>
  

  However as I have already mentioned, the problem may be in php.

Note that the (<?php echo $total; ?>) is optional and if the update comes from ajax, as it is on Facebook or Twitter, ie the script here can fit any title without having to set in a variable, examples of pages that the (1) will be added:

home:

<title>Home</title>

Blog:

<title>Blog</title>

And Ajax (Jquery example) would be something like:

$.ajax("update.php").done(function(data) {
     atualiza(data);
});

After running it on any page the result will be something like:

home:

(2) Home

Blog:

(2) Blog

That is how I made the title is updated independent of the original content.

Answer 3

Hello, you may be withdrawing your previous notification before placing the new one as follows.

var title = document.getElementsByTagName("title")[0].innerHTML;
title = title.substring(title.indexOf(")"), title.length);
document.title = "('.$total_notifi.') "+title; 
alert(title);