Length of jQuery does not update with append, how to solve?

Navigation
3

I'm working on a script that causes me to load more records from the database when the user reaches the end of page scrolling.

PHP / SQL is right, the problem is that jQuery does not correctly report the number of occurrences of class on the screen.

I imagine the solution is to implement .on somehow, but I do not handle a lot of jQuery and I'm hitting on it.

I explain my code below: 

$(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]

The whole code works fine. My return is new section class='empresa' within div id="empresas" .

BUT by var qtdRegistros = $("#empresas section.empresa").length; , the variable qtdRegistros only identifies the number of times class empresa appears in the original HTML. Disregarding what comes from append . This causes my PHP to bring duplicate results, since qtdRegistros is always the same.

I need to update length according to new class that comes in append . But that does not happen.

Researching a lot I found something similar implementing on , but I just could not use it. Can someone tell me a path?

    
asked by anonymous 23.11.2017 / 11:49

2 answers

1

What happens is that append does not update the number of elements within the element set that you are accessing, but rather the number of children in that element.

To resolve this problem, change the line: 

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

For the following: 

var qtdRegistros = $("#empresas").children().length;
    
23.11.2017 / 12:33
1

When you enter a new elemento HTML with append enter it as a jquery object, see: 

$( 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><divclass="mydiv"></div>

This example was found in the deprecated

In your case it would be something like: 

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

Try also to change the order of the rows, first insert with size() and then count.

    
23.11.2017 / 12:24
React Native - Navigation + Image Select Checkbox and maintain CSS styling