1

Eu tenho uma função na página index onde a div #atualiza faz um load na página home.php e se atualiza em x tempo.

index.php

var auto_refresh = setInterval (function()
    {$('#atualiza').load('home.php');
    cache:false;
    return false;
},60000);

Na página home.php eu tenho outro script para que os usuários coloquem emoticons nas postagens.

home.php

<script type="text/javascript" src="js/jquery.emotions.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    $(".postagem").emotions();
});

</script>

O problema é o seguinte ao abrir a página index pela primeira vez funciona tudo normal mas quando a div #atualiza se atualiza ela não lê mais o script da página home.php. Ouvi falar que o load não lê a função ready do jQuery, pesquisei e não achei nenhuma solução.

Como fazer a função da pagina home.php continuar executando? Agradeço desde já!

1
  • 1
    Pode colocar o seu HTML para se perceber melhor a estrutura? E já agora, a página home só tem esse javascript ou tem mais?
    – Sergio
    Commented 24/06/2014 às 14:50

1 Resposta 1

2

O problema é bem simples na verdade: a utilização do recurso $('.postagem').emotions(); deve ser assíncrono.

Para resolver o seu problema, a cada vez que div #atualiza é atualizada através do método .load(), você deve reestabelecer a definição de .emotions() para .postagem. Para fazer isso, nós vamos mexer um pouco na forma como você atualiza a #atualiza. Portanto, isso aqui:

var auto_refresh = setInterval (function()
    {$('#atualiza').load('home.php');
    cache:false;
    return false;
}, 60000);

Deve virar isso aqui:

var auto_refresh = setInterval (function () {
    $.ajax({
        url: 'home.php',
        success: function (response) {
            $('#atualiza').html(response);
            $('.postagem').emotions();
        }
    });
}, 60000);

No caso, eu utilizei o método .ajax do jQuery para fazer uma requisição do tipo GET – é possível visualizar que a propriedade TYPE está ausente, portanto, .ajax assume que a requisição seja do tipo GET (leia mais) – e a resposta (response) então é disponibilizada através do método .html para a div #atualiza.

Em palavras menos técnicas, a cada vez que uma atualização é feita, o mecanismo de .emotions() é recarregado.

Quanto a utilização de $('.postagem').emotions() na marcação $(document).ready([...]);, você pode e deve manter, ou seja, mantenha o resto como você tem até agora e só altere o que lhe foi passado.

Atenção!

Você está utilizando a função setTimeout() para fazer uma requisição temporal e essa prática é relativamente ruim porque gera várias requisições paralelas – dependendo do número de clientes no seu site ou aplicativo – fazendo com que seja desperdiçado processamento para o tráfego de informações.

Uma opção que você tem é utilizar websockets para manter uma conexão viva entre os dois terminais da aplicação: o cliente e o servidor.

4
  • Obrigado pela atenção!!! mas continua o problema ao atualizar a pagina index nao busca a plugin de emoticon, acreito que seja pq a div .postagens esteja na pagina home e nao na index, pois e na pagina home que faz uma consulta sql e tras as postagens! vou pesquisarsobre websoquet! obrigado
    – jones
    Commented 24/06/2014 às 18:16
  • Coloque isso na sua página index.php: <script type="text/javascript" src="js/jquery.emotions.js"></script> Commented 24/06/2014 às 18:21
  • Muito obrigado pela ajuda Guilherme!! descobri que o problema no final era um conflito de funções!!! abraço
    – jones
    Commented 24/06/2014 às 19:40
  • @jones De nada! Poste a sua solução em formato de resposta para ajudar futuramente outros aprendizes. Commented 25/06/2014 às 16:27

Você deve fazer log-in para responder a esta pergunta.

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