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

 

Anuncios

Acerca de sistemasumma

Blog dedicado a la tecnología y a todos los estudiantes de sistemas, informatica, computación y afines
Esta entrada fue publicada en Lenguajes de aplicaciones y etiquetada , , , . Guarda el enlace permanente.

14 respuestas a Acceso a multiples tablas (AJAX básico IV)

  1. carlos luna dijo:

    Hola me gustaria aportar algo a este post que me ayudo hace algunos años a salir del apuro, hoy lo he mejorado bastante y ya es mas sencillo de utilizar, como puedo mandarte los codigos?

    Me gusta

  2. Anónimo dijo:

    ing. que pena por preguntar tanto, pero le agradeceria que me ayudara con otra parte del codigo, como hago que el boton + al ser oprimido me agregue el subtotal de cada articulo y ademas me agregue el total de toda la factura en la base de datos detalle. gracias es de gran importancia esta pregunta

    Me gusta

  3. Anónimo dijo:

    buenos días ing. como puedo lograr hacer un botón con value menos, para poder quitar lo que agregue con el boton de +

    Me gusta

  4. Anónimo dijo:

    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

    • sistemasumma dijo:

      Al hacer la consulta del producto recupera la existencia actual, guardala en un hidden y al darle clic al boton de + comparas la cantidad con la existencia y si esta incorrecta mandas un alert con el mensaje de error, claro esta que la parte de agregar los datos a la tabla debera quedar del lado del else en la comparacion

      Me gusta

      • Anónimo dijo:

        ingeniero que pena con usted pero no logro entender su respuesta, le agradecería si tuviera un ejemplo gracias

        Me gusta

      • Anónimo dijo:

        ing. necesito ayuda urgente sobre la consultica que le comente en el anterior comentario gracias

        Me gusta

        • sistemasumma dijo:

          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

  5. Anónimo dijo:

    ok gracias ya pude solucionar el problema

    Me gusta

  6. Anónimo dijo:

    buenos dias, necesito urgentemente ayuda con esta parte del codigo, el problema es que al oprimir el boton de + solo agrega a la parte de abajo espacios en blanco, es decir no me esta trayendo los campos de la busqueda de el articulo, gracias

    Me gusta

    • sistemasumma dijo:

      la funcion encargada de esto lo unico que hace es copiar los valores de los input hacia la tabla tal vez el proplema te recomiendo revisar si tienes los id correctos o si no hacen falta los additem, para estar mas segurode tu problema pega en un comentario el codigo de la funcion que agrega datos a la tabla para revisar o mandame tu codigo por correo a sistemaumma@gmail.com

      Me gusta

¿Qué estas pensando?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s