0

Espero puedan orientarme para saber qué estoy haciendo de manera errónea, Al intentar actualizar un registro, los cambios no se ven reflejados. Le comparto el código, como lo tengo estructurado. Estoy trabajando con AJAX, Datatable y php.

<thead>
                        <tr>
                            <th>Id</th>
                            <th>No Reporte</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>Dirección</th>
                            <th>Descrip. Domicilio</th>
                            <th>Telefono</th>
                            <th>№ contrato</th>
                            <th>Fecha de inicio</th>
                            <th>Hora de inicio</th>
                            <th>Fecha de Finalización</th>
                            <th>Hora de Finalización</th>
                            <th>Cuadrilla</th>
                            <th>Estatus</th>
                            <th>Observación</th>
                            <th>Encargado Cuadrilla</th>
                            <th>Otra Descripción</th>
                            <th>Opciones</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <th>Id</th>
                        <th>No Reporte</th>
                        <th>Nombre</th>
                        <th>Apellido</th>
                        <th>Dirección</th>
                        <th>Descrip. Domicilio</th>
                        <th>Telefono</th>
                        <th>№ contrato</th>
                        <th>Fecha de inicio</th>
                        <th>Hora de inicio</th>
                        <th>Fecha de Finalización</th>
                        <th>Hora de Finalización</th>
                        <th>Cuadrilla</th>
                        <th>Estatus</th>
                        <th>Observación</th>
                        <th>Encargado Cuadrilla</th>
                        <th>Otra Descripción</th>
                        <th>Opciones</th>
                    </tfoot>
                    </thead>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!--Modal para CRUD-->
<div class="modal fade" id="modalCRUD" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title col-11 text-center" id="exampleModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="formReportes">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-6">

                            <div class="form-group">
                                <label for="folio" class="col-form-label">Folio:</label>
                                <input type="text" class="form-control" id="folio" readonly>

                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="nombre" class="col-form-label">Nombre</label>
                                <input type="text" class="form-control" id="nombre" placeholder="Ingrese un Nombre" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="apellido" class="col-form-label">Apellido</label>
                                <input type="text" class="form-control" id="apellido" placeholder="Ingrese un Apellido" required>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="direccion" class="col-form-label">Dirección</label>
                                <textarea type="text" class="form-control" id="direccion" placeholder="Ingrese una Dirección" required></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="desc_dom" class="col-form-label">Descripción domicilio</label>
                                <textarea type="text" class="form-control" id="descripcion_domicilio" placeholder="Descripción del Domicilio" required></textarea>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="telefono" class="col-form-label">Telefono</label>
                                <input type="number" class="form-control" id="telefono" placeholder="Numero de telefono" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">

                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="num_contrato" class="col-form-label">№ contrato</label>
                                <input type="number" class="form-control" id="num_contrato" placeholder="Número de contrato" required>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="fecha_incio" class="col-form-label">Fecha de Inicio</label>
                                <input type="date" class="form-control" id="fecha_inicio" placeholder="Ingrese una fecha" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">

                        <div class="col-lg-6">
                            <div class="form-group timepicker">
                                <label for="hora_incio" class="col-form-label">Hora de Inicio</label>
                                <input type="time" class="form-control" id="hora_inicio" required>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="fecha_final" class="col-form-label">Fecha de Finalización</label>
                                <input type="date" class="form-control" id="fecha_final" placeholder="Ingrese una fecha">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="hora_final" class="col-form-label">Hora de Finalización</label>
                                <input type="time" class="form-control" id="hora_final" placeholder="">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-Cuadrillas">
                                <label for="" class="col-form-label">Cuadrilla</label>
                                <select class="js-example-basic-multiple" name="states[]" multiple="multiple" id="cuadrilla" style="width: 100%">
                                    <option value="1">Operación Ciudad</option>
                                    <option value="2">Operación Mega sistema</option>
                                    <option value="3">Drenajes</option>
                                    <option value="4">Tomas tapadas</option>
                                    <option value="5">Cloración</option>
                                    <option value="6">Bacheo</option>
                                    <option value="7">Contratos</option>
                                    <option value="8">Otros</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-Estatus">
                                <label for="" class="col-form-label">Estatus</label>
                                <select class="js-example-basic-multiple" name="states[]" multiple="multiple" id="estatus" style="width: 100%">
                                    <option value="1">Inicio</option>
                                    <option value="2">Pendiente</option>
                                    <option value="3">Terminado</option>
                                    <option value="4">Cancelado</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="observacion" class="col-form-label">Observación</label>
                                <textarea type="text" class="form-control" id="observaciones" placeholder="Ingrese una Observación"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="encargado" class="col-form-label">Encargado de cuadrilla</label>
                                <input type="text" class="form-control" id="encargado_cuadrilla" placeholder="Nombre del encargado(a)" require>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="descripcion" class="col-form-label">Otra descripción</label>
                                <textarea type="text" class="form-control" id="otra_descripcion" placeholder="Otra descripción"></textarea>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Cancelar</button>
                    <button type="submit" id="btnGuardar" class="btn btn-dark">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

Este es mi codigo JS donde realizo los procedimientos para guardar, actualizar y eliminar, pero no entiendo que estoy realizando de manera erronea que no me esta guardando los datos actualizados, utilice un consol.log para visualizar los datos, pero aparace los datos vacios.

$(document).ready(function () {
  var id, opcion;
  opcion = 4;

  }

  tablaReportes = $("#tablaReportes").DataTable({
    ajax: {
      url: "../controlador/reportes.php",
      method: "POST",
      data: { opcion: opcion },
      dataSrc: "",
    },
    columns: [
      { data: "id" },
      { data: "folio" },
      { data: "nombre" },
      { data: "apellido" },
      { data: "direccion" },
      { data: "descripcion_domicilio" },
      { data: "telefono" },
      { data: "num_contrato" },
      { data: "fecha_inicio" },
      { data: "hora_inicio" },
      { data: "fecha_final" },
      { data: "hora_final" },
      {
        data: "cuadrilla",
        render: function (data, type, row, meta) {
          switch (data) {
            case "1":
              data =
                '<span class="badge badge-pill badge-primary">Operación ciudad</span>';
              break;
            case "2":
              data =
                '<span class="badge badge-pill badge-primary">Operación megasistema</span>';
              break;
            case "3":
              data =
                '<span class="badge badge-pill badge-secondary">Drenajes</span>';
              break;
            case "4":
              data =
                '<span class="badge badge-pill badge-secondary">Tomas tapadas</span>';
              break;
            case "5":
              data =
                '<span class="badge badge-pill badge-info">Cloración</span>';
              break;
            case "6":
              data = '<span class="badge badge-pill badge-dark">Bacheo</span>';
              break;
            case "7":
              data =
                '<span class="badge badge-pill badge-info">Contratos</span>';
              break;
            case "8":
              data = '<span class="badge badge-pill badge-info">Otros</span>';
              break;
            default:
              data = "";
          }
          return data;
        },
      },
      {
        data: "estatus",
        render: function (data, type, row, meta) {
          switch (data) {
            case "1":
              data = '<span class="badge badge-warning">Inicio</span>';
              break;
            case "2":
              data = '<span class="badge badge-warning">Pendiente</span>';
              break;
            case "3":
              data = '<span class="badge badge-success">Terminado</span>';
              break;
            case "4":
              data = '<span class="badge badge-danger">Cancelado</span>';
              break;
            default:
              data = "";
          }
          return data;
        },
      },
      { data: "observaciones" },
      { data: "encargado_cuadrilla" },
      { data: "otra_descripcion" },
      {
        defaultContent: `<div class='text-center'><div class='btn-group'><button class='btn btn-success btn-sm btnPrint'><i class='material-icons'>print</i></button><button class='btn btn-primary btn-sm btnEditar'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnBorrar'><i class='material-icons'>delete</i></button></div></div>`,
      },
    ],

    //Uso de los botones
    dom: "Bfrtip",
    responsive: true,
    lengthChange: false,
    autoWidth: false,
    buttons: [
      {
        extend: "copyHtml5",
        exportOptions: {
          columns: [0, ":visible"],
        },
      },
      {
        extend: "excelHtml5",
        exportOptions: {
          columns: ":visible",
        },
      },
      {
        extend: "pdfHtml5",
        exportOptions: {
          columns: [0, 1, 2, 5],
        },
      },
      "colvis",
    ],

    //Cambio de idiomas
    sDom: '<"top"fli>t<"bottom"p><"clear">r',
    sPaginationType: "full_numbers",
    bProcessing: true,
    bAutoWidth: false,
    language: {
      decimal: "",
      emptyTable: "No hay test",
      info: "Mostrando desde el _START_ al _END_ del total de _TOTAL_ registros",
      infoEmpty: "Mostrando desde el 0 al 0 del total de  0 registros",
      infoFiltered: "(Filtrados del total de _MAX_ registros)",
      infoPostFix: "",
      thousands: ",",
      lengthMenu: "Mostrar _MENU_ registros por página",
      loadingRecords: "Cargando...",
      processing: "Procesando...",
      search: "Buscar:",
      zeroRecords: "No se ha encontrado nada  atraves de ese filtrado.",
      paginate: {
        first: "Primero",
        last: "Última",
        next: "Siguiente",
        previous: "Anterior",
      },
      aria: {
        sortAscending: ": activate to sort column ascending",
        sortDescending: ": activate to sort column descending",
      },
    },
  });

  var fila; //captura la fila, para editar o eliminar
  //submit para el Alta y Actualización
  $("#formReportes").submit(function (e) {
    e.preventDefault(); //evita el comportambiento normal del submit, es decir, recarga total de la página
    id = $.trim($("#id").val());
    folio = $.trim($("#folio").val());
    nombre = $.trim($("#nombre").val());
    apellido = $.trim($("#apellido").val());
    direccion = $.trim($("#direccion").val());
    descripcion_domicilio = $.trim($("#descripcion_domicilio").val());
    telefono = $.trim($("#telefono").val());
    num_contrato = $.trim($("#num_contrato").val());
    fecha_inicio = $.trim($("#fecha_inicio").val());
    hora_inicio = $.trim($("#hora_inicio").val());
    fecha_final = $.trim($("#fecha_final").val());
    hora_final = $.trim($("#hora_final").val());
    cuadrilla = $.trim($("#cuadrilla").val());
    estatus = $.trim($("#estatus").val());
    observaciones = $.trim($("#observaciones").val());
    encargado_cuadrilla = $.trim($("#encargado_cuadrilla").val());
    otra_descripcion = $.trim($("#otra_descripcion").val());
    $.ajax({
      url: "../controlador/reportes.php",
      type: "POST",
      datatype: "json",
      data: {
        id: id,
        folio: folio,
        nombre: nombre,
        apellido: apellido,
        direccion: direccion,
        descripcion_domicilio: descripcion_domicilio,
        telefono: telefono,
        num_contrato: num_contrato,
        fecha_inicio: fecha_inicio,
        hora_incio: hora_inicio,
        fecha_final: fecha_final,
        hora_final: hora_final,
        cuadrilla: cuadrilla,
        estatus: estatus,
        observaciones: observaciones,
        encargado_cuadrilla: encargado_cuadrilla,
        otra_descripcion: otra_descripcion,
        opcion: opcion,
      },
      success: function (data) {
        console.log(data);
        tablaReportes.ajax.reload(null, false);
      },
    });
    $("#modalCRUD").modal("hide");
  });

  //para limpiar los campos antes de dar de Alta una Persona
  $("#btnNuevo").click(function () {
    opcion = 1; //alta
    id = null;
    $("#formReportes").trigger("reset");
    $(".modal-header").css("background-color", "#224abe");
    $(".modal-header").css("color", "white");
    $(".modal-title").text("Alta Reportes");
    $("#modalCRUD").modal("show");
  });

  $(document).on("click", ".btnPrint", function (e) {
    window.open(
      "./../Reports/orden.php?id=" +
        Number(
          e.target.parentNode.parentNode.parentNode.parentNode.parentNode.querySelector(
            ".sorting_1"
          ).textContent
        ),
      "_black"
    );
  });

  //Editar
  $(document).on("click", ".btnEditar", function (e) {
    e.preventDefault();
    opcion = 2; //editar
    fila = $(this).closest("tr");
    id = parseInt(fila.find("td:eq(0)").text()); //capturo el ID
    folio = tablaReportes.row($(this).closest("tr")).data()["folio"];
    nombre = tablaReportes.row($(this).closest("tr")).data()["nombre"];
    apellido = tablaReportes.row($(this).closest("tr")).data()["apellido"];
    direccion = tablaReportes.row($(this).closest("tr")).data()["direccion"];
    descripcion_domicilio = tablaReportes.row($(this).closest("tr")).data()["descripcion_domicilio"];
    telefono = tablaReportes.row($(this).closest("tr")).data()["telefono"];
    num_contrato = tablaReportes.row($(this).closest("tr")).data()["num_contrato"];
    fecha_inicio = tablaReportes.row($(this).closest("tr")).data()["fecha_inicio"];
    hora_inicio = tablaReportes.row($(this).closest("tr")).data()["hora_inicio"];
    fecha_final = tablaReportes.row($(this).closest("tr")).data()["fecha_final"];
    hora_final = tablaReportes.row($(this).closest("tr")).data()["hora_final"];
    cuadrilla = tablaReportes.row($(this).closest("tr")).data()["cuadrilla"];
    estatus = tablaReportes.row($(this).closest("tr")).data()["estatus"];
    observaciones = tablaReportes.row($(this).closest("tr")).data()["observaciones"];
    encargado_cuadrilla = tablaReportes.row($(this).closest("tr")).data()["encargado_cuadrilla"];
    otra_descripcion = tablaReportes.row($(this).closest("tr")).data()["otra_descripcion"];
    $("#folio").val(folio);
    $("#nombre").val(nombre);
    $("#apellido").val(apellido);
    $("#direccion").val(direccion);
    $("#descripcion_domicilio").val(descripcion_domicilio);
    $("#telefono").val(telefono);
    $("#num_contrato").val(num_contrato);
    $("#fecha_inicio").val(fecha_inicio);
    $("#hora_inicio").val(hora_inicio);
    $("#fecha_final").val(fecha_final);
    $("#hora_final").val(hora_final);
    $("#cuadrilla").select2().val(cuadrilla).trigger("change.select2");
    $("#estatus").select2().val(estatus).trigger("change.select2");
    $("#observaciones").val(observaciones);
    $("#encargado_cuadrilla").val(encargado_cuadrilla);
    $("#otra_descripcion").val(otra_descripcion);
    $(".modal-header").css("background-color", "#007bff");
    $(".modal-header").css("color", "white");
    $(".modal-title").text("Editar Reporte");
    $("#modalCRUD").modal("show");
  });

  //Borrar
  $(document).on("click", ".btnBorrar", function () {
    fila = $(this);
    id = parseInt($(this).closest("tr").find("td:eq(0)").text());
    opcion = 3; //eliminar
    var respuesta = confirm("¿Está seguro de borrar el registro " + id + "?");
    if (respuesta) {
      $.ajax({
        url: "../controlador/reportes.php",
        type: "POST",
        datatype: "json",
        data: { opcion: opcion, id: id },
        success: function () {
          tablaReportes.row(fila.parents("tr")).remove().draw();
        },
      });
    }
  });
});

Este es mi codigo donde realizo las consultas a mi base de datos, enviando las peticiones por AJAX

<?php

require_once 'conexion.php';
$objeto = new Conexion();
$conexion = $objeto->Conectar();

//Comprabamos si una variable esta definida o no en el Script
$folio = (isset($_POST['folio'])) ? $_POST['folio'] : '';
$nombre = (isset($_POST['nombre'])) ? $_POST['nombre'] : '';
$apellido = (isset($_POST['apellido'])) ? $_POST['apellido'] : '';
$direccion = (isset($_POST['direccion'])) ? $_POST['direccion'] : '';
$descripcion_domicilio = (isset($_POST['descripcion_domicilio'])) ? $_POST['descripcion_domicilio'] : '';
$telefono = (isset($_POST['telefono'])) ? $_POST['telefono'] : '';
$num_contrato = (isset($_POST['num_contrato'])) ? $_POST['num_contrato'] : '';
$fecha_inicio = (isset($_POST['fecha_inicio'])) ? $_POST['fecha_inicio'] : '';
$hora_inicio = (isset($_POST['hora_inicio'])) ? $_POST['hora_inicio'] : '';
$fecha_final = (isset($_POST['fecha_final'])) ? $_POST['fecha_final'] : '';
$hora_final = (isset($_POST['hora_final'])) ? $_POST['hora_final'] : '';
$cuadrilla = (isset($_POST['cuadrilla'])) ? $_POST['cuadrilla'] : '';
$estatus = (isset($_POST['estatus'])) ? $_POST['estatus'] : '';
$observaciones = (isset($_POST['observaciones'])) ? $_POST['observaciones'] : '';
$encargado_cuadrilla = (isset($_POST['encargado_cuadrilla'])) ? $_POST['encargado_cuadrilla'] : '';
$otra_descripcion = (isset($_POST['otra_descripcion'])) ? $_POST['otra_descripcion'] : '';

$opcion = (isset($_POST['opcion'])) ? $_POST['opcion'] : '';
$id = (isset($_POST['id'])) ? $_POST['id'] : '';

switch ($opcion) {
    case 1:
        $consulta = "INSERT INTO reportes (folio, nombre, apellido, direccion, descripcion_domicilio, telefono, num_contrato, fecha_inicio, hora_inicio, fecha_final, hora_final, cuadrilla, estatus, observaciones, encargado_cuadrilla, otra_descripcion)
        VALUES('$folio','$nombre', '$apellido','$direccion', '$descripcion_domicilio', '$telefono', '$num_contrato', '$fecha_inicio', '$hora_inicio', '$fecha_final', '$hora_final', '$cuadrilla', '$estatus', '$observaciones', '$encargado_cuadrilla', '$otra_descripcion')";
        $resultado = $conexion->prepare($consulta);
        $resultado->execute();

        $consulta = "SELECT * FROM reportes ORDER BY id DESC LIMIT 1";
        $resultado = $conexion->prepare($consulta);
        $resultado->execute();
        $data = $resultado->fetchAll(PDO::FETCH_ASSOC);
        break;

    case 2: //Editar
        $consulta = "UPDATE reportes SET folio='$folio', nombre='$nombre', apellido='$apellido', direccion='$direccion', descripcion_domicilio='$descripcion_domicilio', telefono='$telefono', num_contrato='$num_contrato', fecha_inicio='$fecha_inicio', hora_inicio='$hora_inicio', fecha_final='$fecha_final', hora_final='$hora_final', cuadrilla='$cuadrilla', estatus='$estatus', observaciones='$observaciones',
        encargado_cuadrilla='$encargado_cuadrilla', otra_descripcion='$otra_descripcion' WHERE id='$id'";
        $resultado = $conexion->prepare($consulta);
        $resultado->execute();

        $consulta = "SELECT * FROM reportes WHERE id='$id' ";
        $resultado = $conexion->prepare($consulta);
        $resultado->execute();
        $data = $resultado->fetchAll(PDO::FETCH_ASSOC);
        break;

    case 3: //Eliminar
        $consulta = "DELETE FROM reportes WHERE id='$id' ";
        $resultado = $conexion->prepare($consulta);
        $resultado->execute();
        break;

    case 4:
        $consulta = "SELECT * FROM reportes";
        $resultado = $conexion->prepare($consulta);
        $resultado->execute();
        $data = $resultado->fetchAll(PDO::FETCH_ASSOC);
        break;
}

print json_encode($data, JSON_UNESCAPED_UNICODE); //envio el array final el formato json a AJAX
$conexion = null;

Esto me muestra al actualizar un registro, tambien quisiera saber si dentro de mi codigo modal utilizar time es adecuado o utilizar timepiacker.

edit

1 respuesta 1

0

Sustituye todo lo del submit por esto:

  $("#formReportes").submit(function(e) {
    e.preventDefault(); //evita el comportambiento normal del submit, es decir, recarga total de la página

    // Obtener el formulario
    var form = $(this)[0];

    // Objeto FormData
    var data = new FormData(form);

    // agregamos la opcion
    data.append("opcion", opcion);

    $.ajax({
      url: "../controlador/reportes.php",
      type: "POST",
      enctype: 'multipart/form-data',
      data: data,
      processData: false,
      contentType: false,      
      success: function(data) {
        console.log(data);
        tablaReportes.ajax.reload(null, false);
      },
    });
    $("#modalCRUD").modal("hide");
  });

Y luego ponles un name= a todos los inputs y selects, y agrega un input para el id, que no está:

<input type="hidden" name="id" id="id" value="">

y finalmente, en el javascript cambia esto:

    otra_descripcion = tablaReportes.row($(this).closest("tr")).data()["otra_descripcion"];
    $("#folio").val(folio);

por esto, pues te olvidastes de mandarlo al formulario también (seguramente porque no tenias el input creado):

    otra_descripcion = tablaReportes.row($(this).closest("tr")).data()["otra_descripcion"];
    $("#id").val(id);
    $("#folio").val(folio);

y con eso ya debería funcionar (y lo hace, pues me lo has confirmado en el chat).

18
  • deje captura en mi pregunta, me manda error de jquery Commented el 10 oct. 2022 a las 19:17
  • He cambiado el datatype: "json", por enctype: 'multipart/form-data', a ver si así superamos este error de jquery... prueba y me cuentas, pero no lo pongas en la pregunta, me pasas un enlace de la imagen con el nuevo error mejor
    – masterguru
    Commented el 10 oct. 2022 a las 19:29
  • Acabo de agregar un par más de líneas (processData y contentType) a ver ahora si.
    – masterguru
    Commented el 10 oct. 2022 a las 19:32
  • Ya no me marca error de jQuery, pero me envía esto. postimg.cc/HV8KPRWJ Commented el 10 oct. 2022 a las 19:39
  • vale, creo que nos falta pasarle la opcion... mira de nuevo mi respuesta donde he agregado un data.append con ella.
    – masterguru
    Commented el 10 oct. 2022 a las 19:43

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.