3

Tengo una tabla que obtine sus datos mediante un While,

introducir la descripción de la imagen aquí

Al dar click en INFO abre un modal el cual nos da los datos de la fila seleccionada

introducir la descripción de la imagen aquí

Lo que intento es actualizar los datos de la tabla y que los mismos se envien via AJAX, sin embargo los datos que se envian no son los mismos del formulario, se envía el último dato de la tabla Aunque seleccione el ID 19 los datos que regresan son los del ID 29

introducir la descripción de la imagen aquí

Este es el código que estoy usando

Modal

                      <form>
                        <div class="modal-body">
                          <!-- Formulario -->                            
                          <div class="row g-2">
                            <div class="col-md">
                              <div class="form-floating">
                                <input type="text" class="form-control" name="id_unidad" 
value="<?php echo $fila['id_unidad'] ?>" readonly>
                                <label for="floatingInputGrid">ID</label>
                              </div>
                            </div>
                            <div class="col-md">
                                <div class="form-floating">
                                  <select class="form-select" name="estatus_edit" aria- 
label="Floating label select example">
                                    <option value="<?php echo $fila['estatus'] ?>"><?php 
echo $fila['estatus'] ?></option>
                                    <option value="Cargando">Cargando</option>
                                    <option value="En_Ruta">En Ruta</option>
                                    <option value="Descargando">Descargando</option>
                                  </select>
                                  <label for="floatingSelectGrid">Estatus</label>
                                </div>
                              </div>
                          </div>
                          <br>
                          <div class="form-floating">
                            <textarea class="form-control" placeholder="Observaciones" 
name="observaciones_edit"><?php echo $fila['observaciones'] ?></textarea>
                            <label for="floatingTextarea">Observaciones</label>
                          </div>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-primary bi bi-reply-all" 
data-bs-dismiss="modal" onclick="editar_unidad()">Actualizar</button> 
                        </div>
                    </form>
            

Función

function editar_unidad(){
    $.ajax({
            type:"POST",
            url:"includes/editar_unidad.php",
            data: $("form").serialize(),

            success: function(data)            
           {
             $('#resp').html(data);           
           }

        });
}

PHP

<?php 

                          echo "economico=" . $_POST[economico_edit] . "<br>";
                          echo "unidad=" . $_POST[unidad_edit] . "<br>";
                          echo "placas=" . $_POST[placas_edit] . "<br>";
                          echo "serie=" . $_POST[serie_edit] . "<br>";
                          echo "ultimo_km=" . $_POST[ultimo_km_edit] . "<br>";
                          echo "km_recorridos=" . $_POST[km_recorridos_edit] . "<br>";
                          echo "rendimiento=" . $_POST[rendimiento_edit] . "<br>";
                          echo "ubicacion=" . $_POST[ubicacion_edit] . "<br>";
                          echo "estatus=" . $_POST[estatus_edit] . "<br>";
                          echo "observaciones=" . $_POST[observaciones_edit] . "<br>";
                          echo "id_unidad=" . $_POST[id_unidad] . "<br>";
 ?>

1 respuesta 1

3

Sin ver todo tu código, diria que tienes creados tantos modales como elementos tiene tu tabla, y todos del mismo modo, por lo tanto cuando los ves no es problema, muestran los datos correctamente, pero al darle al botón actualizar estas haciendo esto:

data: $("form").serialize(),

y por lo tanto deduzco que te está cogiendo solo el último <form> que encuentra y no el que estas actualmente.

Prueba con cambiar eso por esto:

data: $(event.target).closest('form').serialize(),

donde:

  • event.target representa el objeto donde has hecho clic, es decir, el botón actualizar que has pulsado.
  • closest('form') representa, gracias al método closest() de jquery, el <form> más cercano al elemento actual, subiendo por su árbol del DOM.

También puedes usar parents(), que en este caso vendria a ser lo mismo, de este modo:

data: $(event.target).parents('form').serialize(),

Actualización

Y gracias al aporte de @Marcos en los comentarios, también es necesario modificar dos cosas más, a saber:

  1. El onclick del botón Actualizar, que ahora está así:
onclick="editar_unidad()"

por esto:

onclick="editar_unidad(event)"
  1. La definición de la función:
function editar_unidad(){

por esto:

function editar_unidad(event){

De este modo identificamos el event de forma unívoca dentro de la función y no puede ser sobreescrito por ninguna variable global idéntica por error.

5
  • Cuando uno utiliza el atributo onclick e indica una función, si lo que se quiere es que dicha función reciba event, lo que debería hacer es ` onclick="miFuncion(event)"` y luego definir la función como function miFuncion (event) { .... }. Más info
    – Marcos
    el 18 mar. 2022 a las 11:39
  • @Marcos Sí, eso es lo que ya creía saber, pero quizás en jquery es distinto. Como muestra un botón: jsfiddle.net/dk4aqxfe Fíjate que sin hacer eso los valores se recuperan bien.
    – masterguru
    el 18 mar. 2022 a las 11:42
  • Te dejo este ejemplo para que veas porque es recomendable ser explicito a la hora de llamar una funcion. En este ejemplo ya no fallaría.
    – Marcos
    el 18 mar. 2022 a las 11:52
  • @Marcos Vale, ahora sí que entiendo mejor a que te refieres, gracias. Ya he puesto tu aporte en la pregunta, perfecto.
    – masterguru
    el 18 mar. 2022 a las 11:57
  • Muchas gracias!
    – Francisco
    el 18 mar. 2022 a las 14:45

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.