55 RESCATANDO DATOS DEL PRODUCTO en el SISTEMA DE VENTAS(PHP y MySql) FullStack
Duración: 13 min
Módulo: 💰 Implementación y Registro del Módulo de Compras
Lección 7 de
17
Descripción
Lección 55: Rescate de Datos del Producto a los Inputs con AJAX 💾🖱️
Este video aborda el paso crucial de usar JavaScript y AJAX/jQuery para transferir automáticamente los datos de un producto seleccionado en el modal de búsqueda a los campos de entrada (inputs) de la vista de registro de compras (create.php).
1. ⚙️ Preparación de la Vista para la Transferencia de Datos
Antes de escribir el script, se realizaron dos preparaciones clave:
- Botón de Selección: El enlace (<a href>) de la columna "Seleccionar" en la tabla del modal se cambió a un elemento <button> [02:30].
- Identificadores Únicos: Se asignaron IDs únicos a los botones de selección y a todos los inputs en la vista principal de create.php.
| Elemento | ID Asignado (Ejemplos) | Propósito |
|---|---|---|
| Botón "Seleccionar" | btn_seleccionar + id_producto | Activa la función de transferencia de datos. |
| Campos de la Compra | id_codigo, id_categoria, id_nombre_producto, etc. | Sirven como destino de los datos seleccionados. |
2. 💻 Script de Transferencia de Datos (AJAX/jQuery)
El instructor añade un bloque de código JavaScript/jQuery en la parte inferior de la vista del modal para manejar la transferencia al hacer clic en el botón "Seleccionar".
A. Identificación y Recuperación de Datos
La función se ejecuta cuando se hace click en cualquier botón que coincida con el patrón btn_seleccionar [04:36]. Dentro de esta función:
- Recuperación del ID: Se obtiene el id_producto del botón en el que se hizo clic.
- Identificación de la Fila: Usando el ID del botón, se identifica la fila (<tr>) a la que pertenece el producto.
- Extracción de Datos: Se recupera el contenido de cada columna de esa fila (como Código, Nombre, Categoría, Stock, etc.) y se asigna a una variable de JavaScript [08:41].
B. Asignación de Datos a los Inputs
Finalmente, se utiliza el método .val() de jQuery para asignar el valor de cada variable de JavaScript al input correspondiente en la vista principal, usando su ID [11:46]:
- Sintaxis de Transferencia: $("#id_destino").val(variable_con_dato);
- Ejemplo: El valor de la variable codigo se asigna al input con el ID id_codigo: $("#id_codigo").val(codigo); [12:15].
De esta manera, al seleccionar un producto, todos sus detalles se cargan automáticamente en el formulario principal para proceder con el registro de la compra (cantidad, precio de compra, etc.).
Lecciones
🚀 Preparación, Login y Sesiones Seguras
Lección 7. 06 Como DESTRUIR SESION DEL USUARIO en el Sistema de Ventas con(PHP y MySql)FullStack
8 min
Lección 9. 08 Adaptando nuestra PLANTILLA para el Sistema de Ventas con (PHP y MySql) FullStack
18 min
👤 CRUD de Usuarios y Roles (Seguridad Lógica)
Lección 2. 10 CRUD - READ lectura de USUARIOS del Sistema de Ventas con (PHP y MySql) FullStack
18 min
Lección 3. 11 Formulario de NUEVO USUARIO en el Sistema de Ventas con (PHP y MySql) FullStack
11 min
📦 Gestión de Productos y Categorías
Lección 1. 26 MÓDULO PRODUCTOS Y CATEGORÍAS en el Sistema de Ventas con (PHPyMySql) FullStack
18 min
Lección 3. 28 CRUD - CATEGORÍAS con MODALS en el Sistema de Ventas con (PHP y MySql) FullStack
20 min
Lección 14. 39 DELETE PRODUCTOS desde el FORMULARIO del Sistema de Ventas con (PHP y MySql)FullStack
12 min
🚚 Módulo de Proveedores y Configuración
Lección 5. 45 ACTUALIZAR PROVEEDORES del Sistema de Ventas con (PHP y MySql) FullStack PARTE 1
14 min
💰 Implementación y Registro del Módulo de Compras
Lección 3. 51 Cargar DATOS DE PRODUCTO en el MODAL del Sistema de Ventas con (PHP y MySql)FullStack
13 min
Lección 5. 53 CARGAR datos del PROVEEDOR en el MODAl en el SISTEMA DE VENTAS(PHP y MySql)FullStack
15 min
🔄 Mantenimiento y Actualización de Compras
Lección 4. 69 MOSTRAR EL DETALLE DE LA COMPRA DEL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 1
13 min
Lección 6. 71 ACTUALIZAR DATOS DE LA COMPRA DEL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 1
15 min
Lección 8. 73 CONTROLLER ACTUALIZAR COMPRA EN EL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 1
9 min
Lección 9. 74 CONTROLLER ACTUALIZAR COMPRA EN EL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 2
9 min
Lección 10. 75 CONTROLLER ACTUALIZAR COMPRA EN EL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 3
8 min
Lección 11. 76 CONTROLLER ACTUALIZAR COMPRA EN EL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 4
5 min
Lección 14. 79 CONTROLLER PARA ELIMINAR COMPRA EN EL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 3
14 min
Lección 15. 80 COMMIT PARA COMPARTIR EL CODIGO FUENTE DEL SISTEMA DE VENTAS (PHPyMySql) FullStack
9 min
💳 Preparación para Ventas y Clientes
Lección 2. 82 Modelo para el CARRITO de VENTAS en el SISTEMA DE VENTAS (PHP y MySql) FullStack
9 min
Lección 5. 85 Formulario de VENTAS y CARRITO en el SISTEMA DE VENTAS (PHP y MySql) FullStack Parte 1
8 min
Lección 6. 86 Contador de VENTAS AUTOMÁTICO en el SISTEMA DE VENTAS (PHP y MySql) FullStack Parte 2
8 min
🛒 Lógica del Carrito y Clientes Dinámicos
Lección 8. 95 CALCULANDO LOS TOTALES del CARRITO en el SISTEMA DE VENTAS (PHP y MySql) FullStack
12 min
Lección 13. 100 CALCULAR el cambio del TOTAL A PAGAR en el SISTEMA DE VENTAS (PHP y MySql) FullStack
8 min
Lección 14. 101 PREPARANDO DATOS para guardar VENTAS en el SISTEMA DE VENTAS (PHP y MySql) FullStack
9 min
Lección 15. 102 Agregar NUEVO CLIENTE en VENTAS en el SISTEMA DE VENTAS (PHP y MySql) FullStack
9 min
🧾 Cierre de Venta y Control de Inventario
Lección 1. 104 GUARDAR VENTA en la tabla VENTAS en el SISTEMA DE VENTAS (PHP y MySql) FullStack
12 min
Lección 2. 105 ACTUALIZANDO STOCK segun el CARRITO en el SISTEMA DE VENTAS (PHP y MySql) FullStack
18 min
Lección 3. 106 ACTUALIZANDO STOCK y GUARDAR VENTA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
17 min
Lección 5. 108 DATOS COMPLETOS DE LA VENTA GUARDADA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
19 min
Lección 6. 109 Acción MOSTRAR datos de la VENTA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
8 min
Lección 7. 110 Acción MOSTRAR datos de la VENTA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
10 min
Lección 8. 111 Acción DELETE datos de la VENTA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
10 min
Lección 12. 115 Controller BORRAR venta y carrito en el SISTEMA DE VENTAS (PHP y MySql) FullStack
13 min
📄 Facturación Profesional (TCPDF) y Dashboard Final
Lección 1. 118 Diseñando el encabezado de la FACTURA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
10 min
Lección 2. 119 Diseñando el encabezado de la FACTURA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
10 min
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
