Every time I give the button to load the AJAX, I load the start screen with everything (header, menu and footer) apart from not loading the data from the table I request. I get this error in the console: [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check. I tried to put the async: true e also the script at the end of the document, but nothing.
These are the two files: File Index.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Sistema de Administración de Envíos - Pedidos</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/main.js"></script>
<script src="js/jquery.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/popper.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<?php
require('components/menu.php');
?>
<div class="main">
<div id="top-pedidos">
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon"><button id="buttonFechaPedido" type="submit"><i class="fa fa-calendar"></i></button></div>
<input type="date" class="form-control" id="inputFechaPedido" name="fecha">
</div>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon"><button id="buttonNumeroPedido"><i class="fa fa-search"></i></button></div>
<input type="text" class="form-control" id="inputNumeroPedido" name="npedido" placeholder="Nº pedido">
</div>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon"><button id="buttonEstadoPedido"><i class="fa fa-check-square"></i></button></div>
<select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inputEstadoPedido" name="estado">
<option value="vacio" selected></option>
<option value="Pendiente">Pendiente</option>
<option value="Aceptado">Aceptado</option>
<option value="Rechazado">Rechazado</option>
</select>
</div>
<a href="nuevo-pedido.php"><button class="newPedido btn btn-primary">Nuevo Pedido</button></a>
</div>
<div class="tables">
<?php
require('sql/sql-pedidos.php');
?>
<div id="tablaPedido">
<p id="emptyFecha" class="mistake red">Debes poner una fecha</p>
<p id="errorFecha" class="mistake red">Ha ocurrido un error con la fecha</p>
<p id="emptyNumero" class="mistake red">Debes poner un número de pedido</p>
<p id="errorNumero" class="mistake red">Ha ocurrido un error con el número de pedido</p>
<p id="emptyEstado" class="mistake red">Debes seleccionar un estado</p>
<p id="errorEstado" class="mistake red">Ha ocurrido un error con el estado</p>
</div>
</div>
</div>
<?php
require('components/footer.php');
?>
</body>
</html>
File 2
<?php
//Tabla inicial sin parámetros de búsqueda
require('conexionbd.php');
$general = 'SELECT * FROM pedidos';
$result = mysql_query($general) or die('Consulta fallida: ' . mysql_error());
echo "<table class='table table-striped table-pedidos-g'>\n";
echo "<tr class='superior'>
<td>Nº pedido</td>
<td>Fecha</td>
<td>Descuento</td>
<td>Cliente</td>
<td>Estado</td>
</tr>";
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo "\t<tr>\n";
foreach ($line as $col_value) {
echo "\t\t<td>$col_value</td>\n";
}
echo "\t</tr>\n";
}
echo "</table>\n";
?>
<script>
$('#buttonFechaPedido').click(function() {
$('.table-pedidos-g').hide();
$('.table-pedidos-n').hide();
$('.table-pedidos-e').hide();
var valorFecha = $('#inputFechaPedido').val();
if (valorFecha.length == 0){
$('#emptyFecha').removeClass('mistake');
}
else{
$.ajax({
data: valorFecha,
url: 'pedidos/pfechas.php',
type: 'post',
beforeSend: function () {
$("#tablaPedido").html("Procesando, espere por favor...");
},
error:function (){
$('#errorFecha').removeClass('mistake');
},
success: function (response) {
$("#tablaPedido").html(response);
}
});
}
});
</script>
<script>
$('#buttonNumeroPedido').click(function() {
$('.table-pedidos-g').hide();
$('.table-pedidos-f').hide();
$('.table-pedidos-e').hide();
var valorNumero =$('#inputNumeroPedido').val();
if (valorNumero.length == 0){
$('#emptyNumero').removeClass('mistake');
}
else{
$.ajax({
data: valorNumero,
url: 'pedidos/pnumero.php',
type: 'post',
beforeSend: function () {
$("#tablaPedido").html("Procesando, espere por favor...");
},
error:function (){
$('#errorNumero').removeClass('mistake');
},
success: function (response) {
$("#tablaPedido").html(response);
}
});
}
});
</script>
<script>
$('#buttonEstadoPedido').click(function() {
$('.table-pedidos-g').hide();
$('.table-pedidos-n').hide();
$('.table-pedidos-f').hide();
var valorEstado =$('#inputEstadoPedido').val();
if (valorEstado == 'vacio'){
$('#emptyEstado').removeClass('mistake');
}
else{
$.ajax({
data: valorEstado,
url: 'pedidos/pestado.php',
type: 'post',
beforeSend: function () {
$("#tablaPedido").html("Procesando, espere por favor...");
},
error:function (){
$('#errorEstado').removeClass('mistake');
},
success: function (response) {
$("#tablaPedido").html(response);
}
});
}
});
</script>