I have a question is that I want to implement ajax to my code is a CRUD in PHP and MySQL(PDO), what happens is that the way I did it I don't know if I can implement it. Here is my first architecture (folder order)
After that I wanted to implement ajax but it doesn't work for me and I really don't know very well how to apply it to my project, I've seen several videos but these have a quite different architecture than mine. Here goes the code.
<?php
include 'model/conexion.php';
$sentencia = $bd->query("SELECT * FROM productos;");
$producto = $sentencia->fetchAll(PDO::FETCH_OBJ);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<form action="controllers/insertar.php" method="post" onsubmit="return validar();">
<div class="form-row">
<div class="form-group col-md-12">
<label for="inputPassword4">Producto</label>
<input class="form-control" type="text" name="producto" id="producto">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputAddress2">Codigo</label>
<input class="form-control" type="text" name="codigo" id="codigo">
</div>
<div class="form-group col-md-4">
<label for="inputAddress2">Valor unidad</label>
<input class="form-control" type="text" name="valor_unidad" id="valor_unidad">
</select>
</div>
<div class="form-group col-md-2">
<label for="inputAddress2">Stock</label>
<input class="form-control" type="text" name="stock" id="stock">
</div>
</div>
<input type="hidden" name="oculto" value="1">
<button type="submit" class="btn btn-primary">Registrar</button>
</form>
</div>
</div>
<hr>
<table id="table" class="display" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Codigo</th>
<th>Producto</th>
<th>Stock</th>
<th>Valor Unidad</th>
<th>Valor total</th>
<th>Opciones</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
foreach ($producto as $dato) {
?>
<tr>
<td><?php echo $i++; ?></td>
<td><?php echo $dato->codigo; ?></td>
<td><?php echo $dato->producto; ?></td>
<td><?php echo $dato->stock; ?></td>
<td><?php echo $dato->valor_unidad; ?></td>
<td><?php echo $dato->stock * $dato->valor_unidad . '$'; ?></td>
<td> <a class="btn btn-success" id="edit" href="editar.php?id=<?php echo $dato->id; ?>">Editar</a>
<a class="btn btn-danger" id="del" href="controllers/eliminar.php?id=<?php echo $dato->id; ?>">Eliminar</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" id="edit" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="ventana"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input class="btn btn-primary" type="submit" value="Editar">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.min.js"></script>
<script src="assets/js/validaciones.js"></script>
<script>
$(document).ready(function() {
var table = $('#table').DataTable({
orderCellsTop: true,
fixedHeader: true
});
});
$(document).on("click", "#del", function(e) {
e.preventDefault();
if (window.confirm("¿Esta seguro de borrarlo?")) {
var del_id = $(this).attr("value");
$.ajax({
url: "controllers/eliminar.php",
type: "get",
data: {
del_id: del_id
},
success: function(data) {
$("#table").html(data);
}
});
} else {
return false;
}
});
</script>
</body>
</html>
As you can see in the part of the script I wanted to implement ajax and load the page without having to restart it, I want to do the same for editing and putting it in a modal but first I want to see how I can make it work in the delete.
This error was solved by calling the jquery correctly since it threw me an error in the javascript.