64 Cargar horario con AJAX para la Atención de Doctores con LARAVEL(PHP-MySql) FullStack PARTE 1
Duración: 9 min
Módulo: ⏰ Horarios y Lógica de Disponibilidad
Lección 5 de
11
Descripción
🚀 AJAX Parte 1: Carga Dinámica de Horarios por Consultorio
Esta lección aborda una limitación en la validación de horarios y sienta las bases para una interfaz de usuario más dinámica utilizando AJAX (Asynchronous JavaScript and XML). El objetivo es que el calendario de atención muestre solo los horarios del consultorio seleccionado, ya que los horarios de diferentes consultorios no deberían superponerse.
🐛 1. El Detalle a Corregir en la Validación
Inicialmente, el sistema de validación tiene un error lógico:
- El Problema: Al intentar registrar un horario en un consultorio diferente (Fisioterapia), el sistema aún lanza un error de superposición porque solo estaba validando el día y la hora, ignorando el campo consultorio [00:46].
- La Solución Necesaria: El calendario visible en el formulario de registro (create) debe mostrar solo la información del consultorio que el usuario está a punto de registrar, para que la validación tenga sentido.
🖼️ 2. Preparación de la Interfaz (Vista Index)
Para permitir al usuario filtrar los horarios, se añade un control Select a la vista principal (index):
- Inyección de Datos: La variable con la lista de consultorios ($consultorios) se habilita y se envía desde el controlador a la vista index [03:00].
- Creación del Select: Se crea un campo <select> que contiene los consultorios disponibles. Este campo recibe un identificador (ID) único: consultorio_select [04:36].
⚡ 3. Implementación de la Lógica AJAX con jQuery
Se utiliza JavaScript y jQuery para capturar la selección del usuario y enviar una solicitud al servidor sin recargar la página:
- Evento on.change: Se asocia la función de escucha al evento change del elemento consultorio_select. Esta función se dispara cada vez que el usuario selecciona una nueva opción [05:29].
- Captura del ID: Dentro de la función, se rescata el valor (value) de la opción seleccionada, que corresponde al ID del consultorio (consultorio_id) [06:25].
- Configuración de AJAX: Se configura una solicitud AJAX de tipo GET [08:29].
- URL de la Ruta: Se construye la ruta que será enviada al servidor, incluyendo el ID del consultorio como parámetro: /admin/horarios/consultorios/ + consultorio_id [07:48].
- Manejo del Éxito (Success): La respuesta del servidor (data) se cargará en un nuevo contenedor (<div>) con el ID consultorio_info, reemplazando el calendario actual con el calendario filtrado [08:52].
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! ❤️