Tutorial:Combos dependientes con JSP, Ajax y Postgresql en Netbeans


Hola otra vez por aqui retomando el blog despues de un largo receso, como comprenderan con la familia y el trabajo se nos hace dificil a veces publicar algun post, pero bueno manos a la obra.

Este post es ha solicitud de unos compañeros que estan aprendiendo a trabajar con jsp, ajax y postgresql y necesitaban alguna guía práctica para trabajar la parte del llenado de combos de forma dependiente justamente utilizando ajax y obteniendo la data desde una base de datos.

Bueno, lo primero que debemos tener en cuenta es la estructura de tablas en la base de datos desde donde obtendremos la informacion. Para este ejemplo tome como ejemplo la siguiente estructura.

tablascomo podemos observar la base de datos se llama bd_tutorial y las tablas serian productos y detalle_producto respectivamente.

Una vez creado las tablas, ahora lo que hacemos es crear nuestro proyecto web al cual llamaremos webapp_ajaxDemo y comenzar armar nuestra estructura de archivos jsp, javascript y clases java, las cuales accederan a la informacion de la base de datos. Creamos el proyecto y generamos la siguiente estructura propuesta:

proyectoAhora, lo que haremos sera ver como obtener la informacion de la base de datos, para esto vamos a trabajar nuestras clases java empezando por los beans en donde almacenaremos la informacion  y terminando por las clases  DAO , las cuales seran las que recogeran la informacion de la base de datos.  Lo primero es tener la estructura de los archivos productoBean.java y detalleProductoBean.java, mas o menos seria la siguiente:

producto1

detalleproducto

Una vez detallada la clases Bean, ahora nos enfocamos en las clase BO y DAO, yo siempre hago esta distribucion para tener en cuenta el manejo de capas, esto ayuda mucho. Ahora veremos la estructura de la clase productoBo.java, aqui es donde definiremos los metodos que tendran acceso a los métodos de las clase DAO.

productobo

Los métodos que usaremos getProducto y getDetalleProducto los cuales nos devuelven como resultado un ArrayList de Beans esto con la finalidad de poder tener toda la informacion y poder seleccionar lo necesario. Ademas hacen referencia a métodos de las clases DAO la cuales ya tenemos definidas.

Ahora, veremos las estructuras y codificacion de las clases  que obtienen la información de la BD productoDao.java y detalleProductoDao.java respectivamente:

Para las clases productoDao.java y detalleProductoDao.java, por cuestiones de espacio solo estoy mostrando los métodos que acceden a la información, se asume que ustedes ya tienen definido los métodos de conexion y desconexion respectivamente.

productoDao.java:

productodao

detalleProductoDao.java:

detalleproductodao

Una vez ya completada la estructura y codificacion de las clases java, ahora pasaremos a codificar las paginas JSP, lo primero que haremos sera mostrar el primer combo que serian los productos, para esto mostraremos una parte de la codigo del archivo index.jsp la cual sufrira alguna moficiacion mas adelante, por el momento tenemos lo siguiente:

 

combo_1

Fijemos en los recuadros de color rojo, en el primer recuadro lo que hago es importar la clase productoBo y productoBean, dado que en el primero se tiene el metodo que obtendria la informacion de los productos, y en el segundo recuadro es donde muestro los productos los cuales son almacenados en beans del tipo productoBean por eso la declaracion en el primer recuadro.

Deben tener en cuenta que en la linea de código en donde muestro el detalle del producto en la opcion value el combo se esta poniendo el id del producto, esto para que cuando mandemos el producto se tome el id para poder realizar la busqueda en el detalle y no el nombre del producto.

Ahora veremos la parte de AJAX, para esto tenemos un archivo javascript ajax_producto.js en el cual tendremos el siguiente código:

ajax_producto1

Vemos que estamos declarando la funcion getDetalleProducto al cual le estamos enviando como parametro id_pro, luego en la parte mas abajo vemos que hacemos la referencia a la pagina ajax_detalleProducto.jsp, que en la que recuperaremos la informacion de la tabla de detalles enviando como parametro el id_pro y ademas un identificador para hacer refresco a nuestras busquedas, esto por un problema en algunos navegadores con el manejo de su cache. Y la funcion resultado_detalle que es donde le indicamos donde mostrarnos el resultado.

Fijarse bien en esto ultimo ya que como veran estamos utilizando el identificador del elemento en donde pondremos el resultado que para este caso es result_detalle.

una vez terminado esto lo que haremos sera codificar la pagina que obtendra la informacion del detalle de producto, que en este caso es ajax_detalleProducto.jsp

detalle_ajax

Ahora solo nos queda adecuar la pagina index.jsp para que pueda hacerse la invocación, mostraremos el codigo segmentado por cuestiones de espacio.

index_1

En este primer segmento, podemos ver que aqui se hace la llamada a la libreria javascript ajax_producto.js la cual contiene a la función getDetalleProducto, fijense en el evento onchange del combo, alli es donde llamamos a la funcion que retornaria la informacion del detalle.

Ahora para el segundo segmento vemos el id=”result_detalle” que es el identificador que se utiliza para mostrar el combo con el detalle.

index_2Y practicamente esto seria todo. Se debe tener en cuenta que esto se hizo de forma rápida solo para cuestiones de enseñanza, esto se puede mejorar notablemente tal vez utilizando algun framework como jQuery o mejorando el código propuesto. Espero les sea de utilidad para algunos que recien empiezan con esto

PD: Los errores ortográficos son aproposito.

Descarga el ejemplo: webapp_ajaxDemo (Ejemplo modificado para trabajar con 3 combos)

Anuncios

65 thoughts on “Tutorial:Combos dependientes con JSP, Ajax y Postgresql en Netbeans

  1. El tutorial es muy bueno pero si es que van ayudar es mejor que lo hagan bien porque no tambien poner el proyecto en un archivo comprimido para poder bajarlo, como va a decir

    PD: Los errores ortográficos son aproposito

    esto puede ocacionar confuncion ya que a la hora de “provar” el “tutorial”

    si van ayudar que lo hagan bien y si no mejor no hacerlo

  2. Hola aprendiz, bueno tomare en cuenta lo que dices de colocar el archivo comprimido en un servidor hosting para que puedan descargarlo, ya que no cuento con uno propio.

    Con respecto al PD no entiendo en que te pueda confundir, yo siempre coloco esta frase porque considero que los usuarios que leen el tutorial ven el fondo de la información y a veces se nos pasa una que otra palabra(s) a la que le falte talvez una tilde o este mal escrita.

    Ahora cuando dices “si van ayudar que lo hagan bien y si no mejor no hacerlo”, yo te pregunto a ti, te ayudo el tutorial??
    Si fuera asi, no es mas facil decir “bueno gracias por la ayuda, pero te aconsejo que mejores tu ortografia”.

    El unico consejo que puedo dar, es que debes aprender a valorar el esfuerzo y tiempo que se toman las personas para poder trasmitir conocimiento sobre un tema a los que no lo tienen o lo necesitan.

    De todos modos agradezco tu tiempo para leer el blog.

    Saludos.

  3. Buen Dia, Me gusto mucho el tutorial, me parece que tiene las cosas esenciales que se necesitan para aprender a manejar JSP, sin embargo para los que somos nuevos en el tema nos quedan dudas y no se si fuese posible que se publicara el codigo fuente de esta actividad, con el fin de realizar una comparacion con lo que realicem haber en donde cometi el error ya que no logre hacer funcionar la pagina.

    Gracias

    • Hola Camilo, si claro de todas maneras estoy planeando subir estos ejemplos a un hosting, como menciones en un comentario anterior no dispongo de uno propio, pero en todo caso te estoy enviando el ejemplo a tu correo para que lo puedas revisar.

      Saludos.

  4. ¡¡Muchísimos millones de gracias!! Estaba buscando exactamente un ejemplo como este (siempre los encontraba con php), lo único que he tenido que cambiar es la base de datos (a MySQL) y ahora me pelearé para hacer 7 combos dependientes. Gracias de nuevo por el tutorial tan claro y por poder descargar el proyecto para netbeans.

    Saludos

  5. Hola de nuevo,

    He probado con 3 combos y no soy capaz de montarlos, ¿tienes algún ejemplo? ¿Podrías ayudarme?

    Gracias.

    Un saludo.

  6. Que tal, muy interesante el ejemplo, lo mejor de todo es que lo tienes en jsp casi no hay referencias del mismo; te agradezco mucho me ayudes con el código del ejemplo ya que el link no se encuentra disponible.

    Saludos,

    GTOMALA.
    GYQ. – ECU.

  7. Hola, muy bueno el tutorial, pero si creo necesitamos el proyecto porque hay cosas que no me quedan claras, soy nueva en esto y la verdad te agradeceria muchisimo si me envia la informaciona mi e-mail, porq en definitiva la estoy necesitando, necesito realizar un proyecto utilizando estas herramientas pero no son mi fuerte y me toca empaparme del tema y este tipo de tutoriales me ayudan muchisimo,, muchas gracias por dedicar parte de tu tiempo en esto… porfis espero recibir noticias suyas.

    P.D. Cualquier tipo de ejemplo que tenga que ver con estas herramientas sera muy bien recibido y aprovechado… Millon gracias por su tiempo.. Buen Dia..

    Saludos

    Fernanda

  8. Amigo muchas gracias por el tutorial la verdad me ayudaste bastante .solo me falta adecuarlo a struts 1.3 ,pero eso no es problema ya lo hare!.. me gustaria que postees un tutorial de ajax para validar campos de textos si puedes… de antemano muchas gracias ..te pasaste!!…..chau cuidate!

  9. holasmuy bueno, pero en vez de llenar un cmbo quiero llenar una tabla si tuviera un ejemoplo o un blog seria brabazo y si puedes mandarme este tutorial por mi correo mejro aun mil gracias toy que me peleo con este con mi codigo y no me sale.

    a veces las cosas mas sencillas son las mas complejas….

    mi correo es malpicar.wd@gmail.com ó
    wdmalpica@hotmail.com

  10. A pesar que hay quienes no agradecen, si habemos otros que apreciamos el esfuerzo que hacen personas como usted. Por un malagradecido habemos miles que sí apreciamos.

    Muchas gracias no sabe de que apuro me sacó despues de tanto buscar.

    Mil Gracias !!!!!!!!!!

  11. muy bueno y práctico, pero tambien me gustaria aprender con RichFaces talvez podrias publicar un tutorial, muchas gracias Saludos desde Peru.

  12. Hola ,en verdad esta tecnologia es muy interesante es por ello q’ agradesco tu voluntad de compartir esto con los q recien ingresamos a esto

    Te agradesco desde ya si la aplicacion del tutorial me lo podrias reenviar a mi correo: maekol_22@hotmail.com
    🙂

  13. Se agradece mucho tu apoyo para con los demás que recién se inician en Java…Te deseo los mejores de los éxitos y gracias por este manual que en verdad me sirvió de mucho…
    Si no sería molestia de que puedas enviar el codigo fuente de dicho ejemplo
    jdugcrema@hotmail.com
    Gracias
    Saludos

  14. Buenas, primero que nada gracias por el tutorial. Ahora una crítica constructiva:
    Deberían mejorar el código, viendo los DAOs: los finally no deberían lanzar nunca una exception, deberían ejecutarse de forma ‘limpia’
    Saludos y nuevamente gracias

  15. esta muy bueno esta ayuda que pones…
    pro me podrian ayudar ya que descargue esto y a la hora de correrlo no me sale ningun valor, si cree la base de datos, agregue mis datos en el dao.
    alguna idea?

  16. Hola muy bueno tu tutorial pero no entiendo algunas cosas soy novata con java pero necesito aprender ya q mi proyecto necesito utilizar netbeans struts y portgres me quedo algunas dudas y no puedo bajarme el codigo de donde indicas porfa necesito ayuda y muchisisisimas gracias por tu ayuda mi correo es corivilla79@hotmail.com y si fuera posible pedirte ayuda confirmame

  17. Hola nuevamente no he recibido tu ayuda pero porfin pude bajarme tu ejemplo ahora manos a la obra para enterder tu programacion, quisiera hacerte una pregunta tu utilizas struts osea hay el formbean y el action pero no tienes configurado el struts-config.xml ahi es donde me confundi espero q me puedas ayudar para entender a esta herramienta q quiero aprender un abrasote por el tutorial

  18. El tutorial, esta chevere…
    Algo mencionaste sobre la programación en 3 capas, seria bueno poder tener un blog igual a este sobre la arquitectura de 3 capas….

    saludos

  19. Hola, Muy Buen Post.
    Interesante Lo Que Haces, Justamente Adelanto Un Proyecto Jsp + MySql En Netbeans Relacionado Con Consultas A BD, Y Me Encuentro En El Dilema De Los Combos Dependientes: Que Dependiendo De La Opción Que Escoja En EL “Selector1” Automaticamente Se Haga Una Consulta A La BD Y Me Cargue Los Datos Obtenidos En EL “Selector2”, Al Parecer Investigando Un Poco Con JavasCript No Se Puede Hacer Las Consultas Y La Mejor Opcion Es Ajax 🙂
    Pero No Tengo Mucho Conocimiento Sobre El Manejo De Ajax.
    Justamente Al Ver Tu Post Se Deja Evidente Lo Intuitivo Que Es El Manejo De Ajax.
    Mas Sin Embargo Te Agradeceria Me Facilitaras Una Copia Del Proyecto Como Guia Para El Mio.
    Gracias Y Buen Dia —> n_n

  20. HOLA ME PRODRIAN AYUDAR A CARGAR DOS COMBOX BUENO
    EL PROBLEMA ES QUE EN EL PRIMER COMBOX LO QUERIO CARGAR DE LA CONSULTA DE LOS ALUMNOS DE UNA ESCUELA Y AL DARLE CLICK A “X” ALUMNO ME CARGUE SUS RESPECTIVA MATERIA ME PODRIAN DECIR KE METODOS O KE EVENTOS TENGO KE USAR ESPERARE SUS RESPUESTAS GRAX

  21. Hola nachxs para empezar muchas gracias por tu blog, entro frecuentemente a ver cosas que me ahcen falta, ahora te hago una consulta, como se aria para implementar lo de los combos anidados pero con struts 2 y jquery, osea no entiendo como llamar un action para cargar el segundo combo a aprtir de la eleccion del primero, espero me puedas dar una mano muchas gracias.

  22. por favor me pueden ayudar como puedo crear un combobox dinamico en JSP, pero que me llene datos desde una BD gracias necesito urgente muchas gracias por la respuesta.

  23. de antemano agradezco la infromacion brindada…estoy aprendiendo…….me gusta mucha esta metodologia de pregramacion…sin embargo…estoy tratando de adaptarlo a otra base de datos con esemismo tipo de campos en bd…pero no me esta corriendo….no se cual sea el problema …no me arroja ningun tipo de error …pero no me muestra nada en los combobox….he creado tres tablas con esos mismos nombres de campos, pero no me fun ciona ….que podar ser?
    … gracias

  24. …hola de nuevo…media hora despues encontre mi error,…tuve que cambiar el nombre a la s tablas , tube que quitar ese “public.” del nombre de las tablas …estoy trabajando con sql server, y no se porque pero no me reconocia ese nombre…no se conectaba con las tablas…se me ocurrio quitarle ese public. y ahora si funciona el programa….solo me resta agradecerle mucho…..entre todos aprenderemos y avanzaremos para que este mundo funcione cada vez mejor.

  25. tengo una duda, si tengo que hacer ‘n’ (donde n es un numero cualquiera) combobox dependientes, debo crear n clases jsp, me explico mejor, en tu ejemplo usas 3 combobox, si quisiera agregar un combobox mas que se llame “mucho mas detalle del detalle” debería crear un nuevo jsp que se llame ajax_mucho_mas_detalle_del_detalle?

Responder

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