3

Estou fazendo um script que atualiza o título da página e coloca quantas notificações o usuário possui antes do titulo atual. Porém como é dinâmico e atualiza essa pagina para verificar se existem novas notificações ele está dando problema no titulo. Vou dar uma exemplo:

Tenho 01 notificação e o titulo atual da pagina é Home, então o titulo fica assim "(1) Home", conforme vai verificando se existe novas atualizações o titulo vai ficando assim: "(1) (1) (1) (1) (1) Home". Queria uma ajuda para que isso não ocorresse!

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

Este é o script que tenho no momento, onde a tag em PHP $total_notifi é o número de notificações do usuário.

5
  • Acho que você deve executar a mudança do código somente se o $total_notifi for > que o atual $total_notifi. No processo de verificar quantos notificações ele tem, retorne o valor somente se for maior. Se for igual, não execute nada. 15/01/2016 às 11:07
  • Bom dia! Não tem como saber o funcionamento do seu código e aonde esta a falha, pois você só postou um pedaço, a atualização é ajax? O seu código aqui '.$total_notifi. do jeito que está misturado com o javascript e php não faz sentido, ele não pode ser reproduzido, leia isto: pt.stackoverflow.com/help/mcve e só depois de ler edite a pergunta.
    – Reptile
    15/01/2016 às 11:14
  • Toda vez que você busca o title você não está removendo a quantidade de notificações. anterior. 15/01/2016 às 11:16
  • @GuilhermeNascimento na verdade ele apenas traz o valor, no caso, 1, 2 ou 3, a logica é um SELECT que faço no banco e me traz esse valor!
    – Leonardo
    15/01/2016 às 13:03
  • @LeonardoCarmo Entendo, mas o problema não é esse, o problema é como você colocou o CÓDIGO aqui na pergunta, não é possível entender se o problema é PHP ou JS, se a solução pode ser php, se atualiza com ajax ou não, coisas do tipo. Você esta dizendo que traz de um select, ok é php + mysqli api, mas não diz como é induzido a soma. Ou seja o código não tem sentido que pudesse ser respondido, por isto forneci uma resposta que tenta fazer um PARSE do titulo existente e por JS mesmo ele atualiza: pt.stackoverflow.com/a/108449/3635 - o setInterval é apenas pra simular ;)
    – Reptile
    15/01/2016 às 13:07

3 Respostas 3

6

O problema é que, provavelmente você está pegando novamente o título toda vez que vai atualizá-lo. Por isso está sendo concatenado o (1) (1) ...

Você pode salvar o título do documento em uma variável logo que rodar o script e mantê-lo como se fosse uma constante, uma única vez. Posteriormente você substitui título atual com o valor da variável que pegou logo que o script foi executado, contendo o primeiro título.

/*
 * 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

1
  • obrigado! realmente deu certo! obrigado!
    – Leonardo
    15/01/2016 às 13:02
5

Podem ser um problema no PHP se não está usando a soma pelo JavaScript, mas se for no front-end então vou explicar o que pode estar ocorrendo.

Supondo que o código na verdade seja isto (já que o que foi postado não tem sentido):

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

Então a atualizações agora ocorre no front-end por incremento, da maneira que esta aqui o código consegue atualizar o título acessando o titulo já vindo do php (back-end)

Algo como:

document.title += "(1)";

Se o problema é realmente no javascript, então você deve converter pra int usando parseInt por exemplo e também fazer os tratamentos necessários, algo como:

  • 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>
    

    No entanto como eu já citei, o problema pode ser no php.

Note que o (<?php echo $total; ?>) é opcional e se a atualização veem do ajax, como é no Facebook ou Twitter, ou seja o script aqui consegue se adequar a qualquer título que sem precisar setar em uma variável, exemplos de páginas que o (1) será adicionado:

home:

<title>Home</title>

Blog:

<title>Blog</title>

E o Ajax (exemplo Jquery) seria algo como:

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

Após executar ele em qualquer página o resultado será algo como:

home:

(2) Home

Blog:

(2) Blog

Ou seja desta forma que fiz o título é atualizado independente do conteúdo original.

5
  • Na verdade estou precoupado com SEO, cada pagina tem seu titulo, então eu resgato o titulo atual da pagina, definido anteriormente, verifico se existe notificação, caso exista eu atualizo esse titulo colocando o valor antes dele, porem como dito na primeira resposta eu posso salvar esse titulo predefino em uma variavel e depois atualizar o titulo pegando essa variavel e adicionando o valor das notificações
    – Leonardo
    15/01/2016 às 13:11
  • Se está preocupado com SEO, então a minha resposta é um melhor caminho ao meu ver, já que o titulo inicial pode ser algo como (1), apenas um titulo em HTML e ele faz o parsing do titulo e depois joga o (1) na frente... Todavia ainda sim o código tal como é descrito e as soluções propostas levam a uma certa confusão de entendimentos.
    – Reptile
    15/01/2016 às 13:13
  • @LeonardoCarmo Se está preocupado com SEO, então a minha resposta é um melhor caminho ao meu ver, já que o titulo inicial pode ser algo como (1), apenas um titulo em HTML e ele faz o parsing do titulo e depois joga o (1) na frente, pois no código o (1) é desnecessário (opcional) :D ... Todavia ainda sim o código tal como é descrito e as soluções propostas levam a uma certa confusão de entendimentos.
    – Reptile
    15/01/2016 às 13:18
  • @LeonardoCarmo atualizei a resposta, dá uma lida ;)
    – Reptile
    15/01/2016 às 13:25
  • 1
    Meu nivel em JS não é muito bom rs, mas entendi sua ideia, vou estruturar aqui e testar
    – Leonardo
    15/01/2016 às 13:30
3

Olá, você pode esta retirando a sua notificação anterior antes de colocar a nova da seguinte forma.

var title = document.getElementsByTagName("title")[0].innerHTML;
title = title.substring(title.indexOf(")"), title.length);
document.title = "('.$total_notifi.') "+title; 
alert(title);
2
  • 1
    Se tiver mais de um digito na quantidade de notificações não irá funcionar o substring, vai cortar o número ou sobrar o parenteses. =/ 15/01/2016 às 11:23
  • 1
    Verdade, só usar str.indexOf(")") 15/01/2016 às 11:41

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .