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].