Problemas realizando un scroll infinito con AJAX Problemas realizando un scroll infinito con AJAX
Problemas realizando un scroll infinito con AJAX
Mostrando resultados del 1 al 2 de 2
  1. #1
    Problemas realizando un scroll infinito con AJAX
    Estoy intentando hacer funcionar un scroll infinito para una sección de noticias. Lo que quiero es que al llegar a cierto punto del scroll se me añada otro bloque de noticias, si el usuario llega al final del scroll se vuelva a añadir otro. Así hasta que ya no haya más noticias que mostrar.

    Uso el siguiente script:

    Código:
    <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>
    Y muestro los datos en un div que de un inicio está vacío:
    
    <div id="mas_noticias" style="width:100%;">
    
    </div>
    Al cargar la página y hacer scroll hacia abajo funciona bien, se me carga otro bloque de noticias, justo las siguientes, pero si sigo haciendo scroll, no se me carga otro bloque nuevo a continuación, se me actualiza el div anterior con las noticias.

    ¿Cómo puedo hacer para que en vez de actualizarme el div donde se muestran por AJAX los resultados se me añada otro? ¿Debería usar mejor un class en vez de un id por eso de que los id no se pueden repetir?

  2. Estás usando $("#mas_noticias").html(datos);
    Por lo que siempre remplazará lo que se encuentre en #mas_noticias por lo que se obtenga con ajax

    Prueba usando append:
    Código:
    $("#mas_noticias").append(datos);
    Citar Citar  

Temas similares

  1. Scroll Infinito como realizarlo?
    Hola amigos de forobeta... Desde el martes estoy intentando realizar un scrollinfinito pero no he tenido exito... ya me vi varios ejemplos y...
    Respuestas: 2
    Último mensaje: 25-mar-2017
  2. Cómo hacer scroll infinito en blogger
    en blog de recetas tiene mucho contenido original pero creo que necesito un scroll infinito para que vivan leyendo mi sitio. alguien sabe algún...
    Respuestas: 3
    Último mensaje: 25-may-2016
  3. Scroll infinito en Wordpress
    Hola foreros: Alguien sabe como identificar los CSS selector que el plugin Infinite-Scroll usa? Como hago para encontrar?: Content Selector...
    Respuestas: 1
    Último mensaje: 17-abr-2016
  4. Scroll infinito vs comentarios
    Hola! :) Estoy en un dilema, hace unos días encontré esta página que al entrar a un posts específico, y bajar, después de carga el siguiente y el...
    Respuestas: 3
    Último mensaje: 05-nov-2015
  5. Problemas con admin-ajax.php
    Ayer tuve una suspencion del host de mi blog, segun el soporte tecnico es por "Su cuenta ha sido suspendida por saturar nuestro servidor utilizando...
    Respuestas: 6
    Último mensaje: 14-sep-2011

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •