30 CRUD - UPDATE CATEGOR脥AS con MODALS en el Sistema de Ventas con (PHP y MySql) FullStack
Duraci贸n: 21 minDescripci贸n
Lecci贸n 30: CRUD - Actualizaci贸n de Categor铆as con Modales y AJAX 馃攧
Este video se centra en la implementaci贸n de la funcionalidad de Actualizaci贸n (Update) para las categor铆as, completando as铆 las operaciones b谩sicas de la gesti贸n del m贸dulo de categor铆as.
1. 馃帹 Implementaci贸n del Modal de Actualizaci贸n
Se modifica el listado de categor铆as para incorporar la acci贸n de edici贸n a trav茅s de una ventana modal:
- Bot贸n de Edici贸n: Se reemplaza el bot贸n de edici贸n tradicional por uno que activa un nuevo modal llamado modal_update [01:48].
- Dise帽o del Modal: Se copia el c贸digo del modal de creaci贸n, se le cambia el t铆tulo a "Actualizaci贸n de la Categor铆a", y se le aplica un estilo CSS diferente (color verde) para distinguirlo del modal de creaci贸n (azul) [04:09].
- Formulario: El formulario del modal de actualizaci贸n incluye un campo de texto para el nombre de la categor铆a y un bot贸n de "Actualizar" con el ID btn_update [04:31].
2. 馃啍 Identificaci贸n Din谩mica de Elementos (ID 脷nicos)
El punto m谩s importante es asegurar que cada bot贸n y modal sea 煤nico dentro del bucle foreach que lista las categor铆as. Esto se logra concatenando el ID de la Categor铆a (id_categoria) al nombre del elemento:
- Modal 脷nico: El ID del modal se define como modal_update + id_categoria (ej. modal_update3) [08:21].
- Bot贸n 脷nico: El data-target del bot贸n de edici贸n se configura de manera similar para que coincida con el ID 煤nico del modal [09:09].
- Input y Script 脷nicos: El input del formulario y la funci贸n de JavaScript/jQuery tambi茅n deben ser 煤nicos (ej. nombre_categoria3, btn_update3) para que la l贸gica de AJAX sepa exactamente qu茅 elemento modificar y qu茅 bot贸n ha sido presionado [10:46].
3. 馃捑 L贸gica de Actualizaci贸n con AJAX
La actualizaci贸n se realiza de forma as铆ncrona, siguiendo la misma l贸gica del registro:
- Captura de Clic: La funci贸n de jQuery captura el evento click del bot贸n btn_update (con su ID 煤nico) [11:13].
- Obtenci贸n de Par谩metros: Se leen dos valores esenciales:
- Llamada AJAX: Se utiliza AJAX para enviar estos dos par谩metros al nuevo controlador [14:41].
- Controlador PHP: Se crea el controlador update_de_categorias.php [14:26], el cual recibe el nuevo nombre y el ID de la categor铆a, y ejecuta la sentencia SQL UPDATE categorias SET nombre_categoria = ?, fecha_hora_update = ? WHERE id_categoria = ? [17:58].
Al completar la operaci贸n, el controlador redirecciona forzadamente la p谩gina para que el listado se refresque y muestre el nombre de la categor铆a actualizado [18:40].
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, 隆ap贸yanos con una donaci贸n!
Donar por Airtm Donar por Binance隆Gracias por tu apoyo! 鉂わ笍