13 🔄 Select2 + AJAX + Vistas Parciales para Buscar Clientes y Vehiculos - Laravel | Sistema Parqueo
Duración: 43 minDescripción
🔄 Lección 13: Select2 + AJAX + Vistas Parciales para Buscar Clientes y Vehículos | Sistema Parqueo 🚗
Este video se centra en el desarrollo de la funcionalidad de búsqueda de vehículos y clientes dentro del modal de Generación de Tickets, utilizando herramientas avanzadas de frontend y backend como Select2, AJAX y Vistas Parciales en Laravel.
1. Implementación del Buscador de Vehículos (Select2) 🔍
- Preparación de Datos: Se consulta la tabla vehiculos con la relación al modelo cliente (with('cliente')) para tener toda la información disponible [13:40].
- Reemplazo de Input por Select: El campo inicial de búsqueda se sustituye por un elemento <select> que lista la placa del vehículo junto con el nombre del cliente asociado [04:17].
- Integración de Select2:
- Se habilita el plugin Select2 en el proyecto (select2: true en el archivo de configuración) [07:30].
- Se inicializa Select2 en el <select> para añadir la funcionalidad de búsqueda y dropdown mejorado [08:48].
- Configuración para Modal: Se añade el parámetro dropdown-parent (#modal-ticket) para asegurar que el dropdown funcione correctamente dentro del modal [12:08].
- Formato de Opción: El texto de la opción se formatea como Placa + Nombre del Cliente (e.g., AB-123 - Luis Pérez) para facilitar la búsqueda por ambos criterios [15:32].
2. Carga Dinámica de Información (AJAX y Vistas Parciales) 🚀
- Función onChange para Select2: Se implementa una función en jQuery para detectar el evento change (selección) en el Select2 [18:09].
- Obtención del ID: Se captura el vehiculo_ID de la opción seleccionada [20:13].
- Consulta AJAX al Backend:
- Se realiza una petición AJAX de tipo GET a una nueva ruta para enviar el vehiculo_ID sin recargar la página [21:33].
- Ruta Definida: admin/tickets/vehiculo/{id} [26:42].
- Controlador (buscarVehiculo): El controlador busca el vehículo por su ID e incluye la relación con el cliente (Vehiculo::find($id)->with('cliente')) para obtener todos los detalles [30:37].
- Retorno de Vista Parcial: El controlador retorna una vista parcial (buscar-vehiculo.blade.php) que contiene el HTML con el diseño de la información del cliente y el vehículo [32:32].
- Presentación de Resultados (Vistas Parciales): La respuesta AJAX se inserta en un contenedor (#info-vehiculo) dentro del modal [25:05]. Esta vista parcial está dividida en dos columnas utilizando el tamaño de modal modal-xl [39:47] para mostrar:
El siguiente capítulo se enfocará en el proceso final para generar el ticket e instalar una librería para la generación e impresión de documentos PDF [42:44].
