entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

¿Cómo imprimir comentarios de diferentes posts en un modal?

Todo me funciona, hablo de traer los comentarios, pero solo me muestra los del primer post. Estoy usando el Ajax del JS plano.

Este es el código HTML.En el atributo data-id con PHP imprimo el id de cada post:

   <a href="javascript:void(0)" onclick="jaja()" class="comentarPosts"  data-id=<?php echo 
      $posts_filas["Id_post"]; ?>><img src="img/message1.png"><span>25</span></a>

Tengo este código Ajax(JQuery),el cual quiero pasar a JS plano. Lo que busco es pasar el valor de data-id. Este código me funciona, pero quiero dejar de usar Jquery y usar JS plano.

 $(document).ready(function(){
 $(document).on("click", ".comentarPosts", function () {

    var Id = $(this).data('id');
    $('#obtenerIdPost').val( Id );

 var datos = 'idPost='+ Id ;
 $.ajax({
 type:'POST',
 url:'comentarios.php',
 data:datos,
 success:function(result){
 $("#div1").html(result);
}
});
});
});

Este es el código Ajax con JS plano.


    document.addEventListener("DOMContentLoaded", () => {
    document.querySelector(".comentarPosts").addEventListener("click", () => {
        let xhr = new XMLHttpRequest();
        xhr.open("POST", "comentarios.php"); // No utilices el tercer parámetro, está deprecado
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status <= 299 && xhr.status >= 200) {
                    document.getElementById("modal-message").innerHTML = xhr.responseText;
                } else {
                    alert("Error al conectar con la API");
                }
           }
        };
        const comentarPost = document.querySelector(".comentarPosts");
        xhr.send(`idPost=${comentarPost.getAttribute("data-id")}`);
    });
});

Este es el código del archivo comentario.php:
<?php
include('conexion.php');

$id_post = $_POST['idPost'];

$query_buscar_posts = mysqli_query($conn, " 

SELECT 
 comentarios.id_usuario,
 comentarios.contenido,
  personas.nombre,
 personas.apellido,
 personas.Fotos 

  FROM personas 
 LEFT JOIN comentarios
 ON personas.Id = comentarios.id_usuario

 WHERE id_post = $id_post") or die('Error: ' . mysqli_error($conn));

 while ($posts_filas = mysqli_fetch_array($query_buscar_posts)) {

 # code...
$Id = $posts_filas['id_usuario'];
$contenido2 = $posts_filas['contenido'];

if (mysqli_num_rows($query_buscar_posts) >0) { ?>

<div class="wr_imnnacom">
<div class="wr_img">
<a href="#"><img style="width: 35px;height: 35px;" src='<?php echo $posts_filas['Fotos']; ?>' ></a>
</div>

<div class="wr_nm_comm">
<div class="wr_comm_usrpc">
    <a href="user.php">
        <h5><?php echo $posts_filas['nombre'] . ' ' . 
   $posts_filas['apellido']; ?></h5>
    </a>
</div>

<div class="wr_comm_comm">
    <p class="aaaa"><?php echo $posts_filas['id_usuario'] . ' ' . $posts_filas['contenido']; ?></p>
</div>
</div>

<div class="opt_this_comm">
 <a href="#">comentar</a>
</div>
</div>

 <?php

 }

  else {

  echo "nada";

 }
}

?>

3 Respuestas

1voto

luis2016 Puntos1930

Listo. Ya tengo lo que buscaba.

document.addEventListener("DOMContentLoaded", () => {
  // Buscamos TODOS e iteramos el arreglo
  document.querySelectorAll(".comentarPosts").forEach((element) => {
    // A cada elemento le asignamos el evento.
    element.addEventListener("click", (evt) => {
      // Obtenemos el elemento sobre el que se click-eo
      let comentarPost = evt.currentTarget;
      let xhr = new XMLHttpRequest();
      xhr.open("POST", "comentarios.php"); // No utilices el tercer parámetro, está deprecado
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status <= 299 && xhr.status >= 200) {
            document.getElementById("modal-message").innerHTML = xhr.responseText;
          } else {
            alert("Error al conectar con la API");
          }
        }
      };
      xhr.send(`idPost=${comentarPost.getAttribute("data-id")}`);
    });
  });
});

1voto

Peter comentado

Gracias por compartir la solución.

1voto

mchojrin Puntos2630

El problema que veo es que en ningún momento estás enviando el idPost en tu llamada Ajax...

¿No sería más conveniente pasar este parámetro por GET en lugar de POST?

En ese caso, sólo tendrías que cambiar la URL de la llamada, algo como:

xhr.open("GET", "comentarios.php?idPost=" + this.dataset.id);

0voto

luis2016 comentado

Me lanza error en en ".id"
En la consola del navegador me dice:

Uncaught TypeError: Cannot read property 'id' of undefined
    at HTMLAnchorElement.<anonymous>

0voto

mchojrin comentado

Sí, perdona, me confundí un poco :p

Aquí te dejo un ejemplo que funciona para que lo puedas adaptar:

<html>
<a href="javascript:void(0)" id="b" class="comentarPosts"  data-id="1">25</a>
</html>
<script language="javascript">
 document.addEventListener("DOMContentLoaded", () => {
    document.querySelector(".comentarPosts").addEventListener("click", function(event) {
        alert(event.srcElement.dataset.id);
    });
});
</script>

0voto

luis2016 comentado

Tomé ese código y lo probé en un documento nuevo y funciona,pero..........

Lo que busco es esto:

<html>
<a href="javascript:void(0)" id="b" class="comentarPosts"  data-id="1">25</a>
<a href="javascript:void(0)" id="c" class="comentarPosts"  data-id="2">24</a>
<a href="javascript:void(0)" id="d" class="comentarPosts"  data-id="3">27</a>
<a href="javascript:void(0)" id="g" class="comentarPosts"  data-id="4">28</a>
</html>

<script language="javascript">
 document.addEventListener("DOMContentLoaded", () => {
    document.querySelector(".comentarPosts").addEventListener("click", function(event) {
        alert(event.srcElement.dataset.id);
    });
});
</script>

que funcione el mismo código Ajax, pero para traerme los diferentes valores de los data-id según yo vaya haciendo clic en los diferentes en enlaces. Eso es todo
¿Y cuál es el problema? Solo me muestra o me está trabajando con el primer enlace.

1voto

mchojrin Puntos2630

Ya veo, el problema es que estás usando querySelector (que devuelve un único resultado) en lugar de querySelectorAll.

Prueba con:

<html>
<a href="javascript:void(0)" id="b" class="comentarPosts"  data-id="1">25</a>
<a href="javascript:void(0)" id="c" class="comentarPosts"  data-id="2">24</a>
<a href="javascript:void(0)" id="d" class="comentarPosts"  data-id="3">27</a>
<a href="javascript:void(0)" id="g" class="comentarPosts"  data-id="4">28</a>
</html>

<script language="javascript">
 document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll(".comentarPosts").forEach(function(a) {
        a.addEventListener("click", function(event) {
            alert(event.srcElement.dataset.id);
        });
    });
});
</script>

0voto

luis2016 comentado

Amigo y como le pongo lo de XMLHTTPREQUEST??

Lo puse asi,pero me salen los mismos comentarios en todos los posts:

   document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll(".comentarPosts").forEach(function(a) {
        a.addEventListener("click", function(event) {

 let xhr = new XMLHttpRequest();
        xhr.open("POST", "comentarios.php"); // No utilices el tercer parámetro, está deprecado
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status <= 299 && xhr.status >= 200) {
                    document.getElementById("modal-message").innerHTML = xhr.responseText;
                } else {
                    alert("Error al conectar con la API");
                }
           }
        };
        const comentarPost = document.querySelector(".comentarPosts");
        xhr.send(`idPost=${comentarPost.getAttribute("data-id")}`);
        });
    });
});

0voto

mchojrin comentado

El problema es que nunca estás indicando a qué post se refiere al hacer la llamada...

Si cambias el POST por GET como te sugería anteriormente será mucho más simple, si no, tendrás que implementar el envío de post data.

Aquí tienes un ejemplo.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta