Question

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";

 }
}

?>

Answer 1

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")}`);
    });
  });
});

Answer 2

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);

Answer 3

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>