Tutorial Combos Dependientes

Tutorial Combos Dependientes JSP – AJAX y MySQL

En este tutorial explicare de manera detallada como hacer los famosos 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 más, manos a la obra, tratare de ser s er lo más específica posible. 1. Vamos a necesitar procedimientos almacenados en MySql, son muy sencillos, antes de esto obviamente necesitaremos las dos tablas relacionadas con una llave foránea en mi caso ca so son categorías 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 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 clase_contable.cod_clase _contable = cod_clase; end $$

Teniendo esto pasaremos a NetBeans

Necesitaremos una clase “conexión” para llamar a la base de datos d atos Agregaremos un paquete “conexión” y una clase “conexión”

dicha clase llevara este código package Conexion;

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

Statement instruccion = null;

public boolean Ejecutar (String cad) { try {

Class.forName(DRIVER).newInstance(); Connection conexion = DriverManager.getConnection(U DriverManager.getConnection(URL, RL, USUARIO, CONTRASEÑA); Connection cn = DriverManager.getConnection(URL, DriverManager.getConnection(URL, USUARIO, USUARIO, CONTRASEÑA); PreparedStatement da = conexion.prepareStateme conexion.prepareStatement(cad); nt(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(U DriverManager.getConnection(URL, RL, USUARIO, CONTRASEÑA); instruccion = conexion.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.CONCUR_UPDATABLE); consulta = instruccion.executeQuery(cad);

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

public String Consultar_usu (String cad) { try {

Class.forName(DRIVER).newInstance(); Connection conexion = DriverManager.getConnection(U DriverManager.getConnection(URL, RL, USUARIO, CONTRASEÑA); 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,  javax.swing.JOptionPane.showMessageDialog(null, e.getMessage()); return ""; }

}

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

{ Class.forName("com.mysql.jdbc.Driver").newInstance Class.forName("com.mysql.jdbc.Drive r").newInstance (); c = DriverManager.getConnection(URL, DriverManager.getConnection(URL, USUARIO, CONTRASEÑA); } 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 c lases categoría y subcategoría: 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.CallableStatem com.mysql.jdbc.CallableStatement; ent; 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( c omboSubCategorias(String String Idcategoria){ busquedas B=new busquedas(); return B.buscadorSubcategorias(Idcateg B.buscadorSubcategorias(Idcategoria); oria); } }

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

Las demás páginas y carpetas son de mi proyecto , ustedes no las necesitaran.

El código 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.XMLH ActiveXObject("Msxml2.XMLHTTP"); TTP"); } 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, "ajax_subcategoria.jsp?idcatego ria="+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 código:

<%@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" %> <% llenarcombos combo1 = new llenarcombos(); String idcategoria = null; String idsubcat; String descrip = null;

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

idcategoria = request.getParameter("idcatego request.getParameter("idcategoria"); ria"); B=combo1.comboSubCategorias(idcategoria); out.write(" "); out.write("Seleccione uno "); if(B.size() > 0) { for(int j =0; j
idsubcat =((subcategoria)B.get(j)).g =((subcategoria)B.get(j)).getIdsubcat(); etIdsubcat(); descrip=((subcategoria)B.get(j)).getDescrip(); out.write(""+descrip+" ");

} } out.write("");

%>

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 página debemos importar todos los paquetes, y las páginas 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" %>



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

----Acá pueden instanciar todas sus css y javascript----



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

SeleccioneSeleccione n> <%

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

for(int i=0;i <%=cat.getDescripcion() selected><%=cat.getDes cripcion() %> <% }

%>



Clase Contable*

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