3

Estou trabalhando num script que faz com que carregue mais registros do banco de dados quando o usuário chega ao final da rolagem da página.

O PHP/SQL está certinho, o problema é que o jQuery não informa corretamente o número de ocorrências de terminada class na tela.

Imagino que a solução seja implementar o .on de alguma maneira, mas não manjo muito de jQuery e estou me batendo com isso.

Explico meu código abaixo:

$(document).ready(function() {
  var posicaoAtual = $(window).scrollTop();
  var documentSize = $(document).height();
  var sizeWindow = $(window).height();

  $(window).scroll(function() {
    posicaoAtual = $(window).scrollTop();
    //Até aqui, apenas verifico se o usuário chegou ao final da página. 

    if (posicaoAtual >= (documentSize - sizeWindow)) {
      //Agora que começa o sofrimento

      // Conta a quantidade de vezes que a section.empresa aparece na tela
      var qtdRegistros = $("#empresas section.empresa").length;

      //Variável que utilizo no meu PHP
      var idClientes = $("#idClientes").val();

      // Faz requisição ajax
      $.post("carrega-registros.php", {
        qtdRegistros: qtdRegistros,
        idClientes: idClientes
      }, function(resposta) {
        // Coloca o conteudo na DIV
        $("#empresas").append(resposta);
      });
    }
  });

  $(window).resize(function() {
    posicaoAtual = $(window).scrollTop();
    documentSize = $(document).height();
    sizeWindow = $(window).height();
  });
});

[EDIT 1]

O código todo funciona certinho. Meu retorno são novas section class='empresa' dentro da div id="empresas".

PORÉM pela var qtdRegistros = $("#empresas section.empresa").length;, a variável qtdRegistros só identifica o número de vezes que aparece a class empresa no HTML original. Desconsiderando o que vem do append. Isso faz com que meu PHP traga resultados duplicados, já que a qtdRegistros é sempre a mesma.

Preciso atualizar o length de acordo com as novas class que vem no append. Mas isso não acontece.

Pesquisando muito achei algo semelhante implementando o on, mas simplesmente não consegui utilizar. Alguém consegue me indicar um caminho?

9
  • Podes colocar na pergunta o conteúdo de resposta?
    – Sergio
    Commented 23/11/2017 às 10:50
  • Oi Sérgio! O script não apresenta erros. O que acontece é que sempre vai o mesmo valor pro PHP da variável qtdRegistros. Assim, ao invés de eu trazer novos registros no append, voltam sempre os mesmos. Commented 23/11/2017 às 10:58
  • @AryanaValcanaia o retorno do post é um html?
    – RFL
    Commented 23/11/2017 às 10:59
  • Isso mesmo :) O retorno é um append de um trecho como esse "<section class="empresa" id="11216"> (...) </section>" na div #empresas. Commented 23/11/2017 às 11:01
  • 1
    @FelipeAvelar Acredito que funcionoooou! Parece que minha função pra verificar se o usuário chegou ao final da página é que tá meio bugada agora :( vou fazer alguns testes e confirmo se é a solução mesmo! Obrigada. Commented 23/11/2017 às 11:20

2 Respostas 2

1

O que acontece é que o append não atualiza a quantidade de elementos dentro do conjunto do elemento que você está acessando, mas sim a quantidade de filhos desse elemento.

Para resolver esse problema, altere a linha:

var qtdRegistros = $("#empresas section.empresa").length;

Para o seguinte:

var qtdRegistros = $("#empresas").children().length;
2
  • Meu código compila "certinho". Acredito que exista outro problema nele (pt.stackoverflow.com/questions/257693/…) :/ mas você ajudou bastante, obrigada! Commented 23/11/2017 às 15:24
  • Vou justificar meu downvote: essa sua sugestão não altera nada o código, só troca 6 por meia-dúzia.
    – Sam
    Commented 23/11/2017 às 16:27
1

Quando inserir um novo elemento HTML com o append insira passando ele como um objeto jquery, veja:

$( document.body )
  .click(function() {
    $( this ).append( $( "<div class='mydiv'>" ) );
    var n = $( "div.mydiv" ).length;
    $( "span" ).text( "There are " + n + " divs. Click to add more." );
  })
 
  // Trigger the click to start
  .click();
  body {
    cursor: pointer;
    min-height: 100px;
  }
  div {
    width: 50px;
    height: 30px;
    margin: 5px;
    float: left;
    background: blue;
  }
  span {
    color: red;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>
<div class="mydiv"></div>

Este exemplo foi encontrado na documentação depreciada da função size()

No seu caso seria algo do tipo:

...
var qtdRegistros = $("#empresas section.empresa").length;
...
$("#empresas").append($('resposta'));

Tente alterar também a ordem das linhas, primeiro faça a inserção com append e depois a contagem.

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 .