1

Estoy creando un foro. 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.

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
  document.getElementById("modal-message").innerHTML = this.responseText;
}
};

 xhttp.open("POST", "comentarios.php", true);
 xhttp.send();

 }

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

?>

1 respuesta 1

1

Para obtener el valor de un atributo usa getAttribute()

Para obtener un elemento por un atributo o por selectores de CSS, usa querySelector()

document.addEventListener("DOMContentLoaded", () => {
    document.querySelector(".comentarPosts").addEventListener("click", () => {
        let xhr = new XMLHttpRequest();
        xhr.open("POST", "comentatios.php"); // No utilices el tercer parámetro, está deprecado
        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")}`);
    });
});

DOMContentLoaded detectará cuando el documento se ha cargado al completo, luego añadiermos un eventListener para detectar cuando se ha dado click a el botón con la clase comentarPosts, ten en cuenta que solo se aplicará el eventListener al primer elemento con esta clase; si necesitas añadir el eventListener a todos los elementos con esta clase usa querySelectorAll(), ten en cuenta que esto retorna un array, por lo que tendrás que hacer un forEach

document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll(".comentarPosts").foEach(el => {
el.addEventListener("click", () => {
        let xhr = new XMLHttpRequest();
        xhr.open("POST", "comentatios.php"); // No utilices el tercer parámetro, está deprecado
        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=${el.getAttribute("data-id")}`);
    });
});
});

EDIT

Utiliza el siguiente código para enviar con POST

document.addEventListener("DOMContentLoaded", () => {
    document.querySelector(".comentarPosts").addEventListener("click", () => {
        let xhr = new XMLHttpRequest();
        xhr.open("POST", "comentatios.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")}`);
    });
});

El header "Content-type" nos permite enviar información con POST a través de nuestra petición.

Edit 2

No encuentro problemas en la petición POST, puede que el problema esté del lado del backend. Prueba a esto en comentatios.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) { 
foreach($query_buscar_posts as $any):
?>

    <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
 endforeach   
}


else {
    
    echo "nada";
    
}
}
?>
12
  • Hay un error, seria el.addEventListener. A parte de eso, otra forma de leer data attributes es usar dataset y ya que estamos usando ES6, podría aprovechar y usar fetch
    – Marcos
    Commented el 24 dic. 2020 a las 22:40
  • 1
    @Marcos no sabía de la existencia de dataset ¡gracias por tu aporte!
    – Rodrigo
    Commented el 24 dic. 2020 a las 22:42
  • @Marcos Me lanza un error en la ventana modal y tiene que ver con "isPost". Voy a editar mi pregunta para añadir el código del archivo .php
    – luis
    Commented el 24 dic. 2020 a las 23:07
  • @luis trata de usar el código que te puse en el edit.
    – Rodrigo
    Commented el 24 dic. 2020 a las 23:24
  • @anythinggAcabo de probarlo. Te cuento que ahora si funciona, pero con el primer post. Me trae los comentarios de ese post, pero de los demás posts no me salen los comentarios.
    – luis
    Commented el 24 dic. 2020 a las 23:27

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.