Skip to main content

pasar datos de una tabla sql impresa en html a una ventana modal en jquery

Escenario:

  • Dispongo de una tabla sql llamada códigos que contiene un listado de trabajos a calificar.
  • La tabla se imprime en formato html en una página que utiliza Bootstrap (incluye jquery).
  • La tabla html muestra los siguientes datos: id del trabajo, nombre, fecha, enlace al detalle, y dos botones para eliminar o calificar el trabajo correspondiente.

Objetivo:

  • Necesito que al hacer clic en el botón de calificar de cada fila o trabajo a calificar, se abra una modal.
  • Quiero que los datos del registro estén disponibles dentro de la modal que se ha abierto en paso anterior.
  • La modal también debe contener un campo de texto editable que permita modificar la calificación del trabajo al hacer clic en un botón "Enviar calificación".

Bloqueo:

  • Para poder editar la calificación correspondiente al botón de un registro concreto, no sé cómo enviar la id desde la ventana activa a la modal.

NOTA: Todo debe ser dentro de la misma pagina.

CÓDIGO DE LA TABLA

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nombre</th>
      <th scope="col">Trabajo</th>
      <th scope="col">Fecha</th>
      <th scope="col">Acción</th>
    </tr>
  </thead>
  <tbody>
    <?php
include("../../conexion.php");
$query = "SELECT * FROM codigos";
$resultado = $conexion -> query($query);
while($row = $resultado -> fetch_assoc()){
?>
    <tr>
      <th scope="row"><?php echo $row['id'];?></th>
      <td><?php echo $row['nombre'];?></td>
      <td><a href="javascript: void(0)"  class="btn btn-success show-modal-preview" id="<?php echo $row['id']; ?>">Ver</a></td>
      <td><?php echo $row['fecha'];?></td>
      <td>
<a href="javascript: void(0)" class="btn btn-info show-modal-qualification" id="<?php echo $row['id']; ?>">Calificar</a><!-- Botón que abre el modal -->
<a href="borrar_codigo.php?id=<?php echo $row['id']; ?>" class="btn btn-danger">Eliminar</a>
</td>

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

Código del modal

<div class="modal fade bd-example-modal-xl" id="qualification" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
 <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Trabajo</h5>
      </div>
<div class="modal-body" id="success">
      </div>
    </div>
  </div>
</div>