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>