Problems performing an infinite scroll with AJAX

Question

Problems performing an infinite scroll with AJAX

Navigation

#1 by (2 votes)

1

I'm trying to run an infinite scroll for a news section. What I want is that when I reach a certain point of the scroll, another news block will be added, if the user reaches the end of the scroll, another one will be added again. So until there is no more news to show.

I use the following <script> :

<script language="JavaScript">

var paginacion = 2
window.addEventListener("scroll", function(){
    console.log(scrollY);
    var altura_header = $("header").height();
    var altura_bloque_anuncio = $("#anuncio_primero_home").height();
    var altura_div_noticias = $(".cont-princ").height();
    var altura_limite = altura_header + altura_bloque_anuncio + altura_div_noticias;
    //OJO PORQUE NO SÉ SI FUNCIONA CON LA RESOLUCIÓN DE PANTALLA, IGUAL HABRÍA QUE SACAR LA ALTURA DE SU NAVEGADOR
    var altura_pantalla_usuario = screen.height;
    var altura_nagegador = $(window).height();
    var altura_nagegador_2 = $(document).height()


    console.log(this.scrollY + altura_pantalla_usuario);
    //tendrá que buscar si hay más noticias cuando lo que baje en pixeles el usuario con el scroll, más la altura de su pantalla, supere el la variable altura_limite

    if (this.scrollY + altura_pantalla_usuario >= altura_limite){
        $.ajax ({
          type: 'POST',
          url: '<?php echo $ruta ?>proces_noticias.php',
          data: { "paginacion": paginacion},
          success:function(datos){
            $("#mas_noticias").html(datos);
          }
        });

        paginacion = paginacion + 1;
    }
    console.log("Esto es paginacion:" + paginacion )
    console.log("Esto es la altura limite:" + altura_limite ) 

}, false);

</script>

And I show the data in a div that is empty from the beginning:

<div id="mas_noticias" style="width:100%;">

</div>

When loading the page and scrolling down works well, another news block is loaded, just the following ones, but if I keep scrolling, I do not load another new block, then the previous div is updated with News.

How can I do so that instead of updating the div where they are shown by AJAX the results will be added another? Should I better use a class instead of a id why ids can not be repeated?

javascript ajax

asked by JetLagFox 14.08.2017 в 02:12

source

1 answer

What is the procedure to update or re-publish my app in playstore if I do not have the signature? Difference threads.p and windows.h

score 2 · Accepted Answer

test instead of $("#mas_noticias").html(datos); use $("#mas_noticias").append(datos);

jQuery Add Elements

Assuming that the div where the news is called "div_noticias" you could also do it in the following way (if the scroll is on the div):

<script language="JavaScript">
  $(document).ready(function(){
  
    var paginacion = 2

    $('#div_noticias').bind('scroll', function() {
      if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
      
        $.ajax ({
          type: 'POST',
          url: '<?php echo $ruta ?>proces_noticias.php',
          data: { "paginacion": paginacion},
          success:function(datos){
          
            $("#div_noticias").append(datos);
            
          }
        });
        
        paginacion = paginacion + 1;
        
      }
    });
  });
</script>

jQuery scrollTop () Method

jQuery innerHeight () Method

HTML DOM scrollHeight Property

If the scroll is on the page:

<script language="JavaScript">
  $(document).ready(function(){
  
    var paginacion = 2

    $(document).bind('scroll', function() {
      if($(window).scrollTop() + $(window).innerHeight() >= $(document).height()) {
      
        $.ajax ({
          type: 'POST',
          url: '<?php echo $ruta ?>proces_noticias.php',
          data: { "paginacion": paginacion},
          success:function(datos){
          
            $("#div_noticias").append(datos);
            
          }
        });
        
        paginacion = paginacion + 1;
        
      }
    });
  });
</script>