1

tengo una tabla de registros donde tengo un boton para editar el registro, cada tiene una ID diferente dependiendo de cuantos datos estan en mi base de datos, lo que quiero hacer es que cuando se presione el boton para editar este me abra el modal y a su vez mande el id para que la estructura de mi modal pueda mostrarme los valores que corresponden a esa id:

HTML

Esta es la esctrutura de mi tabla

<table id="tabla" class="table">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Estudiante</th>
                                                <th class="text-center">Cedula</th>
                                                <th class="text-center">Carrera</th>
                                                <th class="text-center">Seccion</th>
                                                <th class="text-center">Trayecto</th>
                                                <th class="text-center">Solicitud</th>
                                                <th class="text-center">Fecha</th>
                                                <th class="text-center">Status</th>
                                                <th class="text-center">Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <?php
        require 'includes/bd.inc.php';
        $sql="SELECT * from solicitudes";
        $result=mysqli_query($conn,$sql);
        while($mostrar=mysqli_fetch_array($result)){ 
            ?>
                                            <tr>
                                                <td class="text-center"><?php echo $mostrar['estudiante']; ?></td>
                                                <td class="text-center"><?php echo $mostrar['cedula']; ?></td>
                                                <td class="text-center"><?php echo $mostrar['carrera']; ?></td>
                                                <td class="text-center"><?php echo $mostrar['seccion']; ?></td>
                                                <td class="text-center"><?php echo $mostrar['trayecto']; ?></td>
                                                <td class="text-center"><?php echo $mostrar['solicitud']; ?></td>
                                                <td class="text-center"><?php echo $mostrar['fecha']; ?></td>
                                                <td class="text-center">
                                                <?php 
                                                $status = $mostrar['estado'];

                                                if ($status == 'Pendiente') {
                                                    echo '<div class="badge badge-warning">Pendiente</div>';
                                                } else {
                                                    echo '<div class="badge badge-success">Completada</div>';
                                                } ?>
                                                </td>
                                            <td class="text-center">
                                            //AQUI ESTA EL BOTON DE EDITAR DONDE LLAMO A LA MODAL A PANTALLA
                                            <div>
                                            <a data-toggle="modal" data-target="#modaleditar">
                                                <button class="btn btn-warning btn-sm" data-toggle="tooltip" data-placement="left" title="Modificar Solicitud"><i class="pe-7s-note"></i></button>
                                            </a>
                                            </div>
                                            //HASTA AQUI ESTA EL BOTON DE EDITAR DONDE LLAMO A LA MODAL A PANTALLA
                                            <div>
                                            <form action="includes/eliminarsolicitud.inc.php" method="post">
                                                <input type="hidden" name="ids" value="<?php echo $mostrar['ids']; ?>">
                                                <button class="btn btn-danger" type="submit" name="submite" data-toggle="tooltip" data-placement="left" title="Eliminar Solicitud" onclick="return confirm('¿Esta seguro que quiere Eliminar la Solicitud?');"><i class="pe-7s-trash"></i>
                                                </button>
                                            </form>
                                            </div>
                                    </td>
                                                </tr>
                                                <?php } ?>
                                        </tbody>
                                    </table> 

Y esta es la estructura de mi Modal

<div class="modal fade" id="modaleditar" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Editar Solicitud</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <?php 
               $ids = $mostrar['ids'];
               include ("includes/bd.inc.php");
               $sql="SELECT * from solicitudes WHERE ids='$ids'";
               $result=mysqli_query($conn,$sql);
               $mostrar=mysqli_fetch_array($result); ?>

        <form class="needs-validation" action="includes/mod.solicitud.inc.php?=<?php echo $mostrar['ids']; ?>" method="post" novalidate>
            <div class="modal-body">
                    <div class="form-row">
                        <div class="col-md-8 mb-3">

                            <input type="hidden" name="ids" value="<?php echo $mostrar['ids']; ?>">

                            <label for="estudiante">Nombre y Apellido</label>
                            <input type="text" class="form-control" id="estudiante" name='estudiante' placeholder="Nombre y Apellido" value="<?php echo $mostrar['estudiante']; ?>"
                            onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))"
                            maxlength="15"
                            required>
                                <div class="invalid-feedback">
                                    Debe rellenar este campo.
                                </div>
                            <div class="valid-feedback">
                                Listo.
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="cedula">Cedula</label>
                            <input type="text" class="form-control" id="cedula" name="cedula" placeholder="Cedula" value="<?php echo $mostrar['cedula']; ?>"
                            onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))"
                            maxlength="8" required>
                            <div class="invalid-feedback">
                                Debe rellenar este campo.
                            </div>
                            <div class="valid-feedback">
                                Listo.
                            </div>
                        </div>
                    </div>

                    <div class="form-row">

                        <div class="col-md-4 mb-3">

                            <label for="carrera">Carrera</label>
                            <select id="carrera" name="carrera" class="form-control">
                                <option value="<?php echo $mostrar['carrera'];?>"><?php echo $mostrar['carrera']; ?></option>
                                <option value="Informatica">Informatica</option>
                                <option value="Electricidad">Electricidad</option>
                                <option value="Mecánica">Mecánica</option>
                                <option value="Calidad y Ambiente">Calidad y Ambiente</option>
                                <option value="Geociencias">Geociencias</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="seccion">Seccion</label>
                            <input type="text" class="form-control" id="seccion" name="seccion" placeholder="Seccion" value="<?php echo $mostrar['seccion']; ?>" required>
                            <div class="invalid-feedback">
                                Debe llenar este campo.
                            </div>
                            <div class="valid-feedback">
                                Listo.
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="trayecto">Trayecto</label>
                            <input type="text" class="form-control" id="trayecto" name="trayecto" placeholder="Trayecto" value="<?php echo $mostrar['trayecto']; ?>" required>
                            <div class="invalid-feedback">
                                Debe llenar este campo.
                            </div>
                            <div class="valid-feedback">
                                Listo.
                            </div>
                        </div>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button type="submit" name="modificar" class="btn btn-primary">Realizar Formulario</button>
            </div>
        </form>
            <script type="text/javascript" src="./assets/scripts/validarformularios.js"></script>
        </div>
</div>

Ultimamente he utilizado varias formas para lograr esto, y hasta los momentos lo que mas o menos me ha funcionado fue mandando el id por el "Data-target", y a su vez colocando en la id de mi modal la misma estructura, pero solamente me da para modificar el primer valor en mi tabla

Y he leido en varios foros que es posible hacer esto con AJAX, pero no entiendo mucho como utilizarlo, y de ser así, agradeceria mucho que me explicaran un poco como funciona

Les agradeceré mucho la ayuda

2
  • El código PHP se va a ejecutar 1 vez, ya luego debes usar Javascript para llenar los datos del modal. Si ya tienes todos los datos cargados en la tabla no necesitas AJAX; porque puedes obtener todos los datos de la tabla HTML. Commented el 8 jun. 2020 a las 19:06
  • Hola, y como podria hacer eso? aun no se mucho de JS y no logro entender muy bien. por ahora lo que pienso es en una manera de que con js pueda capturar el id de los <td> y de alguna forma usarla para hacer algo así: $ids = (aqui iria el id que estoy capturando con JS); Commented el 8 jun. 2020 a las 23:24

1 respuesta 1

1

No necesitas tener un formulario para cada cosa, basta con identificar a dónde pertenece el botón en que se hizo clic y tomar de ahí los datos correspondientes.

Para este ejemplo agregué id de estudiante en el dataset del botón (data-id="#") y escuchar el evento click, donde se busca la fila (TR) a la que pertenece el botón y se obtienen los datos desde cada columna (TD):

let botones = document.querySelectorAll('[data-target="#modaleditar"]');
botones.forEach(btn => {
    btn.addEventListener('click', function() {
        // Obtener columnas desde TR padre:
        let tds = this.closest('tr').querySelectorAll('td');
        // Obtener ID desde el botón
        let id = this.dataset.id;
        // Obtener datos por contenido de TD:
        let nombre = tds[0].innerText;
        let cedula = tds[1].innerText;
        let fecha = tds[6].innerText;
        // Asignar datos a ventana modal:
        document.querySelector('#id_estudiante').value = id;
        document.querySelector('#estudiante').value = nombre;
        document.querySelector('#cedula').value = cedula;
        console.log('abrir modal');
        $('#modaleditar').modal();
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table id="tabla" class="table">
    <thead>
        <tr>
            <th class="text-center">Estudiante</th>
            <th class="text-center">Cédula</th>
            <th class="text-center">Carrera</th>
            <th class="text-center">Sección</th>
            <th class="text-center">Trayecto</th>
            <th class="text-center">Solicitud</th>
            <th class="text-center">Fecha</th>
            <th class="text-center">Status</th>
            <th class="text-center">Acciones</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">Nombre 1</td>
            <td class="text-center">Cédula 1</td>
            <td class="text-center">Carrera 1</td>
            <td class="text-center">Sección 1</td>
            <td class="text-center">Trayecto 1</td>
            <td class="text-center">Solicitud 1</td>
            <td class="text-center">08-jun/2020</td>
            <td class="text-center">Status 1</td>
            <td class="text-center">
                <button class="btn btn-warning btn-sm" data-target="#modaleditar" data-toggle="tooltip" data-placement="left" data-id="1" title="Modificar Solicitud"><i class="pe-7s-note"></i></button>
            </td>
        </tr>
        <tr>
            <td class="text-center">Nombre 2</td>
            <td class="text-center">Cédula 2</td>
            <td class="text-center">Carrera 2</td>
            <td class="text-center">Sección 2</td>
            <td class="text-center">Trayecto 2</td>
            <td class="text-center">Solicitud 2</td>
            <td class="text-center">01-jun/2020</td>
            <td class="text-center">Status 2</td>
            <td class="text-center">
                <button class="btn btn-warning btn-sm" data-target="#modaleditar" data-toggle="tooltip" data-placement="left" data-id="2" title="Modificar Solicitud"><i class="pe-7s-note"></i></button>
            </td>
        </tr>
    </tbody>
</table>

<div class="modal fade" id="modaleditar" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Options</h4>
        </div>
        <div class="modal-body">
          <input type="hidden" name="id_estudiante" id="id_estudiante">
    <input type="text" name="estudiante" id="estudiante" placeholder="Nombre y apellidos"><br>
    <input type="text" name="cedula" id="cedula" placeholder="Cédula">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

No hay mucha diferencia si usas jQuery, pero probablemente debas colocar el javascript hasta abajo en la página o en una función onload (o similar) para asegurarte de que se ejecute hasta que se haya cargado todo el contenido (DOM).

8
  • Hola Triby, muchas gracias por tu respuesta, la verdad no entiendo mucho de JS pero creo que se como funciona lo que hiciste en el ejemplo, estoy intentando hacerlo en mi codigo pero no me quiere abrir la modal, por que será? Commented el 8 jun. 2020 a las 23:35
  • @WilbelRivera utilizas Jquery o solo Javascript? Commented el 8 jun. 2020 a las 23:38
  • Solo por curiosidad, es posible que de alguna forma con JS pueda tomar el id de la tabla donde presione el boton de editar y que pueda meter esa informacion en la parte PHP de mi modal donde estoy esperando un POST? es decir, hacer algo como esto: $ids = $_POST['ids']; (Así esta actualmente en mi codigo) $ids = (aqui iria el id que estoy capturando con JS); Muchas gracias por tu ayuda y tu paciencia Commented el 8 jun. 2020 a las 23:40
  • Hola @CesarRomero, estoy usando jquery Commented el 8 jun. 2020 a las 23:42
  • 1
    acabo de probar el código de Triby y el modal abre; colocando el id de tu modal.. Voy a agregar la respuesta solo para que veas el funcionamiento. La respuesta es la de Triby Commented el 9 jun. 2020 a las 0:04

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.