Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

FabianoSouza

OnScroll não funciona em DIV carregada via AJAX

Por , em Javascript

Recommended Posts

FabianoSouza    5

FabianoSouza
Postado

Quero que ao fazer rolagem na div com ID questionario-area-de-paginas, que é carregada via AJAX, chame um simples alert pela myFunction .

<script>
document.getElementById("questionario-area-de-paginas").addEventListener("scroll", myFunction);
</script>

O código acima fica na da página mãe.

 

Aparentemente está tudo ok.

Mas só funciona se a DIV questionario-area-de-paginas estiver na página mãe.

 

Help por caridade.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Vc deve usar delegate

 

http://www.wbruno.com.br/javascript-puro/delegate-events-no-javascript/

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabianoSouza    5

FabianoSouza
Postado

Olá William. Cara, obrigado pela ajuda. Mas parece que o assunto é "avançado" demais. Sou muito verde em JS.

 

Preciso resolver isso rapidex.

Poderia rascunhar um código para eu me familiarizar?

Uma situação simples: abre um alert ao rolar o scroll de uma DIV carregada via AJAX (que não existia no DOM)

 

Procurando por delegate aparece também .bind e mais uma pá de coisas. E ainda 90% em inglês. Aff..

 

Help, mestre!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Utilizando o código que propus no meu blog, deve ficar assim:

 

Element.prototype.is = function(elementSelector) {
    switch(elementSelector[0]) {
        case ".":
            var er = new RegExp(elementSelector.replace(".", ""));
            return this.className.match(er);
            break;
        case "#":
            return this.getAttribute("id") === elementSelector.replace("#", "");
            break;
        default:
            return this.tagName === elementSelector.toUpperCase();
            break;
    }
};
Element.prototype.delegate = function(eventName, elementSelector, cb) {
    var $this = this;

    $this.addEventListener(eventName, function (evt) {
        var $this = evt.target;

        if ($this.is(elementSelector)) {
            cb($this, evt);
        }
        if ($this.parentNode.is(elementSelector)) {
            cb($this.parentNode, evt);
        }
    });
};

document.body.delegate('click', '#questionario-area-de-paginas', function($element, event){
    console.log($element.innerHTML);
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Desculpa.. no caso do onscroll, não vai ser possível usar delegate.

 

quest.html

<div id="questionario-area-de-paginas" style="height: 100px; overflow: auto; border: 1px solid #000">
  Lorem<br>ipsum<br>dolor<br>sit<br>amet,<br>consectetur<br>adipisicing<br>elit.<br>Quod<br>labore<br>repellendus<br>repudiandae<br>assumenda,<br>tenetur<br>commodi<br>voluptas<br>dicta<br>inventore<br>illum,<br>consectetur<br>nulla<br>ut<br>veniam<br>magnam<br>beatae<br>eos<br>rerum<br>rem<br>non<br>maxime.
  Lorem<br>ipsum<br>dolor<br>sit<br>amet,<br>consectetur<br>adipisicing<br>elit.<br>Quod<br>labore<br>repellendus<br>repudiandae<br>assumenda,<br>tenetur<br>commodi<br>voluptas<br>dicta<br>inventore<br>illum,<br>consectetur<br>nulla<br>ut<br>veniam<br>magnam<br>beatae<br>eos<br>rerum<br>rem<br>non<br>maxime.
  Lorem<br>ipsum<br>dolor<br>sit<br>amet,<br>consectetur<br>adipisicing<br>elit.<br>Quod<br>labore<br>repellendus<br>repudiandae<br>assumenda,<br>tenetur<br>commodi<br>voluptas<br>dicta<br>inventore<br>illum,<br>consectetur<br>nulla<br>ut<br>veniam<br>magnam<br>beatae<br>eos<br>rerum<br>rem<br>non<br>maxime.
</div>
okay?

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<div id="stage">

</div><!-- #stage -->


<script>
var $stage = document.getElementById('stage');

var xhr = new XMLHttpRequest();
xhr.open('GET', 'quest.html', true)
xhr.send();
xhr.addEventListener('readystatechange', function(a, b) {
  if(xhr.readyState === 4 && xhr.status === 200) {
    $stage.innerHTML = xhr.responseText;

    $stage.querySelector('#questionario-area-de-paginas').addEventListener('scroll', function(event) {
      console.log('Scrolled', event.target.scrollTop);
    });
  }
});
</script>


</body>
</html>
note que eu tenho o container #stage onde vou inserir a div que vem do ajax:

$stage.innerHTML = xhr.responseText;
tranquilo ?

 

O "segredo" é atrelar o evento após colocar o elemento no html:

    $stage.innerHTML = xhr.responseText;

    $stage.querySelector('#questionario-area-de-paginas').addEventListener('scroll', function(event) {
      console.log('Scrolled', event.target.scrollTop);
    });
entendeu ?

 

Para ver o console.log(), aperte Ctrl + Shift + J no Firefox ou Chrome.

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabianoSouza    5

FabianoSouza
Postado

Opa, William. Legal, cara.

 

Agora como faço para disparar o alert quando aparecer um conteúdo específico dentro da div na página quest.html?

 

Dentro da DIV questionario-area-de-paginas terei diversas divs, simulando páginas de um documento/formulário (cada uma com seu respectivo ID).

 

Quero disparar o alert toda vez que uma determinada "página" estiver posicionada no início da DIV questionario-area-de-paginas. Isso é para mostrar ao usuário em qual "página" do documento ele está.

 

Parece que tem a ver com scrollTop. Estou pesquisando aqui...

 

Mais uma vez, muito obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Você vai ter que "medir" com o scrollTop, e ver se o scrollTop chegou até tal número, ai você sabe que está "na página".

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabianoSouza    5

FabianoSouza
Postado

Entendi. Estou adaptando.

 

Mas veja. Terei uma quantidade indefinida de "páginas" rolando dentro da DIV questionario-area-de-paginas.

Sendo assim, terei o scrollTop da DIV "mãe" com inúmeros valores para comparar. É algo indefinido.

 

Exemplo. Se scrollTop = 100px, pg 1, se scrollTop = 200px, pg 2, se scrollTop =

300px, pg 3...e assim por diante

 

Talvez a lógica tenha que ser outra, não?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

As páginas possuem uma altura fixa ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Então, uma forma de pegar dinamicamente onde uma página começa, é perguntar para o elemento que define o início de uma página, seja um título ou uma section, qual é a posição dele em relação ao scroll.

 

Creio que essa dúvida já é diferente da dúvida inicial do tópico, que era somente fazer o evento funcionar. Nesse caso, pode criar outro tópico, assim manteremos a conversa organizada e focada no novo problema, okay ?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito