94 Cargar Reservas de Citas Medicas con AJAX del Sistema con LARAVEL(PHP-MySql) FullStack
Duración: 20 min
Módulo: 🗓️ Reserva de Citas y FullCalendar
Lección 9 de
14
Descripción
⚡🔄 Lección 94: Carga Dinámica de Reservas con AJAX
Esta lección se enfoca en refactorizar la visualización de los eventos del FullCalendar para que la carga de citas médicas sea dinámica y se filtre según el Doctor seleccionado por el usuario, utilizando AJAX para evitar recargar la página completa.
1. 🎨 Ajuste del Formato de Fecha en FullCalendar
Primero, se corrigió un problema de visualización donde el calendario mostraba la hora duplicada (HH:MM:SS) en la etiqueta del evento.
- El Problema: El campo start de los eventos contenía la hora, pero el title también se generaba con base en el campo title de la base de datos, causando redundancia [00:37].
- La Solución: Se utilizó la librería Carbon dentro del bucle foreach del frontend para parsear y convertir los campos start y end de la base de datos al formato simple YYYY-MM-DD antes de que FullCalendar los procese. Esto logra el diseño original de mostrar solo el título y la fecha [02:13].
2. 👩⚕️ Refactorización de la Vista: Filtrado por Doctor
Se modificó la lógica de filtrado de "Consultorio" a "Doctor", ya que la disponibilidad y la preferencia de reserva es más específica a un médico.
- Nuevo Select: Se reemplazó el select de consultorios por un select que lista los Doctores disponibles [05:38].
- Contenido del Select: El menú ahora muestra el Nombre, Apellido y Especialidad del doctor, utilizando el ID del doctor como valor [07:07].
3. 📡 Implementación de Carga Dinámica con AJAX
Se implementó una petición AJAX para cargar las reservas específicas de un doctor cada vez que el usuario selecciona una opción en el select.
A. Lógica en la Vista (index.blade.php)
- Evento onchange: Una función de JavaScript se activa al seleccionar un doctor (onchange) y captura el ID del doctor [09:14].
- Destrucción y Creación del Calendario: La función elimina la instancia actual de FullCalendar y la vuelve a crear, estableciendo la fuente de eventos (events) como un array vacío inicialmente [10:25].
- Llamada AJAX: Se envía una petición GET a una nueva ruta de Laravel, concatenando el ID del doctor en la URL [12:45].
- Procesamiento de Respuesta: La respuesta esperada es de tipo JSON [15:21]. Si es exitosa, los datos JSON se añaden al calendario como nueva fuente de eventos (calendar.addEventSource(Data)) [15:37].
B. Lógica en el Controlador (AdminController)
- Nueva Función: Se crea la función cargarReservasDoctores para manejar la petición [12:35].
- Consulta Filtrada: El controlador recibe el ID del doctor, consulta el modelo Event utilizando where('doctor_id', $id) para obtener solo las reservas de ese doctor [16:11].
- Respuesta JSON: Se devuelve la colección de eventos directamente como una cadena JSON (Response::json($eventos)) [16:40].
Resultado
Al seleccionar un doctor, el calendario se actualiza instantáneamente, mostrando solo las citas que ese doctor tiene reservadas [17:10]. Esto completa el sistema de visualización de reservas.
Lecciones
⚙️ Inicio y Estructura Base
👤 CRUD de Usuarios y UX Avanzada
Lección 2. 10 Listado de usuarios del controllador a la vista en el SISTEMA (PHP y MySql)FullStack
9 min
Lección 3. 11 Diseño de tabla con BOOTSTRAP en la vista en el SISTEMA (PHP y MySql) FullStack
12 min
Lección 6. 14 Registro y validación de datos para USUARIOS en el SISTEMA (PHP y MySql)FullStack
16 min
👩💼 Módulo de Secretarias
🤒 Gestión de Pacientes
Lección 4. 38 Como llamar desde un seeder a un factory de pacientes en LARAVEL(PHP-MySql) FullStack
14 min
Lección 8. 42 Show Pacientes en el sistema de reservas de citas medicas LARAVEL(PHP-MySql) FullStack
12 min
Lección 9. 43 EDIT Pacientes en el sistema de reservas de citas medicas LARAVEL(PHP-MySql) FullStack
14 min
🏥 Infraestructura: Consultorios y Doctores
⏰ Horarios y Lógica de Disponibilidad
Lección 1. 60 Calendario de Atención de Doctores en el sistema con LARAVEL(PHP-MySql) FullStack
14 min
Lección 10. 69 Plantilla Web para el sistema de reserva de citas con LARAVEL(PHP-MySql) FullStack
13 min
🔑 Seguridad, Roles y Permisos
Lección 6. 76 Identificando el ROL de cada Usuario en el Sistema con LARAVEL(PHP-MySql) FullStack
11 min
Lección 8. 78 Mostrar el Menú según los Roles y Permisos en Sistema con LARAVEL(PHP-MySql) FullStack
7 min
Lección 9. 79 Acceso No Autorizado con Roles y Permisos en Sistema con LARAVEL(PHP-MySql) FullStack
14 min
Lección 12. 82 Cargar Horario en la página principal en Sistema con LARAVEL(PHP-MySql) FullStack
16 min
Lección 13. 83 Redirigir a ADMIN desde Login y Register en Sistema con LARAVEL(PHP-MySql) FullStack
12 min
🗓️ Reserva de Citas y FullCalendar
Lección 2. 87 Formulario para Registrar Citas Medicas del Sistema con LARAVEL(PHP-MySql) FullStack
18 min
Lección 3. 88 Guardar Cita Medica en la Base de Datos de Sistema con LARAVEL(PHP-MySql) FullStack
15 min
Lección 9. 94 Cargar Reservas de Citas Medicas con AJAX del Sistema con LARAVEL(PHP-MySql) FullStack
20 min
📝 Historial Clínico, Configuraciones y Reportes
Lección 17. 116 Modificación del Historial Clínico del Sistema con LARAVEL(PHP-MySql) FullStack
15 min
Lección 19. 118 Reporte Impreso del Historial Clínico del Sistema con LARAVEL(PHP-MySql) FullStack
17 min
Lección 20. 119 Buscar Pacientes del Historial Clínico del Sistema con LARAVEL(PHP-MySql) FullStack
17 min
Lección 21. 120 Buscar Pacientes del Historial Clínico del Sistema con LARAVEL(PHP-MySql) FullStack
12 min
💵 Pagos, Impresión y Cierre
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
