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.
como 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:
Ahora, 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:
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.
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:
detalleProductoDao.java:
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:
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:
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
Ahora solo nos queda adecuar la pagina index.jsp para que pueda hacerse la invocación, mostraremos el codigo segmentado por cuestiones de espacio.
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.
Y 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)
[…] https://nachxs.wordpress.com/2009/03/31/combos-dependientes-con-jsp-ajax-y-postgresql-en-netbeans/ […]
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
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.
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.
¡¡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
Hola de nuevo,
He probado con 3 combos y no soy capaz de montarlos, ¿tienes algún ejemplo? ¿Podrías ayudarme?
Gracias.
Un saludo.
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.
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
Muy wen post!
gracias al ejemplo que hiciste pude hacer lo que necesitaba
Saludos
Alex.
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!
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
Hola … excelente tutorial, muy claro
podrias enviarme el codigo fuente? no pude hacer que se ejecutara la pagina
podrias enviarme el codigo fuente
gracias
rihardgm_20@hotmail.com
Excelente ayuda, me sirvio muchisimo, salvo que mi conexion era a Oracle.
Gracias
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 !!!!!!!!!!
Buen dato amigo de verdad muchas gracias…. saludos desde Peru.
muy bueno y práctico, pero tambien me gustaria aprender con RichFaces talvez podrias publicar un tutorial, muchas gracias Saludos desde Peru.
El ejemplo esta muy bueno pero mi problema es que nececito hacer la consulta a una BD de access.
mi correo es killjaden21@hotmail.com
agradeceria muxo un poco de ayuda……
Es muy bueno lo que ustds hacen de compartir sus conocimientos.
Felicitaciones
podrias enviarme la bd ya que no se que tipo de datos le has dado algunoa campos
gracias
mjaramillom_1@hotmail.com
podrias enviarme el codigo fuente, y la db
mjaramillom_1@hotmail.com
hola,
muchas gracias por el tutorial me sirvio ya que estoy haciendo lo mismo pero en un motor de bd firebird y como usas MVC me fue mucho mas sencillo entender la cosa
😀
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
🙂
podrias enviarme la bd ya que no se que tipo de datos le has dado algunoa campos
por favor mi correo es george_123_6@hotmail.com
esta muy bueno me podeis enviar el codigo
mi correoes griffin_donal@hotmail.com seria muy amable de enviarme el codigo porfasss
Muchas gracias por compartir el conocimiento, me sirvió de mucho. Sigue adelante amigo…
Hola KrOnOsAqP
Gracias a ti por el comentario y por leer el blog.
Saludos.
disculpen podrian subir un ejemplo de ajax + jsp + sql
gracias de antemano
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
Este proyecto funciona en internet explorer???..por q a mi no!!!
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
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?
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
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
TE AMOOOOOOOOOOOOOOOOOOO, gracias por este tutorial.. me has salvado la cola
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
Tyo me has sacado de un problemon!
Gracias !
K dios Te Bendiga!»
TODO ESTO POR UN COMBO DE MIERDAD !?!?!?!!?!?!
[…] Tutorial:Combos dependientes con JSP, Ajax y Postgresql en Netbeans marzo, 2009 39 comentários 4 […]
podrias resubir el codigo por favor o poner los metodos de conexion y desconeccion
espectacular ejemplo, justo lo que estaba buscando. por favor me envias un ejemplo para probarlo?
Mil gracias
Hola, alguien tiene código completo, el link de descarga ya no funciona!!, agradeceria mucho quien me lo pudiera enviar a ivan.martinez@go-sharp.net
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
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
el link ya no funciona
PLISSS.::: RESUBI EL ARCHIVO….
Hola Molinar Pipo, agradezco tu comentario. El archivo ya esta subido nuevamente
Saludos.
Porfa!! podrias subir tu archivo nuevamente!!
Graxias! =)
Hola te agradezco el comentario disculpa que no lo haya subido aun estoy fuera de casa al llegar lo vuelvo subir
Saludos
Hola, esta excelente el ejemplo, podrias subir el proyecto nuevamente, ya que el link esta caido, gracias
Hola dark_macros180, el archivo fue subido nuevamente.
Saludos.
Gracias y felicitaciones por realizar este excelente tutorial.
Saludos.
Gracias a ti por leer el blog
gracias por el ejemplo me ayudo muncho gracias
Me hiciste el dia amigo!!! muchas gracias, excelente aporte, todos los que encontraba eran para PHP
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.
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.
gracias, muy buen tutorial para los que estamos aprendiendo con las nuevas tecnologias como ajax.
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
…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.
Exelente trabajo, 😉
tuve problemas al adaptarlo a eclipse kepler
se tiene que hacer otra cosa ????
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?
Saludos, esta muy bien el tutorial, estoy solucionando un combox en jsp+postgresql pero tengo algunas dudas, podrías pasarme por favor tu proyecto completo te lo agradecería mucho ñ.ñ, mi correo es rocksseri_21@hotmail.com