0

Buen día. Tengo este código el cual me funciona bien. Desde mi función en PHP hago query a la base de datos y muestro los resultados en fila.

Necesito que funcione de la siguiente manera: Al dar click en el botón "ver más" llamo a la función datos y envío como argumento el folio que en esta caso funciona como mi ID para posteriormente realizar una consulta más detallada sobre ese folio. Este código funciona, pero yo no encuentro otra manera de hacerlo y eso me frustra, quisiera que me ayudarán a hacerlo de otra manera y saber qué tan eficiente es.

Por ejemplo, usar jQuery para recoger el ID de cada fila al dar clic sin tener que meter dentro del PHP la llamada a la función.

Código HTML dónde muestra los datos <input type="button" name="" value="Mostar" id="show"> <div class="" id="listado"> </div>

$('#show').click(function() {
mostrar();
})

function mostrar() {

  $.ajax({

    type: 'POST',
    url: '../php/ctrl/listado.php',
    data: "show="+$('#show').val(),
    success:function(msj){
      document.getElementById("listado").innerHTML = msj;
    }
  })
}
function datos(dato) {
//recibir folio y enviarlo para procesarlo posteriormente
}
<input type="button" name="" value="Mostar" id="show">
<div class="" id="listado"> </div>

Código PHP donde hago la consulta para mostrar la fila de resultados de la primera solicitud.

$array = mysqli_query(conectar(), "SELECT * FROM quejas");
if($array == FALSE)
      {echo "Error, intentar de nuevo mas tarde";}     
else 
{
    echo "<div> Resultados";
    while ($row = $array->fetch_array()) 
    {
      echo "Nombre: ".$row['alumno']."Correo: ".$row['correo']."<button onclick='datos( &#39;". $row['folio'] ."&#39;)'> Ver mas</button><br>";
    }
    echo"</p> </div>";
}
4
  • Bienvenido a Stackoverflow. Tu pregunta está planteada de una manera confusa, ¿cuál es el problema concretamente y qué es lo que quieres hacer? ¿El código PHP que muestras es el de listado.php?
    – A. Cedano
    el 17 abr. 2019 a las 8:30
  • Lo siento, si, en el codigo PHP realizo la consulta. Muestro los resultados y en cada fila agrego un boton con el folio. Necesito recoger el folio desde html para posteriormente realizar otra consulta referente a ese folio el 17 abr. 2019 a las 15:33
  • O sea ¿cada fila tendrá su botón? Entonces le puedes asignar a ese botón el ID y una clase, luego poner un listener a los botones por la clase y recoger el dato con this.id
    – A. Cedano
    el 17 abr. 2019 a las 15:39
  • Perdona, crees que puedas darme un ejemplo? No estoy familiarizado con el uso de listener y this.id. Me pregunto como puedo recoger el valor por ID si el id será dinamico, por ejemplo, pueden ser 20 dilas o 50. Perdona mi ignorancia el 17 abr. 2019 a las 15:49

1 respuesta 1

1

Esto sería una prueba. Si observas el HTML, verás que cada button tiene en su id un número distinto: 1,2,3.... En el código PHP asignarías ahí el valor de $row['folio'] que es el dato que te interesa, según he podido entender.

Al div que agrupa ese bloque le he puesto una clase listAlumnos, para luego poder alcanzar con querySelectorAll todos los botones que están dentro de ese div y asignarle un listener. Ese bloque de código se ejecutará cada vez que se haga clic en uno de los botones, y tendrás en thisId el valor del id del botón sobre el que se hizo click.

Te dejo este ejemplo con datos a mano, dado que aquí no puedo hacer pruebas basadas en PHP.

/*Siempre poner esto, para que no se usen elementos del DOM sin estar cargado*/
document.addEventListener("DOMContentLoaded", function(e) {
  /*Seleccionar botones*/
  var btnAlumnos = document.querySelectorAll('div.listAlumnos button');
  /*Poner listener a cada botón*/
  btnAlumnos.forEach(function(item) {
    item.addEventListener('click', function(e) {
      /*
        IMPORTANTE:
        Este código ocurrirá cada vez que se haga click en uno de los botones
        Aquí e representa "el botón (cualquiera que sea) sobre el que se hizo click"
        y mediante e puedes acceder a CUALQUIER propiedad de ese elemento
        como de hecho hacemos aquí, obteniendo su id ... 
        Esto es importante conocerlo para manejar con facilidad datos dinámicos
        Aquí dentro tiene que ir lo que vayas a hacer con thisId
        o se lo puedes pasar a otra función si fuera preciso
        Lo que cuenta es que cada vez tendrás el dato del botón que haya sido presionado
      */

      var thisId = e.target.id;
      /*Sólo a modo de prueba*/
      console.log(thisId);
    });
  });
});
<div class="listAlumnos">
  <p>Nombre: Pedro <button id="1">Ver más...</button></p>
  <p>Nombre: María <button id="2">Ver más...</button></p>
  <p>Nombre: Juan  <button id="3">Ver más...</button></p>
  <p>Nombre: Magdalena <button id="4">Ver más...</button></p>
</div>


PHP

Si escribes el código así, debería quedar adaptado para que funcione con el código Javascript de más arriba.

Me he permitido mejorar algunas cosas, como evitar tantos echo, y usar un método más específico para recoger los datos del resultado.

$array = mysqli_query(conectar(), "SELECT * FROM quejas");
if($array == FALSE)
{
    $txtOut= "Error, intentar de nuevo mas tarde";
}     
else 
{
    $txtOut= "<div class=\"listAlumnos\"> Resultados <p>";
    while ( $row = $array->fetch_assoc() ) 
    {
      $txtOut.= "Nombre: $row[alumno] Correo: $row[correo] <button id=\"$row[folio]\">Ver más...</button><br />";
    }
    $txtOut.="</p> </div>";
}
echo $txtOut;

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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