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">×</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.