0

Llevo un rato intentando cargar un modal con datos que tengo en una tabla, pero no tengo suerte. Soy principiante en php, y a pesar de leer toda la noche sobre este tema no pude hallar la solución.

Tengo una tabla de empleados que se llena dinámicamente tras una consulta sql con un foreach, y una de las columnas es un botón para ver más detalles sobre el empleado seleccionado.

Pude obtener un par de datos de la tabla, pero son todos de la última fila registrada sin importar el botón que oprima.

Les dejo los fragmentos de código que utilicé.

Consulta a la base de datos:

<?php
  include ("administrador/config/db.php");

  $txtDNI=(isset($_POST['txtDNI']))?$_POST['txtDNI']:"";

  $sentenciaSQL= $conexion->prepare("SELECT persona.apellido,
                                            persona.nombre,
                                            persona.dniPersona,
                                            puesto.descPuesto
                                          FROM persona
                                            INNER JOIN puesto_personas
                                          ON persona.dniPersona = puesto_personas.dni_Persona
                                            INNER JOIN puesto
                                          ON puesto_personas.cod_Puesto = puesto.codPuesto");

  $sentenciaSQL->execute();
  $listaPersonas=$sentenciaSQL->fetchAll(PDO::FETCH_ASSOC);


?>

Tabla:

<div class="table-responsive">
          <table class="table" id="tabla_id">
            <thead>
              <tr>
                <th scope="col">Apellido</th>
                <th scope="col">Nombre</th>
                <th scope="col">DNI</th>
                <th scope="col">Puesto</th>
                <th scope="col">Más información</th>
              </tr>
            </thead>
            <tbody>
             <?php foreach($listaPersonas as $persona ){ ?>
              <tr class='clickable-row'>
                <td><?php echo $persona["apellido"]; ?></td>
                <td><?php echo $persona["nombre"]; ?></td>
                <td><?php echo $persona["dniPersona"]; ?></td>
                <td><?php echo $persona["descPuesto"]; ?></td>

                <td>
                  <input type="hidden" name="txtDNI" id="txtDNI" value="<?php echo $persona['dniPersona']; ?>"/>
                  <input type="submit" class="btn btn-success" data-toggle="modal" value="Ver detalle"data-target="#exampleModal"/></td>
                </td>

              </tr>
              <?php } ?>
              
            </tbody>
          </table>

Modal:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-center" id="exampleModalLabel">Empleado: <?php echo $persona["apellido"]; echo" "; echo $persona['nombre']; ?></h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
      <ul class="list-group list-group-flush">
            <li class="list-group-item"><div class="form-group row">
              <label for="inputEmail3" class="col-sm-3 col-form-label">DNI:</label>
              <div class="col-sm-9">
                <label for="inputEmail3" class="col-sm-8 col-form-label"><?php echo $persona["dniPersona"]; ?></label>
              </div>
            </div></li>
            <li class="list-group-item"><div class="form-group row">
              <label for="inputEmail3" class="col-sm-3 col-form-label">Puesto:</label>
              <div class="col-sm-9">
                <label for="inputEmail3" class="col-sm-8 col-form-label"><?php echo $persona["descPuesto"]; ?></label>
              </div>
...
...
...

El código del modal continúa, pero creo que lo importante está en la parte de arriba. Las etiquetas están bien cerradas.

Gracias desde ya. Saludos!

2
  • Cuando trabajas con ventanas modales, estas se cargan previamente junto con todo el HTML. Por lo tanto, cuando se abren, ya deben contener la información que deseas presentar. Sin embargo, si necesitas cargar información de manera dinámica, es decir, obtener datos específicos a partir de un botón que solicite la información de un registro, se recomienda utilizar peticiones AJAX.
    – MR Dev
    Commented el 13 dic. 2023 a las 14:39
  • El problema es que el modal tiene que cargar los datos dinámicamente, pero el objeto PDO $persona ya fue recorrido en su totalidad, así que el apuntador del mismo queda en el último registro reemplazando las variables del modal con este valor y por eso te sale siempre lo mismo. Para resolver esto debes cargar el modal como te recomiedan en el comentario previo. Otra forma, poco pulcra pero sin necesidad de JS, es crear un modal para cada botón por cada registro del objeto PDO.
    – aeportugal
    Commented el 13 dic. 2023 a las 15:19

1 respuesta 1

0

Como los datos a mostrar en el modal están en la misma fila, puedes buscarlos desde ahí y rellenar el modal con aquellos datos

Aquí una demo con la explicación en los comentarios

//asignamos un evento al modal
//cada vez que se abra se ejecutará la función "verDetalle" y le pasaremos como argumento el botón que ha gatillado la acción
document.getElementById('exampleModal')
.addEventListener('show.bs.modal', a =>
 verDetalle(a.relatedTarget));


//Buscaremos de manera relativa la fila afectada, a partir del botón que ha gatillado la acción, ya que el botón se encuentra en la misma fila
//para esto buscaremos al padre del botón (un td) y luego a su padre un "tr"
function verDetalle(button){;
  const fila = button.parentElement.parentElement;
  const tds = [...fila.querySelectorAll("td")]; //obtenemos los texto dentro de cada td
  llenarDatos(...tds.map(a=>a.innerText));
}

//busca los campos dentro del modal y los rellena
function llenarDatos(apellido,nombre,dni,desc){
  const modal_apellido = document.getElementById("modal_apellido");
  const modal_nombre = document.getElementById("modal_nombre");
  const modal_dni = document.getElementById("modal_dni");
  const modal_desc = document.getElementById("modal_desc");
  
  modal_apellido.innerText = apellido;
  modal_nombre.innerText = nombre;
  modal_dni.innerText = dni;
  modal_desc.innerText = desc;
  
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<table class="table" id="tabla_id">
  <thead>
    <tr>
      <th scope="col">Apellido</th>
      <th scope="col">Nombre</th>
      <th scope="col">DNI</th>
      <th scope="col">Puesto</th>
      <th scope="col">Más información</th>
    </tr>
  </thead>
  <tbody>
    <tr class='clickable-row'>
      <td>Zapata</td>
      <td>Juan</td>
      <td>12321312</td>
      <td>43</td>

      <td>
        <input type="button" class="btn btn-success" value="Ver detalle" data-bs-toggle="modal" data-bs-target="#exampleModal"/>
      </td>


    </tr>
    <tr class='clickable-row'>
      <td>Parker</td>
      <td>Peter</td>
      <td>33333333</td>
      <td>1</td>

      <td>
        <input type="button" class="btn btn-success" value="Ver detalle" data-bs-toggle="modal" data-bs-target="#exampleModal"/>
      </td>


    </tr>

  </tbody>
</table>

<div class="modal fade" id="exampleModal" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
                 <label id="modal_apellido"></label>
         <label id="modal_nombre"></label>
         <label id="modal_dni"></label>
         <label id="modal_desc"></label>
      </div>
    </div>
  </div>
</div>

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.