0

estoy intentando pasar varias variables sacadas de un calendario desde jquery en cuanto se clickea sobre una fecha determinada del calendario. Cuand se clickea arroja la fecha a un input con id="my_hidden_input"

$('#datepicker').on('changeDate', function() {
        $('#my_hidden_input').val(
            $('#datepicker').datepicker('getFormattedDate')
        );
        var fecha = $('#my_hidden_input').val();
        console.log(fecha);
        var dia_fecha = fecha.slice(0,2);
        console.log(dia_fecha);
        var mes_fecha = fecha.slice(3,5);
        console.log(mes_fecha);
        var anyo_fecha = fecha.slice(6,10);
        console.log(anyo_fecha);
        $.ajax({
            beforeSend: function (){
            },
            url: "horarios.php" ,
            type: "post",
            data: {dia_f:dia_fecha, mes_f:mes_fecha, anyo_f: anyo_fecha},
            sucess: function (resp){
                console.log(resp)
            },
            error: function (jqXHR, estado, error){
                console.log(estado);
                console.log(error);
            },
            complete: function (jqXHR, estado){
                console.log(estado);
            },
            timeout: 10000
        });


    });


Luego, para obtener la variable en el archivo horarios.php:

$dia_fech = $_POST['dia_f'];

Me arroja el siguiente error: Notice: Undefined index: dia_f in /home/u743999068/public_html/abm/horarios.php on line 68

En consola me sale lo siguiente:

20/07/2018 20 07 2018 success

Código PHP:

<html lang="es">
<head>
    <meta charset="UTF-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="calendario/css/bootstrap-datepicker.css" rel="stylesheet">
    <link href="calendario/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="calendario/css/less/datepicker.less" rel="stylesheet">
    <link href="calendario/css/build/build.less" rel="stylesheet">
    <title>Mi horario</title>
</head>
<body>
   <div class="container">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#miMenu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="../login-register/index2.php" class="navbar-brand">Bienvenido usuario
                <?php
                    session_start();
                    echo $_SESSION['usr_name'];
                    ?>
                </a>
            </div>      
            <div class="collapse navbar-collapse" id="miMenu">
                <ul class="nav navbar-nav">
                    <li><a href="edit_form2.php">Perfil</a></li> 
                    <li class="active"><a href="horarios.php">Horarios</a></li> 

                    <li><a href="../login-register/logout.php"><span class="label label-danger">CERRAR SESION </span></a></li>                              
                </ul>
            </div>
        </div>
    </nav>
</div>
<div class="container">
<div class="panel panel-default">
    <div class="panel-heading">HORARIO</div>
    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>HORAS</th>                          
                    <th>ACCION</th>             
                </tr>
            </thead>
            <tbody>
                <?php
                     require('conexion.php');
                     $user=$_SESSION['usr_name'];
                     $result=mysqli_query($conexion,"SELECT id_cita FROM citas where nombre_cita='$user'");
                     $cita=mysqli_fetch_array($result);
                     $codcita=$cita['id_cita'];
                     if ($codcita==0){
                        ?>
                            <div class="container">
                                <div id="datepicker" ></div>
                                <input type="hidden" id="my_hidden_input">
                            </div>
                        <?php
                         $dia_fech = $_POST['dia_f'];
                         $result=mysqli_query($conexion,"SELECT * FROM horarios where dia='$dia_fech'");
                         while ($horarios=mysqli_fetch_array($result)){
                             $id=$horarios['id'];                        
                             if ($horarios['Cliente']==null){
                         /*echo "<tr><td id='id:$id' class='cam_editable'>".$horarios['id']."</td>";*/
                         echo "<td id='horas:$id' class='cam_editable'>".$horarios['horas']."</td>";                                            
                         echo"<td id='$id' name='$user' button='true'><button type='button' class='btn btn-success'><span class='glyphicon glyphicon-pencil'></span> Apartar</button></td>";
                         echo"</tr>";
                             }
                         }
                     }else{
                         $result=mysqli_query($conexion,"SELECT * FROM horarios where Cliente='$user'");
                         while ($horarios=mysqli_fetch_array($result)){
                             $id=$horarios['id'];
                             /*echo "<tr><td id='id:$id' class='cam_editable'>".$horarios['id']."</td>";*/
                             echo "<td id='horas:$id' class='cam_editable'>".$horarios['horas']."</td>";

                             echo"<td id='$id' name='$user' button='false'><button type='button' class='btn btn-danger'><span class='glyphicon glyphicon-remove'></span> Cancelar Cita</button></td>";
                             echo"</tr>";
                         }
                     }
                ?>
            </tbody>    

        </table>
    </div>
    </div>
    </div>
<script src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/maincita.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="calendario/js/bootstrap-datepicker.js"></script>
<script src="calendario/locales/bootstrap-datepicker.es.min.js"></script>
<script src="js/calendario.js"></script>

</body>

Un saludo y gracias!

8
  • y los name de ajax no van con comillas?, así data: {'dia_f' :dia_fecha, 'mes_f': mes_fecha, 'anyo_f' : anyo_fecha}, Commented el 3 jul. 2018 a las 20:08
  • @SebastiánLagosYañez debería funcionar sin las comillas, de hecho tengo código así. El problema puede ser esto: beforeSend: function (){ }, quítale esa parte del beforeSend y prueba de nuevo.
    – A. Cedano
    Commented el 3 jul. 2018 a las 20:13
  • @JuanLuisMirasMoreno define el dataType: "text" como otro de los parámetros del ajax para definir el tipo de contenido que mandas. Si puedes poner el PHP para verlo, talvez sea ahí la cuestión
    – Francisco
    Commented el 3 jul. 2018 a las 20:38
  • Acabo de añadir el código PHP completo. Gracias por sus respuestas Commented el 3 jul. 2018 a las 21:14
  • ¿Qué muestra un var_dump($_POST); en tu archivo PHP? También cambia type por method aquí: method: "post", , pues type es para versiones antiguas de jQuery.
    – A. Cedano
    Commented el 3 jul. 2018 a las 21:15

1 respuesta 1

2

Juan Luis, prueba a poner tu petición Ajax así:

    var request = $.ajax({
        url: "horarios.php",
        data: {
            dia_f: dia_fecha,
            mes_f: mes_fecha,
            anyo_f: anyo_fecha
        },
        method: "post",
        timeout: 10000 
    });

    request.done(function(resp) {
        console.log(resp);
    });

    request.fail(function(jqXHR, estado, error) {
        /*Aquí manejas el timeout*/
        if(estado=='timeout'){
            console.log('Ocurrió timeout... hacer lo que requieras');
        }else{
            console.log('Otro tipo de error ocurrió: '+ estado + " " + error);
        }
    });

    request.always(function(jqXHR, textStatus) {
        console.log(textStatus);
    });

Es probable que el timeout te esté dando problemas.

También, success, error, complete son obsoletos desde jQuery 3, por eso los he cambiado por done, fail, always (ver las notas aquí). Los mismo ocurre con type, es para versiones antiguas de jQuery, deberías usar method.


Problema de comprensión sobre el funcionamiento de Ajax

Voy a tratar de explicar aquí brevemente cómo funcionan las peticiones Ajax, dado que veo un grave problema de comprensión en ese sentido y en comentarios es complicado explicarlo.

Lo primero que hay que tener claro ante las peticiones Ajax es que hay dos lados: el lado del cliente y el lado del servidor.

  • En el lado del cliente:
    • tendrás un DOM completo (HTML/PHP/Javascript), con todas las librerías que requieras, con formularios u otros elementos para recoger los datos que el cliente (a través de acciones del usuario) enviará al servidor. Esos datos son los que envías en el parámetro data de la petición Ajax.
    • tendrás también, eventualmente, un contenedor, un div por ejemplo, que actualizarás de forma dinámica mostrando información traída del servidor o mostrando mensajes en base a lo ocurrido en el servidor. Ese contenedor se actualizará desde el bloque done de la petición Ajax.

  • En el lado del servidor:
    • tendrás un archivo que se ejecute en el servidor (por ejemplo horarios.php en tu caso) que se encargará únicamente de recibir la información que envías desde el cliente, la procesará y te devolverá información en base a lo que haya ocurrido.
    • ese archivo no puede ser un DOM completo (HTML/PHP/Javascript), tener librerías, bootstrap, etc, etc, etc. Ese archivo es sólo un archivo utilitario para recibir información desde el cliente, procesar esa información y devolver el resultado en un formato lo más simple posible para que el cliente lo procese de vuelta, mostrando su contenido en un contenedor suyo por ejemplo.

La estructura es la siguiente, explicada de forma simple.

  1. En el cliente:

Tendrás un archivo con todos sus componentes y librerías. Como este, presentado de forma muy básica. Es en este archivo donde está la petición Ajax:

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Archivo del cliente</title>
    
        <!-- Librerías aquí como jQuery, Bootstrap, etc -->
    
        <script>
                /*
                   *... aquí todas las variables que requieras
                   *... y que has tomado de los elementos del DOM  
                   *Y luego, tu petición Ajax
                */

                var request = $.ajax({
                    url: "horarios.php",
                    data: {
                        dia_f: dia_fecha,
                        mes_f: mes_fecha,
                        anyo_f: anyo_fecha
                    },
                    method: "post",
                    dataType: 'json',
                    timeout: 10000 
                });
        
                request.done(function(resp) {
                    console.log(resp);
                    /*
                        *Aquí se muestra en el contenedor info lo que trajo el servidor
                        *Dependiendo de cómo venga la información...
                        *si por ejemplo es solamente un mensaje de información
                        *harías simplemente esto:*
                    */
                    $("#info").html(resp);
                    
                    /*
                        *Si el servidor trae algo más, por ejemplo un JSON con 
                        *una o varias filas de datos
                        *entonces tendrías que parsear ese JSON, 
                        *construir una tabla con él y mostrarla
                        *o bien llenar los elementos de un formulario
                        *con los datos del JSON, etc, etce
                    */                
        
                });
            
                request.fail(function(jqXHR, estado, error) {
                    /*Aquí manejas el timeout*/
                    if(estado=='timeout'){
                        console.log('Ocurrió timeout... hacer lo que requieras');
                        $("#info").html('Ocurrió timeout... hacer lo que requieras');
                    }else{
                        console.log('Otro tipo de error ocurrió: '+ estado + " " + error);
                        $("#info").html('Otro tipo de error ocurrió: '+ estado + " " + error);
                    }
                });
        
                request.always(function(jqXHR, textStatus) {
                    console.log(textStatus);
                });
        </script>
    
    </head>
    <body>    
        <!-- Aquí elementos para recoger datos, como formularios, datepicker o lo que sea -->
    
        <div id="info">
            <!-- MUY IMPORTANTE -->
            <!-- Este es el contenedor que se usará para mostrar las actualizaciones traídas desde el servidor mediante Ajax -->
            
        </div>
    </body>

</html>
  1. En el servidor:

Tendrás un archivo que sólo será un intermediario. Nada de librerías en él, nada de sacar por pantalla otra cosa que lo que el cliente ha pedido. Este archivo debe existir como un puente entre el cliente y el servidor, para traer y llevar datos. El encargado de formatear y presentar los datos es el otro archivo, el que envío la petición.

Es decir, que tu archivo horarios.php tendría una estructura como esta, más o menos:

<?php

    $laFecha=(empty($_POST["dia_f"])) ? NULL : $_POST["dia_f"] ;
    $arrResultado=array();
    if ($laFecha){
        
        /*
            *Lanzar por ejemplo una consulta a la base de datos 
            *usando como criterio $laFecha, 
            *recoger los datos, meterlos en un arreglo
            *y devolverlos
        */
        $datosObtenidos=array("cliente"=>"Pedro", "balance"=>5000); //Este es un resultado imaginario
        $arrResultado=$datosObtenidos;
        
    }else{
        
        $arrResultado["error"]="La fecha no fue enviada en el POST";    
        
    }
    
    echo json_encode($arrResultado);

?>

Lo ÚNICO que ese archivo saca por pantalla es el dato que haya en $arrResultado en forma de un JSON. Ese dato puede ser lo que se haya traído de la base de datos, o un mensaje de error cualquiera.

Si la consulta es exitosa, tú tendrás ese JSON en la variable resp del done de la petición Ajax, deberás entonces parsear esa información y presentarla como quieras en el contendor info del cliente. No importa lo que necesites presentar: una tabla, un formulario, un calendario, un libro completo ... lo que sea, lo que haga falta. Eso debes devolverlo desde el servidor en un formato adecuado y manejarlo en el done.

El archivo PHP sería entonces algo así:

<?php

    $laFecha=(empty($_POST["dia_f"])) ? NULL : $_POST["dia_f"] ;
    $arrResultado=array();
    if ($laFecha){
        
        /*
            *Lanzar por ejemplo una consulta a la base de datos 
            *usando como criterio $laFecha, 
            *recoger los datos, meterlos en un arreglo
            *y devolverlos
        */
        $datosObtenidos=array("cliente"=>"Pedro", "balance"=>5000); //Este es un resultado imaginario
        $arrResultado=$datosObtenidos;
        
    }else{
        
        $arrResultado["error"]="La fecha no fue enviada en el POST";    
        
    }
    
    echo json_encode($arrResultado);

?>

Simplemente, yo uso un operador ternario para verificar si en el POST, hay un elemento llamado dia_f (este es un ejemplo muy básico, no significa que tenga que ser así exactamente). Si dia_f fue posteado entonces lanzo por ejemplo una consulta a la base de datos y pongo los resultados de esa consulta en el array de resultado. Si por el contrario, no fue posteado dia_f, en vez de resultados de la base de datos, pongo un mensaje de error en el array.

Y al final imprimo como un JSON lo que haya ocurrido.

Si has entendido esto, comprenderás que las peticiones Ajax son más simples de lo que puede parecer. Pero si no entiendes esto, no podrás tirar de todas las ventajas que ofrece Ajax.

Espero que ahora me hayas entendido mejor. Si tienes dudas, puedes preguntar en comentarios.

16
  • Me salta un "illegal character" en la linea 34 (que seria el ultimo });​ del código que has compartido). Commented el 3 jul. 2018 a las 21:40
  • Quité ; y ya funciona tu codigo. Pero sigue sin llevarme la variable correctamente. Me da un success en consola, pero me arroja parte del código de horarios.php Commented el 3 jul. 2018 a las 22:00
  • Me suelta todo esto por consola: collabedit.com/p87xe Commented el 3 jul. 2018 a las 22:07
  • Es probable que tengas que hacer ajustes en horarios.php. Si quieres prueba primero simplificando: comenta todo el código en horarios.php y pon solamente un código donde recibas la variable del POST y haces echo de ella. Si funciona entonces debes revisar todo el código PHP y devolver lo que vayas a usar y que recibirás en el donede Ajax.
    – A. Cedano
    Commented el 3 jul. 2018 a las 22:11
  • O crea un archivo PHP muy simple y úsalo en la url de la petición Ajax. Allí solo pruebas si recibe bien los datos. No se por que tienes tanto código ¿*basura*? en horarios.php... Los archivos que se pasan en la URL de Ajax suelen ser archivos intermediarios que reciben/devuelven datos. No se suele usar archivos HTML completos . Ese archivo no debe ser más que un intermediario y suele devolver un JSON que luego lees en el done y lo muestras en el archivo desde el cual se envió la petición Ajax. No sé si me entiendes lo que quiero decir.
    – A. Cedano
    Commented el 3 jul. 2018 a las 22:17

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.