4

Em uma plataforma de fóruns existe um sistema de paginação, e eu gostaria de fazer essa paginação via Ajax, para isso, construi a seguinte função:

//<![CDATA[
var Pagination = (function(w, d) {
    var pagination = {

        init: function() {
            this.run();
        },

        run: function() {

            w.addEventListener('DOMContentLoaded', function() {
                var links = d.querySelectorAll('p.paging a[href^="/t"]');

                for (var i = 0; i < links.length; i++) {
                    links[i].addEventListener('click', function(event) {

                        event.preventDefault();

                        var link = this.getAttribute('href'),
                            xhr = new XMLHttpRequest();
                        xhr.onload = function() {
                            d.querySelector('.main').innerHTML = this.responseXML.querySelector('.main').innerHTML;
                        };
                        xhr.open('GET', link);
                        xhr.responseType = 'document';
                        xhr.send();
                    });
                }
            });

        }
    };

    pagination.init();

}(window, document));
//]]>

Ele funciona perfeito até o primeiro clique. Porém se eu clicar em mais de um link a função não funciona de forma alguma e a página é carregada normalmente.

Eu tenho quase certeza que o erro é no meu laço for(), eu não encontrei uma maneira melhor de fazer a função Ajax para cada vez que eu clicar em um link dessa paginação.

Se houver alguma maneira melhor, fico grato em saber.

@Edit:

A estrutura do meu HTML é mais ou menos da seguinte maneira:

<div class="main">
    <p class="paging">
        <a href="/topic/1">1</a>
        <a href="/topic/2">2</a>
        <a href="/topic/3">3</a>
    </p>
    <div class="topic">
        <div class="content">Conteúdo aqui.</div>
    </div>
</div>
10
  • 3
    Você está clicando em links que já existiam na página, ou em links que foram acrescentados após a primeira chamada do ajax? P.S. à primeira vista, não parece ter nada de errado em seu laço for.
    – mgibsonbr
    26/07/2014 às 20:59
  • @mgibsonbr Eles já existem na página, eles são criados via PHP (o qual não temos acesso), normalmente ao clicar ele vai redirecionar para a próxima página.. Eu ja tentei várias maneiras mas ainda não consegui um resultado satisfatório. Ele funciona no primeiro clique mas deixa de funcionar a partir dos cliques seguintes.. Como se eu estivesse usando document.querySelector()
    – waghcwb
    26/07/2014 às 21:28
  • 3
    @waghcwb os links do .paging a estão dentro do .main?
    – Sergio
    26/07/2014 às 21:51
  • 1
    Já experimentou isolar a lógica dessa "classe" pra ver se funciona? 26/07/2014 às 21:52
  • 1
    @Sergio, era exatamente isso amigo. Troquei o seletor para um que não incluísse a paginação dentro dele, e funcionou perfeitamente. Eu agradeço a atenção de todos vocês amigos, vocês são demais!
    – waghcwb
    26/07/2014 às 21:54

1 Resposta 1

5

Neste seu código está a substituir o menu cada vez que carrega a div .main. Isso faz com que os event handlers se percam.

Vejo duas opções:

mudar o seletor na callback do ajax para mudar o conteudo certo. Substituindo para:

d.querySelector('.topic').innerHTML = this.responseXML.querySelector('.topic').innerHTML;

e assim mudar só o conteudo relevante e não quebrar os oscultadores de eventos colocados pela sua pagination.run();

voltando a colocar os event hadlers a cada vez que carregar novo conteudo, uma vez que reescrever elementos do DOM faz com que eles percam os event handlers que tinham agarrados. Assim na callback do ajax pode usar:

xhr.onload = function() {
    d.querySelector('.main').innerHTML = this.responseXML.querySelector('.main').innerHTML;
    pagination.init();  // ou pagination.run();
};
3
  • Olá, tenho uma questão semelhante, e gostaria de saber se você poderia me orientar? O var fbShareBtn = document.querySelector('.fb-share'); Está retornando apenas o primeiro share button, uso vários botões de compartilhamento do Facebook em uma mesma página (paginação) e apenas o primeiro funciona. Você pode estar vendo todo o código nesse site: tedshd.logdown.com/posts/…
    – Thiago Jem
    16/02/2015 às 6:10
  • @ThiagoJem o querySelector seleciona só o primeiro elemento que encontra. Tens de usar querySelectorAll e depois iterar os elementos com um for, se precisares de ajuda coloca uma pergunta nova no site que a gente ajuda no que estiveres a falhar.
    – Sergio
    16/02/2015 às 7:56
  • Coloquei a pergunta... pode estar vendo-a aqui: Link para a pergunta
    – Thiago Jem
    16/02/2015 às 11:58

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 .