0

Hace varios meses, tras muchas semanas de trabajo conseguí hacer un scroll infinito que va cargando otra página llamada articulo.php cuando se llega al final de la página. El problema está en que en la página que carga (articulo.php) hay un botón que tiene un id que depende de una base de datos (es una variable que se obtiene con un SELECT). Después, hay un script que cuando pulsas dicho botón te envía a otra página. El problema está en que cuando le pulsas es como si el botón no existiera, porque no se activa. No sé porqué puede ser, ni que es ni qué hacer para arreglarlo. Si alguien supiera el problema, como solucionarlo, otra forma en hacer un scroll infinito, algún consejo lo agradecería. Muchisímas gracias a todos por vuestro tiempo.

El código del scroll infinito es el siguiente:

<script>
  function ajax(){
  const http = new XMLHttpRequest();
  const url = 'http://localhost/Registro/articulo.php';
  http.onreadystatechange = function(){
      if(this.readyState == 4 && this.status == 200){
        console.log(this.responseText);
        document.getElementById("response").innerHTML += this.responseText;
      }
  }
  
  http.open("GET", url);
  http.send();

  }


$(document).ready(function(){
  
  $(document).scroll(function(){

      if($(document).scrollTop()+$(window).height()>=$(document).height())
      {
        
        $("body").append( ajax(),ajax(),ajax());
      }
  });
});
</script>

El código del botón es el siguiente:

<?php $sql="SELECT*FROM publicaciones WHERE grupo = '".$grupo2."' ORDER BY RAND() limit 1";
    $result=mysqli_query($conn,$sql);
    while($mostrar=mysqli_fetch_array($result)){ 
      $publicacion=$mostrar['publicacion'];
      $imagen = $mostrar['imagen'];
      $idpublicacion = $mostrar['Numero'];
      ?>
      <?php } ?>
  <hgroup>
    <div id="user"><button id="<?= $idpublicacion ?>" class="boton_autor"><img src="Imagenes/Foto de perfil - copia.png" id="fotouser">
    <h1 id="nombreuser">
        <?php $sql="SELECT*FROM publicaciones WHERE publicacion= '".$publicacion."' ORDER BY RAND() limit 1";
      $result=mysqli_query($conn, $sql);
      while($mostrar=mysqli_fetch_array($result)){ 
        $autor= ucfirst($mostrar['nombre']);?> 
      <div id="<?= $idpublicacion ?>autor"><?php echo $autor;?></div>
      <?php } ?>
    </h1></button>
    </div>

Y el script que activa el botón que también está en esta página llamada articulo.php es:

<script>
      var boton_autor<?= $idpublicacion ?> = document.getElementById('<?= $idpublicacion ?>');
      var autorperfil<?= $idpublicacion ?> = document.getElementById('<?= $idpublicacion ?>autor').textContent;
      boton_autor<?= $idpublicacion ?>.addEventListener('click', () => {
        window.location.href = 'Perfilotros.php?autor=' + autorperfil<?= $idpublicacion ?>;
      });
    </script>

1 respuesta 1

1

Tu lo has dicho, como el botón no existe cuando cargas el DOM, el script no lo detecta.

Para solucionarlo, puedes poner el script JS dentro de una función y en el botón, agregas el código que ejecuta la función con el evento onclick, incluso puedes pasar el idPublicacion como parámetro en la función. Ejemplo:

<button id="2580" class="boton_autor" onclick="nuevaPagina(2580)">click me!</button><br>
<button id="2581" class="boton_autor" onclick="nuevaPagina(2581)">click me!</button><br>
<button id="2582" class="boton_autor" onclick="nuevaPagina(2582)">click me!</button><br>

<script>
    //Declaramos la función la cual recibe como parámetro el id de la publicación
    function nuevaPagina(idPublicacion) {
        //Dentro de la función, usamos el id para lo que necesitemos
        console.log('ID Publicación: ' + idPublicacion);
        console.log('boton_autor' + idPublicacion);
        console.log('autorperfil' + idPublicacion);
        console.log(idPublicacion + 'autor');
        //Por ejemplo, construir la url
        //window.location.href = 'Perfilotros.php?autor=autorperfil' + idPublicacion;
    }
</script>

En el snnipet funciona, pero debes adaptarlo a tu código para que revises si con tu estructura es válido.

1
  • Muchisimas gracias. Te estaré siempre agradecido. Me sirvió perfecto. :)
    – Mariguuan
    Commented el 28 nov. 2021 a las 20:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.