Acceso a multiples tablas (AJAX básico IV)


Antes de continuar unas disculpas por dejar algo abandonado este proyecto, pero ya estamos de vuelta. El modulo lo dejamos en el momento en que presenta la información del producto para que podamos decidir si lo agregamos a no a la lista de compras, así que veamos una imagen de en donde nos quedamos.

Nuestro objetivo en este post es hacer funcionar el botón marcado con «+» que deberá agregar el producto al listado de compra, verificando la existencia de productos, para que no vendamos mas artículos de los que existen.

Tal y como lo vemos en la imagen, este botón llama a la función listado(), cuyo código podemos ver a continuación, para esto es importante que recuerde que hemos creado una tabla que tiene como id «listado».

En el primer bloque de código de la función usamos el método document.getelementbyid para tener acceso a cada uno de los cuadros de texto presentador por el botón de búsqueda, recuerde que una vez que PHP se ejecuta y coloca algo nuevo en alguna capa de nuestra pagina ese nuevo elemento pasa a ser parte de la pagina, por lo que javascript puede acceder a el.

En el siguiente bloque (rojo) usamos la instrucción parseint para convertir a enteros los números almacenados en los cuadros de texto que corresponden a la cantidad de artículos vendidos y la existencia del producto, esto para poder comparar ambas cantidades y validar que no sea posible sobrevender los productos.

Ahora (bloque verde) usamos la variable «t» para tener acceso a la tabla, lo primero sera agregar un nuevo renglón a la tabla, como cada nuevo pedido se agregara al final de la lista usamos el método length para obtener el numero total de lineas de la tabla y después usamos el método insertrow para insertar un nuevo renglón en la linea que obtuvimos de length.

Hasta este punto el renglón esta vacío y no posee ninguna celda, así que necesitamos crear (literalmente) las celdas de la tabla, para ellos usamos las instrucciones de javascript que nos permiten modificar el DOM (Document Object Model)  a través del objeto document podemos crear etiquetas de HTML para añadirlas a la pagina, así que usamos el método createelement para crear una etiqueta td, la variable c1 nos da acceso a ella, así que usaremos su método innerhtml para introducir en dicha celda el valor referente al código del producto.

Dicha acción se repite para crear las demás celdas y colocar sus respectivos valores.

En el bloque naranja usamos el método appendchild para agregar al renglón que insertamos todas las celdas que hemos creado, así de esta manera creamos una lista de artículos comprados.

Ahora debemos agregar a esta función el calculo del subtotal de cada producto que agregamos y el calculo del total general.

Como podemos ver, tomamos el valor del cuadro de texto «pago», lo convertimos a entero con parseint y lo sumamos al subtotal de lo que acabamos de agregar a la lista.

Una ultima modificación producto de las observaciones de los alumnos de esta materia es que se podía modificar el precio directamente en el cuadro de texto y alterar los resultados fácilmente, así que para corregir ese detalle se agrego la sentencia DISABLED en los input que presentan los datos del producto y el folio de la venta.

A continuación les dejo el código fuente y en el próximo post veremos como registrar toda esta información.

http://db.tt/YMAUEyjW

 

14 Comments

  1. buenas noches quisera saber como corregir, si un producto llamado balon tiene 5 existencias, se agregan 4 balones a la factura y debajo se agregan 3 balones mas, el programa lo agrega normalmente, y no decteta el error que ya van 7 balones y la existencia es de 5, hay posibilidad que al agregar 4 balones al campo de existencias disminuya inmediatamente a 1, para que el usuario no agregue mas balones de los que hay. espero pronta respuesta gracias por su colaboración.

    Me gusta

        1. Disculpa la tardanza, pero para tu situación mas viable al problema que plantes es que una vez que se presenten los datos del cliente, se almacenen los datos correspondientes al folio, fecha y rfc del cliente en la tabla de ventas, así con cada venta podras insertar un nuevo dato en la tabla de detalle y actuzalizar la tabla de productos que es donde estan las existencias con todo esto el boton de cobrar ya no haria mas que calcular el pago y el cambio.

          Me gusta

¿Qué estas pensando?

Este sitio utiliza Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.