Foros del Web - (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

Foros del Web (http://www.forosdelweb.com/)

- Java (http://www.forosdelweb.com/f45/)

- - (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX (http://www.forosdelweb.com/f45/2-listados-desplegadles-combos-dependientes-solucion-jsp-ajax-562457/)

(2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

Que tal amigos, adjunto algo que me llevo un tiempo realizarlo Listados desplegadles (o combos) dependientes.
La información original la tome de http://www.webintenta.com/combos-dependientes-ii.html realizados en PHP, pero que la adecue para jsp

En este caso, ocupe Ajax-jsp-oracle y lo realice en Netbeans.

Primero creamos una JSP llamada por ejemplo "calificadores.jsp" y copia este código:

Código:

<script type="text/javascript">

var peticion = false;

var  testPasado = false;

try 

{

        peticion = new XMLHttpRequest();

    }

    catch (trymicrosoft) 

    {

    try

    {

        peticion = new ActiveXObject("Msxml2.XMLHTTP");

    } 

    catch (othermicrosoft) 

    {

        try 

        {

            peticion = new ActiveXObject("Microsoft.XMLHTTP");

        } 

        catch (failed) 

        {

        peticion = false;

        }

    }

}
 

if (!peticion)

alert("ERROR AL INICIALIZAR!");

 

function cargarCombo (url, comboAnterior, element_id) 

{

    //Obtenemos el contenido del div

    //donde se cargaran los resultados

    var element =  document.getElementById(element_id);

    //Obtenemos el valor seleccionado del combo anterior

    var valordepende = document.getElementById(comboAnterior)

    var x = valordepende.value

    //construimos la url definitiva

    //pasando como parametro el valor seleccionado

    var fragment_url = url+'?id_calificador='+ x ;

    element.innerHTML = '<img src="imagenes/loading.gif" />'; //opcional

    //abrimos la url

    peticion.open("GET", fragment_url); 

    peticion.onreadystatechange = function() 

    {

        if (peticion.readyState == 4) 

        {

            //escribimos la respuesta

            element.innerHTML = peticion.responseText;

        } 

    } 

   peticion.send(null); 

} 

</script>
 

<span class="Estilo5"><select name="calificador" 

    onchange="javascript:cargarCombo('subcalificador.jsp', 'calificador', 'div_subcalificador')" id="calificador">

</span>

    

<%

    Connection conex = support.ini.Conexion.getConexion();

    ResultSet rs = null;

    Statement st = conex.createStatement();

    try

    {

        String query =("select * from calificador order by id_calificador");

        rs = st.executeQuery(query);

        while (rs.next())

        {

            out.println("<option value='" + rs.getString("id_calificador") + "'>"+rs.getString("calificador")+"</option>");

        }

    }

    catch (Exception e)

    {

        e.printStackTrace();

    }

   st.close();

   rs.close();

%>

</select>
 

<div id="div_subcalificador">

Segundo, creamos una pagina llamada "subcalificador.jsp"...y bueno, copia el codigo.

Código:

<%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>

<%@page import = "java.sql.Connection"%>

<%@page import = "java.sql.DriverManager"%> 

<%@page import = "java.sql.ResultSet"%>

<%@page import = "java.sql.Statement"%>

<%@page import = "oracle.jdbc.driver.*"%>
 

<html>

<body>
 

<%

String id_calificador =  request.getParameter("id_calificador").toString();

%>
 

<select name="subcalificador"  id="subcalificador" class="select">
 

<%  

   Connection conex = support.ini.Conexion.getConexion();

   ResultSet rs1 = null;

   Statement st1 = conex.createStatement();

    try

    {

        String query1 =("select * from subcalificador where fk_id_calificador = '" + id_calificador+ "' order by id_subcalificador");

        rs1 = st1.executeQuery(query1);

        while (rs1.next())

        {

            out.println("<option>"+rs1.getString("subcalificador")+"</option>");

        }

    }

    catch (Exception e)

    {

        e.printStackTrace();

    }

    rs1.close();

    st1.close();

    support.ini.Conexion.CloseConnection(conex);     

%>

</select>
 

</body>

</html>

Ademas adjunto la clase para la conexion para la base de datos

Código:



import java.sql.DriverManager;

import java.sql.Connection;

import java.sql.SQLException;

import oracle.jdbc.driver.*;
 

public class Conexion

{

    static Connection conex= null;

    public static Connection getConexion()

    {    

        try

        {

            String driverClassName="oracle.jdbc.driver.OracleDriver";

            String driverUrl="jdbc:oracle:thin:@NOMBRE_DE_LA_BASE_DE_DATOS:PUERTO:INSTANCIA";

            Class.forName(driverClassName);

            conex = DriverManager.getConnection(driverUrl,"NOMBRE DE USUARIO DE LA BASE DE DATOS", "CONTRASEÑA");   

            System.out.println("conexion exitosa");

            

        } catch(Exception e) {

            System.out.print("no se logro conección");

            e.printStackTrace();

        } 

        return conex;

    }

    public static void CloseConnection(Connection con)

    {

        try {

            con.close();

        } catch (SQLException ex) {

            ex.printStackTrace();

        }

    }

}

Script de la base de datos...

Cita:

CREATE TABLE calificador (
id_calificador NUMBER NOT NULL PRIMARY KEY,
calificador VARCHAR2(20) NULL,
fk_id_state NUMBER(1)
);

CREATE TABLE subcalificador (
id_subcalificador NUMBER NOT NULL PRIMARY KEY,
fk_id_calificador NUMBER NOT NULL REFERENCES calificador(id_calificador)
ON DELETE cascade,
subcalificador VARCHAR2(20) NULL,
fk_id_state NUMBER(1)
);

Que mas les puedo ofrecer???? espero que les sea de ayuda.

Re: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

Fantástico! Gracias por tu tiempo! Ahora no lo necesito pero me lo pongo en favoritos... quizá algún día sea necesario :)

Re: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

Creo que habría que reparar bastante ese código.

Re: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

Cita:

Iniciado por GreenEyed (Mensaje 2308557)

Creo que habría que reparar bastante ese código.

pero funca! :risa:

si me dices en "que", te lo agradecería, además la pagina esta llena de preguntas y nadie se da el tiempo de dar una solución... en wena sipo XD

Re: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

"Funca" debe ser una definición moderna ;-), por que mi definición de "funciona" es algo más estricta :-).

Algunos detalles echando un vistazo rápido:
.- La conexión la guardas en una variable estatica, por tanto compartida y si tienes más de un acceso concurrente -> pum.
.- Al usar el objeto que devuelve la conexion no haces ningun tipo de comprobacion si se pudo obtener la conexion o no, asi que si hay algun problema -> NullPointerException.
.- El HTML que crea el SELECT, por ejemplo, no está bien formado ya que el orden de abrir y cerrar tags no es el correcto. En un navegador estricto con los estandares, no funcionará.
.- Cada vez abres y cierras una conexion a la BDD, lo cual es totalmente ineficiente. No grave pero muy ineficiente y con algo de trafico, puedes matar la BDD.
.- El codigo de acceso a la BDD y devolver la conexion no hace las salvaguardas necesarias, asi que en caso de error no se cierran las conexiones, sumale eso a que abres cada vez una nueva y como haya un problema, la BDD es candidata segura a defuncion.

Sin entrar en detalles estilisticos tipo que mezclar HTML/JavaScript con acceso a la BDD hace que el codigo sea menos legible y reutilizable.

De todas formas, no te lo tomes a mal. Haciendo cosas es como se aprende. Lo que ocurre es que hay una diferencia entre que un codigo te funcione en una prueba y que un codigo lo pueda utilizar cualquiera y le sirva a la gente como base para aprender.

S!

Re: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

gracias por lo anterior, lo tomare en cuenta, pero esto:

Cita:

Iniciado por GreenEyed (Mensaje 2308655)

"Funca" debe ser una definición moderna

no seamos tan puritanos, no creo que seas un "viejo vinagre", pero por ak es de lo mas normal.

muchas gracias por todo GreenEyed, de verdad lo aprecio, saludos.

Re: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

Era un chiste simplemente, para quitarle hierro al asunto ;-). Afortunadamente la programación se me da mejor que contar chistes, jejeje.

Re: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

Totalmente de acuerdo con GreenEyed, de hecho podemos ser albañiles (sin menospreciar), pero nuestro objetivo es la arquitectura (del software). El Modelo 1 de JSP hace 10 años que se ha superado. Por favor MVC!!!

un saludo, y sin acritud.

Respuesta: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

Hola amigos... soy mas bien nuevo en el tema de jsp, y en estos momentos necesito implementar dos combos dependientes, y utilice el codigo que hay en este tema, pero me sale un error que lo menciona GreenEyed que es el de NullPointerException.

Me gustaria por favor si me pueden colaborar a solucionar esto que la verdad no se si es que estoy haciendo algo mal o es en si un problema ajeno a mi jeje

Muchas gracias.

Respuesta: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

weon te pasaste, acá lo dejo con Hibernate saludos

Cita:

<%@ page contentType="text/html; charset=iso-8859-1" language="java" errorPage="" %>
<%@ page import="conexion.*"%>
<%@ page import="org.hibernate.*"%>
<%@ page import="org.hibernate.Session"%>
<%@ page import="java.util.List"%>

<script type="text/javascript">
var peticion = false;
var testPasado = false;
try
{
peticion = new XMLHttpRequest();
}
catch (trymicrosoft)
{
try
{
peticion = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (othermicrosoft)
{
try
{
peticion = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed)
{
peticion = false;
}
}
}

if (!peticion)
alert("ERROR AL INICIALIZAR!");

function cargarCombo (url, comboAnterior, element_id)
{
//Obtenemos el contenido del div
//donde se cargaran los resultados
var element = document.getElementById(element_id);
//Obtenemos el valor seleccionado del combo anterior
var valordepende = document.getElementById(comboAnterior)
var x = valordepende.value
//construimos la url definitiva
//pasando como parametro el valor seleccionado
var fragment_url = url+'?id_calificador='+ x ;
element.innerHTML = '<img src="imagenes/cargando.gif" />'; //opcional
//abrimos la url
peticion.open("GET", fragment_url);
peticion.onreadystatechange = function()
{
if (peticion.readyState == 4)
{
//escribimos la respuesta
element.innerHTML = peticion.responseText;
}
}
peticion.send(null);
}
</script>

<select name="calificador" onchange="javascript:cargarCombo('poblaciones.jsp' , 'calificador', 'div_subcalificador')" id="calificador" style="width:180px">
<%//generaremos el select con los paises
Session sesion = HibernateUtil.abrirSesion();

try{
List<ListaPaises> lista=(List<ListaPaises>)sesion.createQuery("from ListaPaises as us").list();
for (ListaPaises est : lista) {
out.println("<option value='" + est.getId()+"'>"+est.getOpcion()+"</option>");
}
sesion.beginTransaction().commit();
sesion.close();
}catch (HibernateException e){
e.printStackTrace();
}

%>
</select>

<div id="div_subcalificador"></div>

Cita:

<%@page contentType = "text/html; charset=iso-8859-1" language="java" errorPage="" %>
<%@page pageEncoding = "UTF-8"%>
<%@page import = "conexion.*"%>
<%@page import = "org.hibernate.*"%>
<%@page import = "org.hibernate.Session"%>
<%@page import = "java.util.List"%>
<%@page import = "java.sql.Connection"%>
<%@page import = "java.sql.DriverManager"%>
<%@page import = "java.sql.ResultSet"%>
<%@page import = "java.sql.Statement"%>

<html>
<body>

<%
int id_calificador = Integer.parseInt(request.getParameter("id_califica dor").toString());
%>

<select name="subcalificador" id="subcalificador" class="select" style="width:180px">

<%

Session sesion = HibernateUtil.abrirSesion();

try{
List<ListaEstados> lista=(List<ListaEstados>)sesion.createQuery("from ListaEstados as us").list();
for (ListaEstados est : lista) {
if(est.getRelacion()==id_calificador){
out.println("<option>"+est.getOpcion()+"</option>");
}
}
sesion.beginTransaction().commit();
sesion.close();
}catch (HibernateException e){
e.printStackTrace();
}
%>
</select>

</body>
</html>

Cita:

/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

package conexion;

import org.hibernate.*;
import org.hibernate.cfg.*;
/**
*
* @author luis.gutierrez
*/
public class HibernateUtil {

private static final SessionFactory sessionFactory;

static {
try {
// Create the SessionFactory from hibernate.cfg.xml
sessionFactory = new Configuration().configure().buildSessionFactory();

} catch (Throwable ex) {
// Make sure you log the exception, as it might be swallowed
System.err.println("Initial SessionFactory creation failed." + ex);
throw new ExceptionInInitializerError(ex);
}
}

/**
* @return SessionFactory
* @param Metodo que devuelve el miembro sessionFactory
*/
public static SessionFactory getSessionFactory() {
return sessionFactory;
}

/**
* @return Session
* @param Metodo que devuelve una session del miembro sessionFactory
*/
public static Session getSession(){
return sessionFactory.getCurrentSession();
}

public static Session abrirSesion(){
return sessionFactory.openSession();
}

/**
* @return void
* @param Metodo usado para cerrar la sesion
*/
public static void cerrarSesion(){
try{
sessionFactory.close();
}catch (HibernateException ex){
throw new RuntimeException(ex);
}
}

}

Respuesta: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

Wenas

Lo primero, detalles tecnicos aparte, bravo por maelwys. Da gusto ver gente que encuentra problemas y trata de solucionarlos y no se limita a esperar una respuesta.

Eso si, tal y como te ha indicado greeneyed, es una version 'beta'. Tiene fallos.

Sigue asi, maelwys.

Saludos.

PD. angerrising, por que haces un commit en la BBDD??
PPD. La clase hibernateutil la has hecho tu??

Respuesta: Re: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

hola, tengo la inkietud de como implementar el código para anidar mas listados, yo en especial necesito 3, y no e podido ser capaz de lograrlo, e intentado varias cosas y nada, gracias a kien pueda colaborarme

codigo pagina.jsp

Código:

<script type="text/javascript">

var peticion = false;

var  testPasado = false;

try{    

    peticion = new XMLHttpRequest();

} catch (trymicrosoft){

    try{

        peticion = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (othermicrosoft){

        try{

            peticion = new ActiveXObject("Microsoft.XMLHTTP");

        } catch (failed){

            peticion = false;

        }

    }

}
 

if (!peticion)

alert("ERROR AL INICIALIZAR!");

 

function cargarCombo (url, comboAnterior, element_id){    

    var element =  document.getElementById(element_id);

    var valordepende = document.getElementById(comboAnterior);

    var x = valordepende.value;    

    var fragment_url = url+"?idCategoria="+x+"&sw=0";

    peticion.open("GET", fragment_url); 

    peticion.onreadystatechange = function(){

        if (peticion.readyState == 4){

            //escribimos la respuesta

            element.innerHTML = peticion.responseText;

        } 

    } 

   peticion.send(null); 

}

</script>
 

<select name="lista_categoria" onchange="javascript:cargarCombo('list_dinamic.jsp', 'lista_categoria', 'div_subcategoria')" id="lista_categoria" style="width:350px;">

     <option value="0">Seleccione una categoria...</option>            

            <%

            conDB.conectarDB();

            ResultSet rs = conDB.tableCategoria();                    

            while(rs.next()){%>

            <option value="<%= rs.getString("idCategoria") %>"><%=rs.getString("Nombre")%></option>

            <%} conDB.desconectarDC();%>

</select>
 

<div id="div_subcategoria">

<select name="lista_subcategoria" style="width:350px;" id="lista_subcategoria">

<option value="0">Seleccione una categoria primero...</option>

</select>

</div>
 

<div id="div_tema">

<select style="width:350px;" name="combodependiente2"  id="combodependiente2" >

<option>Seleccione una subcategoria primero...</option>

</select>

</div>

codigo list_dinamic.jsp:

Código:

<%String idCat =  request.getParameter("idCategoria");%>

<select name="lista_subcategoria"  id="lista_subcategoria" style="width:350px;"><%

conDB.conectarDB();

ResultSet rs = conDB.tableSubcategoria(idCat);                    

while(rs.next()){%>

<option value="<%= rs.getString("idSubcategoria") %>"><%=rs.getString("Nombre")%></option>

            <%} conDB.desconectarDC();%>

</select>

e tenido la idea de implementar el primer código anidado en el segundo pero al momento de escribir los datos en vista k el segundo código esta en otra pagina jsp, bueno en fin estoy un poco confundido

Respuesta: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

Hey Muy Bueno El Post....
Una Pregunta Sirve Para Trabajar Con Servlets Tambien.

Respuesta: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

Hey Muy Bueno El Post....
Una Pregunta Sirve Para Trabajar Con Servlets Tambien.

Respuesta: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

Alguno Sabe Como Seria Con Una Base De Datos MySql?

Respuesta: (2) Listados desplegadles (o combos) dependientes (SOLUCION) JSP+AJAX

Hey amigo que tal, tu tuto me sirvio a la perfeccion, es mas ya lo habia hecho pero aun mantengo un mismo problema... resulta y pasa que si me carga el primer combo, y efectivamente el segundo combo carga dependiendo del primero haciendo una consulta en la BD, todo funciona bien, pero luego necesito que al darle clic al boton enviar del formulario, me mande como parametro lo escogido en los dos combos, puedo ver que en el primer combo funciona, pero el segundo practicamente es invisible, es mas si reviso el codigo de fuente, evidentemente el primero me lo carga bien con cada OPTION que le corresponde, pero el segundo es como sino existiera, solo aparece <DIV>... pero no aparece ni el SELECT ni los OPTION, por eso es que no envia nada el form, que puedo hacer para que eso sea visible y poder enviar esos parametros