I hope you can guide me to know what I'm doing wrong, When trying to update a record, the changes are not reflected. I share the code, as I have it structured. I am working with AJAX, Datatable and 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>
This is my JS code where I carry out the procedures to save, update and delete, but I don't understand what I am doing wrong that is not saving the updated data, I use a consol.log to view the data, but the data appears empty.
$(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();
},
});
}
});
});
This is my code where I make the queries to my database, sending the requests by 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;
This shows me when updating a record, I would also like to know if within my modal code using time is appropriate or using timepiacker.