Scroll infinito - Problema con javascript

Federico99 · 11 Oct 2018

Hola gente! Como están?

Les cuento, estoy armando una web que tiene un scroll infinito, para que al llegar al final del scroll vaya cargando las entradas siguientes.

Cada entrada tiene una votación + - con un sistema en php / mysql / javascript

El sistema de votación funciona bien la primera vez, pero cuando carga las siguientes entradas después llamar a la nueva página mediante ajax (cuando se activa el scroll infinito) la votación no funciona.

Entiendo que es porque el codigo javascript que necesita funcionar no está cargado en la nueva página que llamo mediante ajax.

El tema es que si la cargo de nuevo cuando hace la llamada, el sistema de votación funciona para los que se acaban de cargar, pero deja de funcionar para los ya cargados ( porque se duplica el codigo javascript )

No se si me expliqué bien, espero por favor me puedan ayudar porque hace rato que estoy con esto y no le encuentro la vuelta

Gracias!!!

El codigo que estoy usando para el scrol infinito es:

Insertar CODE, HTML o PHP:

<script type="text/javascript">
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height()) {
          if(sigue){
            var last_id = $(".post-id:last").attr("id");
            loadMoreData(last_id);
            }
        }
    });
    function loadMoreData(last_id){
      $.ajax(
            {
                url: '/loadMoreDataLast.php?last_id=' + last_id,
                type: "get",
                beforeSend: function()
                {
                    $('.ajax-load').show();
                }
            })
            .success(function(data)
            {
                $('.ajax-load').hide();
                $("#post-data").append(data);
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                  alert('Ha ocurrido un problema con el servidor. Recarga la app.');
            });
    }
</script>

Y lo que no me está cargando es este script, que lo tengo arriba declarado en el html principal

Insertar CODE, HTML o PHP:

<script src="/assets/js/votpos.min.js?v=1" type="text/javascript"></script>

ivan455 · 11 Oct 2018

Carga el script cada vez que agrega una entrada y eliminas el anterior script para actualizarlo y tenga presencia

Federico99 · 11 Oct 2018

ivan455 dijo:
Carga el script cada vez que agrega una entrada y eliminas el anterior script para actualizarlo y tenga presencia

Hola! Como podría eliminar el script anterior ya cargado?

Una solución que se me ocurrió es utilizar otro script de scroll infinito, por ejemplo como el que usa la web Asco de Vida, aunque podria ser peor que si bien es un "scroll infinito" porque se carga las nuevas entradas debajo, se genera una nueva URL, por ej, Asco de Vida, aunque podria ser peor pero no puedo encontrar nada ya hecho que funcione así

- - - Actualizado - - -

He visto esto de aquí php - Infinite Scroll with history.pushState - Stack Overflow que podría servirme pero no termino de entenderlo para hacerlo que encaje con lo que necesito. pfffff 😛8:

YeltsinReyes · 11 Oct 2018

[MENTION=174361]Federico Caruso[/MENTION] pero tu carga es el html de las demas entradas? osea mas posts?
si es asi entonce deveria de funcionar el sistema de votaciones!

el javascript no detecta el click en el + y - ??

Federico99 · 12 Oct 2018

YeltsinReyes dijo:
[MENTION=174361]Federico Caruso[/MENTION] pero tu carga es el html de las demas entradas? osea mas posts?
si es asi entonce deveria de funcionar el sistema de votaciones!

el javascript no detecta el click en el + y - ??

Hola colega!

Claro, cuando carga la página la primera vez muestra 10 entradas.

Cuando hace el scroll, llama a un php y carga las siguientes 10 mediante ajax.

Para las primeras 10, la votación funciona perfecto. Pero para las segundas 10 que se cargaron con el scroll, no funciona.

El script de votacion que llama cuando se hace click en el + es:

HTML:

   $(document).ready(function(){
    $(".positive").click(function(){
       var id = $(this).prop("rel");
           var formData = { id: id,
            };
        $.ajax({
            type: "POST",
            url: "../../actions/action_votpos.php",
            data: formData,
            complete:function(){

                if (votpos_encendido) {
                  $("#votpos"+id).removeClass("btn_fav");
                  $("#votneg"+id).addClass("btn_fav");
                  $("#spanvot"+id).addClass("color");
                } else {
                  $("#votpos"+id).addClass("btn_fav");
                      $("#spanvot"+id).removeClass("color");

                }       

            }
            
            }).done(function(res){
              $("#spanvot"+id).html(res);
             });
    });
});

YeltsinReyes · 12 Oct 2018

[MENTION=174361]Federico Caruso[/MENTION] Hola man, cambia esto...

Insertar CODE, HTML o PHP:

$(".positive").click(function(){

por este y pon el script en el footer

Insertar CODE, HTML o PHP:

$(document).on('click', '.positive', function(){

y prueba si funciona! :encouragement:

Federico99 · 12 Oct 2018

YeltsinReyes dijo:
[MENTION=174361]Federico Caruso[/MENTION] Hola man, cambia esto...

Insertar CODE, HTML o PHP:

$(".positive").click(function(){

por este y pon el script en el footer

Insertar CODE, HTML o PHP:

$(document).on('click', '.positive', function(){

y prueba si funciona! :encouragement:

Funcionó !!! 😱nthego:

Gracias bro, lo probé recién y anduvo, me sacaste un problema de encima.

Tenés webs? Te regalo una reseña en una buena web, mandame un MP 😱nthego: 😱nthego:

Scroll infinito - Problema con javascript

Federico99

ivan455

Federico99

YeltsinReyes

Federico99

YeltsinReyes

Federico99

Temas similares