I hope you can help me, I'm doing a Crud. With PHP and JS, the problem I have is when editing a record. The values are recovered for me with space, I would like to know how I can recover the values in such a way that they appear correctly, I leave you an image and code of the procedure that I carry out to recover the values.
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
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);
example1.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 () {
opcion = 2; //editar
fila = $(this).closest("tr");
id = parseInt(fila.find("td:eq(0)").text()); //capturo el ID
folio = fila.find("td:eq(1)").text();
nombre = fila.find("td:eq(2)").text();
apellido = fila.find("td:eq(3)").text();
direccion = fila.find("td:eq(4)").text();
descripcion_domicilio = fila.find("td:eq(5)").text();
telefono = fila.find("td:eq(6)").text();
num_contrato = fila.find("td:eq(7)").text();
fecha_inicio = fila.find("td:eq(8)").text();
hora_inicio = fila.find("td:eq(9)").text();
fecha_final = fila.find("td:eq(10)").text();
hora_final = fila.find("td:eq(11)").text();
cuadrilla = fila.find("td:eq(12)").text();
estatus = fila.find("td:eq(13)").text();
observaciones = fila.find("td:eq(14)").text();
encargado_cuadrilla = fila.find("td:eq(15)").text();
otra_descripcion = fila.find("td:eq(16)").text();
$("#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 option:contains(" + cuadrilla + ")").attr("selected", "");
$("#estatus option:contains(" + estatus + ")").attr("selected", "");
//$("#observaciones").val(observaciones);
$("#observaciones").val($("#observaciones").val().trim());
$("#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 () {
example1.row(fila.parents("tr")).remove().draw();
},
});
}
});
});
This section is the HTML code that I use to use my modal form, I really don't know why it appears with spaces, I even thought that my code to retrieve the values in JS was wrong, I even thought that adding something like .trim could solve it, but really I do not know what the error is due to, if it is a problem of my html or my JS, clarifying that in the database they do not have spaces.
<!--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 w-100 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="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">
<label for="hora_incio" class="col-form-label">Hora de Inicio</label>
<input type="time" 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_final" class="col-form-label">Fecha de Finalización</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">
<label for="hora_final" class="col-form-label">Hora de Finalización</label>
<input type="time" class="form-control" id="fecha_final" placeholder="Ingrese una fecha">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="cuadrilla" class="col-form-label">Cuadrilla</label>
<select name="cuadrilla" id="cuadrilla" class="form-control" required>
<option selected>Seleccione una opción</option>
<option value="1">Cuadrilla de Operación Ciudad</option>
<option value="2">Cuadrilla de Operación Mega sistema</option>
<option value="3">Cuadrilla de Drenajes</option>
<option value="4">Cuadrilla de Tomas tapadas</option>
<option value="5">Cuadrilla de Cloración</option>
<option value="6">Cuadrilla de Bacheo</option>
<option value="7">Cuadrilla de Contratos</option>
<option value="8">Otros</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="estatus" class="col-form-label">Estatus</label>
<select name="status" id="estatus" class="form-control" required>
<option selected>eleccione una opción</option>
<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 the code, which I use for my database. I do not know what I am doing incorrectly that they appear with spaces.
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:
$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_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' 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;
The error consists in the FrontEnd part. It was empty space error.
Correct code, which removes the empty spaces for me.