Tutorial Combos Dependientes JSP AJAX y MySQL En este tutorial explicare de manera detallada como hacer los famosos

s combos dependientes tipo Departamento Ciudad con JSP AJAX Y MySql como motor de bases de datos. Para empezar aclaro las herramientas de trabajo: NetBeans 7.1 o superior MySql Workbench GlassFish 3.1.2 (Viene con NetBeans) No siendo ms, manos a la obra, tratare de ser lo ms especfica posible. 1. Vamos a necesitar procedimientos almacenados en MySql, son muy sencillos, antes de esto obviamente necesitaremos las dos tablas relacionadas con una llave fornea en mi caso son categoras y cuentas contables ustedes pueden utilizar cualquier dato :

Tablas create table clase_contable ( cod_clase_contable int primary key auto_increment, nombre varchar(20) );

create table cuenta_contable ( cod_cuenta_contable int primary key auto_increment, nombre varchar(20), cod_clase_contable int );

Las relacionaremos as: alter table cuenta_contable add constraint fk_cuenta_clase_c foreign key (cod_clase_contable) references clase_contable (cod_clase_contable)

Procedimientos delimiter $$ create procedure combo1_clases() begin select cod_clase_contable,nombre from clase_contable; end $$

delimiter $$ create procedure combo2_cuentas(in cod_clase int)

begin select cod_cuenta_contable,cuenta_contable.nombre from cuenta_contable join clase_contable on cuenta_contable.cod_clase_contable = clase_contable.cod_clase_contable where clase_contable.cod_clase_contable = cod_clase; end $$

Teniendo esto pasaremos a NetBeans

Necesitaremos una clase conexin para llamar a la base de datos Agregaremos un paquete conexin y una clase conexin

dicha clase llevara este cdigo package Conexion;

import java.sql.*; /** * * @author ADSI */ public class Conexion { String DRIVER = "com.mysql.jdbc.Driver"; String URL = "jdbc:mysql://localhost:3306/setip"; String USUARIO = "root"; String CONTRASEA = "root"; ResultSet consulta= null;

Statement instruccion = null;

public boolean Ejecutar (String cad) { try {

Class.forName(DRIVER).newInstance(); Connection conexion = DriverManager.getConnection(URL, USUARIO, CONTRASEA); Connection cn = DriverManager.getConnection(URL, USUARIO, CONTRASEA); PreparedStatement da = conexion.prepareStatement(cad); int r=da.executeUpdate(); return true;

catch (Exception e) {

javax.swing.JOptionPane.showMessageDialog(null, e.getMessage()); return false; }

public ResultSet Consultar (String cad) { try {

Class.forName(DRIVER).newInstance(); Connection conexion = DriverManager.getConnection(URL, USUARIO, CONTRASEA); instruccion = conexion.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.CONCUR_UPDATABLE); consulta = instruccion.executeQuery(cad);

return consulta; } catch (Exception e) { javax.swing.JOptionPane.showMessageDialog(null, e.getMessage()); return consulta; } }

public String Consultar_usu (String cad) { try {

Class.forName(DRIVER).newInstance(); Connection conexion = DriverManager.getConnection(URL, USUARIO, CONTRASEA); instruccion = conexion.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.CONCUR_UPDATABLE);

consulta = instruccion.executeQuery(cad); if (consulta.next()) return consulta.getString("tipo"); else return ""; }

catch (Exception e) { javax.swing.JOptionPane.showMessageDialog(null, e.getMessage()); return ""; }

public Connection t_con() { Connection c = null; try

{ Class.forName("com.mysql.jdbc.Driver").newInstance (); c = DriverManager.getConnection(URL, USUARIO, CONTRASEA); } catch(Exception e) {

} return c; }

ESTA CLASE SIRVE PARA TODO TIPO DE OPERACIONES EN LA BASE DE DATOS(CONSULTAR,MODIFICAR,LLAMAR PROCEDIMIENTOS,INSERTAR,ELIMINAR)

Ahora necesitaremos estos paquetes y estas clases

En el paquete Beans las clases categora y subcategora: CLASE CATEGORIA package Beans;

/** * * @author DesarrolloSetip */ public class categoria { private String idcategoria; private String descripcion; public categoria() { }

public String getIdcategoria() { return idcategoria; } public void setIdcategoria(String idcategoria) { this.idcategoria = idcategoria; } public categoria(String descripcion) { this.descripcion = descripcion; } public String getDescripcion() { return descripcion; } public void setDescripcion(String descripcion) { this.descripcion = descripcion; } }

CLASE SUBCATEGORIA package Beans;

/** * * @author DesarrolloSetip */ public class subcategoria { private String idsubcat; private String idcategoria; private String descrip; public subcategoria() { } public String getDescrip() { return descrip; } public void setDescrip(String descrip) { this.descrip = descrip; } public String getIdcategoria() { return idcategoria; } public void setIdcategoria(String idcategoria) {

this.idcategoria = idcategoria; } public String getIdsubcat() { return idsubcat; } public void setIdsubcat(String idsubcat) { this.idsubcat = idsubcat; } }

EN EL PAQUETE DAO, LA CLASE BUSQUEDAS CLASE BUSQUEDAS: package Dao;

import java.util.Vector; import Conexion.Conexion; import Conexion.*; import com.mysql.jdbc.CallableStatement; import java.sql.ResultSet; import java.sql.SQLException;

import Beans.*; /** * * @author DesarrolloSetip */ public class busquedas { public Vector buscadorCategorias() { Vector V=new Vector(); try { Conexion con = new Conexion();

ResultSet rs; rs= con.Consultar("call combo1_clases()"); while(rs.next()){ categoria cat =new categoria(); cat.setIdcategoria(rs.getString(1)); cat.setDescripcion(rs.getString(2)); V.addElement(cat); } } catch (SQLException e) {

System.out.println(e+"error al devolver categoria"); } finally { return V; } }

public Vector buscadorSubcategorias(String Idcategoria) { Vector B=new Vector(); try { Conexion con = new Conexion();

ResultSet rs; rs= con.Consultar("call combo2_cuentas ('"+Idcategoria+"')"); while(rs.next()){ subcategoria subcat =new subcategoria(); subcat.setIdsubcat(rs.getString(1)); subcat.setDescrip(rs.getString(2)); B.addElement(subcat); }

} catch (SQLException e) { System.out.println("error al devolver subcategoria"); } finally { return B; } } }

EN EL PAQUETE Utilitarios, LA CLASE llenarcombos CLASE llenarcombos: package Utilitarios;

import java.util.Vector; import Dao.busquedas;

/** * * @author DesarrolloSetip */

public class llenarcombos { public Vector comboCategorias(){ busquedas B=new busquedas(); return B.buscadorCategorias(); } public Vector comboSubCategorias(String Idcategoria){ busquedas B=new busquedas(); return B.buscadorSubcategorias(Idcategoria); } }

AHORA IREMOS A LA CARPETA WEB Y AGREGAREMOS UN JAVASCRIPT LLAMADO ajax_subcategoria.js

Las dems pginas y carpetas son de mi proyecto , ustedes no las necesitaran.

El cdigo de Ajax_subcategoria.js es el siguiente: function nuevoAjax() { /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por lo que se puede copiar tal como esta aqui */ var xmlhttp=false; try { // Creacion del objeto AJAX para navegadores no IE

xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { // Creacion del objet AJAX para IE xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(E) { if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest(); } } return xmlhttp; }

function getsubcat(idSelectOrigen) {

var ajax=nuevoAjax(); ajax.open("GET", "ajax_subcategoria.jsp?idcategoria="+idSelectOrigen, true); ajax.onreadystatechange=function() { if (ajax.readyState==4) { document.getElementById('cbosubcategoria').parentNode.inn erHTML=ajax.responseText; } } ajax.send(null); }

AHORA PASAREMOS A LA INTERFAZ PARA CARGAR NUESTROS COMBOS, AGREGAMOS UN PAGINA JSP LLAMADA Ajax_subcategoria.jsp con el siguiente cdigo:

<%@page import="java.sql.*"%> <%@page import="javax.print.attribute.standard.DateTimeAtCompleted"%> <%@page import="Logica.administradortipo2" %> <%@page import="java.util.*" %> <%@page import="Beans.categoria" %> <%@page import="Beans.subcategoria" %> <%@page import="Dao.busquedas" %> <%@page import="Utilitarios.llenarcombos" %> <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@page import="java.util.Vector" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <% llenarcombos combo1 = new llenarcombos(); String idcategoria = null; String idsubcat; String descrip = null;

Vector B = new Vector (); subcategoria subcat = new subcategoria();

idcategoria = request.getParameter("idcategoria"); B=combo1.comboSubCategorias(idcategoria); out.write("<select name='cbosubcategoria' id='cbosubcategoria' style='border-radius:10px;background-color: #DEDEDE ; border: solid 1px #060606 ;width : 406px; height :25px;'> "); out.write("<option value='-1'>Seleccione uno</option> "); if(B.size() > 0) { for(int j =0; j<B.size();j++) {

idsubcat =((subcategoria)B.get(j)).getIdsubcat(); descrip=((subcategoria)B.get(j)).getDescrip(); out.write("<option value="+idsubcat+">"+descrip+" </ption> ");

} } out.write("</select>");

%> </html>

AHORA SI PASAREMOS AL PAGINA JSP DONDE MOSTRAREMOS LOS DOS COMBOS ESTA PUEDE SER UN NUEVO JSP O LA PAGNA DONDE LOS NECESITEN EN MI CASO detalles_requisicion.js

En esta pgina debemos importar todos los paquetes, y las pginas Ajax_subcategoria.js y Ajax_subcategoria.jsp al inicio de la pagina de esta manera <%@page import="java.sql.*"%> <%@page import="java.util.*" %> <%@page import="Beans.categoria" %> <%@page import="Beans.subcategoria" %> <%@page import="Dao.busquedas" %> <%@page import="Utilitarios.llenarcombos" %> <%@page contentType="text/html" pageEncoding="UTF-8" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head> <title>su titulo</title> <meta charset="utf-8" /> <script type="text/javascript" src="ajax_subcategoria.js"></script> <script src="http://code.jquery.com/jquery-latest.js"></script>

----Ac pueden instanciar todas sus css y javascript---</head>

y as pondremos nuestros combos, -Pueden quitarle el estilo o cambiarlo-

<select name="cbocategoria" id="cbocategoria" style="borderradius:10px;background-color: #DEDEDE ; border: solid 1px #060606 ;width : 406px; height :25px;" onchange="getsubcat(this.value)"> <option value ="-1" selected>Seleccione</option> <%

llenarcombos combo = new llenarcombos(); String idcat =""; Vector V; categoria cat = null; V= combo.comboCategorias();

for(int i=0;i<V.size();i++){ cat=(categoria) V.elementAt(i); idcat=cat.getIdcategoria(); %> <option value ="<%=idcat%>" selected><%=cat.getDescripcion() %> </option> <% }

%>

</select>

<label for="clase" ><small>Clase Contable* </small></label> </p> <br> <div align="left" id="result_subcategoria"> <select name ="cbosubcategoria" id="cbosubcategoria" style="border-radius:10px;background-color: #DEDEDE ; border: solid 1px #060606 ;width : 406px; height :25px;"> <option value="idcategoria" selected>Elija Primero una Clase <option>

</select> <label for="cbosubcategoria">Cuenta Contable * </label> </div>

Y eso seria todo para nuestros combos dependientes :D espero que les halla servido