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 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 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 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 “conexión” para llamar a la base de datos

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/setip";

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(URL,

USUARIO, CONTRASEÑA);

Connection cn = DriverManager.getConnection(URL, USUARIO,

CONTRASEÑA);

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

{




instruccion =

conexion.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,

ResultSet.CONCUR_UPDATABLE);

consulta = instruccion.executeQuery(cad);

return consulta;

}

catch (Exception e)

{


e.getMessage());

return consulta;

}

}

public String Consultar_usu (String cad)

{

try

{




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)

{


e.getMessage());

return "";

}

}

public Connection t_con()

{

Connection c = null;

try

{

Class.forName("com.mysql.jdbc.Driver").newInstance ();

c = 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 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;

/**

*


*/

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.*;

/**

*


*/

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;

/**

*


*/

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 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.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 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" %>

<!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 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" %>

<!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="border-

radius: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

tutorial combos dependientes

Documents