1

Cada vez que le doy al botón para que me cargue el AJAX, me carga la pantalla de inicio con todo (cabecera, menu y footer) aparte de que no me carga los datos de la tabla que pido. Me sale este error en la consola: [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check. He probado a poner el async: true e también el script al final del documento, pero nada.

Estos son los dos archivos: Archivo 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>

Archivo 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>
1
  • Perdón me da un mensaje de advertencia. Acabo de probar tu respuesta y sigue igual. Gracias de antemano por tu tiempo
    – auremanci
    Commented el 18 nov. 2017 a las 19:22

1 respuesta 1

2
  1. Primeramente recomendaría revisar tus bibliotecas, y asegurarte que las mismas están actualizadas.

  2. En segundo lugar, por como llamas a tus métodos que manejan las respuestas Ajax, se nota que tienes código obsoleto. Además, success y error son obsoletos desde jQuery 3, se recomienda usar done y fail. Lo mismo ocurre con document.ready, que es sustituido por function.

Como solución propongo lo siguiente:

  1. Encerrar todo el código jQuery dentro de este bloque:

    $(function() {
    
    //Aquí tu código jQuery
    //function es la opción recomendada, en lugar de document.ready
    
    });
    
  2. Actualizar tus peticiones Ajax:

    • Cambiando type por method

    • Cambiando error por fail

    • Cambiando success por done

    • Quitando cualquier async que tengas

    Las peticiones quedarían así:

             $.ajax({
                data:  valorFecha,
                url:   'pedidos/pfechas.php',
                method:  'post',
                beforeSend: function () {
                    $("#tablaPedido").html("Procesando, espere por favor...");
                },
                fail:function (){
                    $('#errorFecha').removeClass('mistake');
                },
                done:  function (response) {
                    $("#tablaPedido").html(response);
                }
            });
    

Para más detalles sobre el uso de las peticiones Ajax, puedes consultar la documentación actual de jQuery al respecto.

3
  • Gracias por tu comentario, las librerías las tengo totalmente actualizadas. Acabo de probar tu solución y ahora no me da los errores de antes, pero no me carga nada.
    – auremanci
    Commented el 18 nov. 2017 a las 21:09
  • ¿Y la otra parte del código también @auremanci?
    – A. Cedano
    Commented el 18 nov. 2017 a las 21:10
  • Si, lo he puesto a todo. Había quitado el beforeSend y no hacía nada. Pero al volver a ponerlo se queda en esa función y no hace más nada.
    – auremanci
    Commented el 18 nov. 2017 a las 21:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.