2

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>

1 respuesta 1

1

Puedes usar Javascript para lograrlo, por ejemplo con el atributo data https://developer.mozilla.org/es/docs/Learn/HTML/como/Usando_atributos_de_datos

$('.show-modal-qualification').click(function() {
  $('#qualification').modal('show');
   $('span').text($(this).data('id'));
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<a href="javascript: void(0)" class="btn btn-info show-modal-qualification" data-id="1">Calificar</a>
<br>
<br>
<a href="javascript: void(0)" class="btn btn-info show-modal-qualification" data-id="2">Calificar</a>

<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>
        <p>El id es: <span></span><p>
      </div>
<div class="modal-body" id="success">
      </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.