Retorno de valor Onchange para ser usado como parametro

oshho · #1 (**permalink**) 20/03/2015, 08:58

Buenas a todos, es primera vez que ingreso a este foro y es increíble la cantidad de contenido que hay aquí, y la ayuda que brindan los usuarios es muy buena, es por ello que en esta ocasión requiero de su ayuda hahaha. Bueno directo al grano, resulta que estoy haciendo una aplicación web con JSP, dentro de esta aplicación tengo 2 combobox, 1 combobox carga una lista desde una base de datos, y el segundo combobox debería hacer lo mismo, pero basado en la selección del primer combobox. (Un ejemplo muy común de esto es clasico par de combos "País" y "Ciudad" en el que el segundo solo cargaría las ciudades del país seleccionado)

Bueno a continuación le dejo le codigo de mi JSP, en el cual yo se que me falta hacer algo en la función cargarCTN(), pero bueno hace 10 minutos que comencé a usar Javascript por primera vez en mi vida, por lo que no entiendo mucho.

Código Java:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!--Funcion javascript para la carga del combobox/drop-down list de transacciones -->
        <script type="text/javascript">
            function cargarCTN()
            {
                //toma la ID de la aplicación seleccionada del combo cmbApplicationName
                var seleccion = document.getElementById('cmbAN');
            }
        </script>
        <title>JSP Page</title>
    </head>
 
<body>
        <form name="frmEliminar" method="POST">
            <table>
                <tbody>
                    <tr>
                        <td>Nombre de Aplicación</td>
                        <td><select  style="width: 317px" id="cmbAN" name="cmbApplicationName" onchange="cargarCTN()" >
                                <option>--Seleccione--</option>
                        <!-- Carga el combobox/drop-down list con las posibles aplicaciones -->
                                <%for(Application appl: new dao.ApplicationDao().listarAplicaciones()){%>
                                <option value="<%= appl.getIdApplication() %>"><%= appl.getNameApplication()%></option>
                                <% }%>
                            </select></td>
                    </tr>
                    <tr>
                        <td>Nombre de Transacción</td>
                        <td><select  id="cmbTN" name="cmbTransactionName">
                                <option>--Seleccione--</option>
                                <%for(Transaction tran: new dao.TransactionDao().listarTransacciones("AQUI VA LA ID OBTENIDA DEL SELECT ANTERIOR (cmbApplicationName)")) {%>
                                <option value="<%= tran.getIdTransaction() %>"><%= tran.getNameTransaction()%></option>
                                <%}%>
                            </select></td>
                    </tr>
                    <tr>
                        <td>Desde: </td>
                        <td><input name="dtpFechaInicio" id="datetimepicker1" type="text" ></td>
                    </tr>
                    <tr>
                        <td>Hasta: </td>
                        <td><input name="dtpFechaFin" id="datetimepicker2" type="text" ></td>
                    </tr>
                </tbody>
            </table>
            <br>
            <input type="submit" value="BUSCAR" name="btnBuscar" /> <input type="submit" value="ELIMINAR" name="btnEliminar" />
        </form>
    </body>
         
    <!-- Jquery para Datetimepicker-->
        <link rel="stylesheet" type="text/css" href="jsdtp/jquery.datetimepicker.css">
        <script src="jsdtp/jquery.js"></script>
        <script src="jsdtp/jquery.datetimepicker.js"></script>
        <script>jQuery('#datetimepicker1').datetimepicker();</script>
        <script>jQuery('#datetimepicker2').datetimepicker();</script>
</html>

Bueno, prácticamente lo que quiero hacer es que al seleccionar una opción del cmbApplicationName y que a través del onchange este devuelva la ID para ser utilizada como parámetro de entrada para cargar el cmbTransactionName, a continuación les dejo la query que tengo en una clase Java para obtener la lista del cmbTransactionName.

Código Java:

Ver original/** Crea y devuelve una lista (ArrayList) con la ID y nombre 
     * de las transacciones a base de la ID de una aplicación. */
    public static ArrayList<Transaction> listarTransacciones(int appID){
        ArrayList<Transaction> trans = new ArrayList<Transaction>();
        Connection conexion = Conexion.getConexion();
        try {
            String query = " USE ddbs "
                    + "SELECT TransactionID, TransactionName "
                    + "FROM Transactions, Applications "
                    + "WHERE Applications.ApplicationID = ?";
            PreparedStatement listar = conexion.prepareStatement(query);
            listar.setInt(1, appID);
            ResultSet rs = listar.executeQuery();
            while(rs.next()){
                Transaction transaccion = new Transaction();
                transaccion.setIdTransaction(rs.getInt("TransactionID"));
                transaccion.setNameTransaction(rs.getString("TransactionName"));
                trans.add(transaccion);
                
            }
            
       } catch (SQLException ex) {
            out.println("<!DOCTYPE html>");
            out.println("<html>");
            out.println("<head>");
            out.println("<title>Error Exception</title>");            
            out.println("</head>");
            out.println("<body>");
            out.println("<h1>SQLException "+ ex +"</h1>");
            out.println("</body>");
            out.println("</html>");
        } catch (Exception ex) {
            out.println("<!DOCTYPE html>");
            out.println("<html>");
            out.println("<head>");
            out.println("<title>Error Exception</title>");            
            out.println("</head>");
            out.println("<body>");
            out.println("<h1>Exception "+ ex +"</h1>");
            out.println("</body>");
            out.println("</html>");
        }
        return trans;
    }

Bueno, espero que puedan ayudarme haha, por si a alguno no le quedo claro les dejo un dibujito que demuestra lo que quiero hacer (Suponiendo que es posible hacerlo)

Muchas gracias ^^

oshho · #2 (**permalink**) 20/03/2015, 09:41

Bueno avanzando un poco, me he dado cuenta de que mi function hace algo que no tiene nada que ver con lo que quiero hacer hahahaha, pero bueno si alguien me puede aportar con su ayuda o algún codigo de ejemplo reflejando lo que quiero hacer, me sería de gran ayuda.

oshho · #3 (**permalink**) 21/03/2015, 17:11

Alguna ayuda? :(

caricatos · #4 (**permalink**) 21/03/2015, 17:41

Hola:

¡Qué lio!, Estudié java pero me pierdo... estás en el foro javascript, así que aquí no vale el código java... ¿Sabes que no es lo mismo...?

El código debes verlo desde el navegador; por tus líneas, no veo nada que tenga que ver con javascript.

Saludos

oshho · #5 (**permalink**) 22/03/2015, 17:59

Cita:

Iniciado por caricatos

Hola:

¡Qué lio!, Estudié java pero me pierdo... estás en el foro javascript, así que aquí no vale el código java... ¿Sabes que no es lo mismo...?

El código debes verlo desde el navegador; por tus líneas, no veo nada que tenga que ver con javascript.

Saludos

Es que prácticamente lo que necesito hacer se hace en Javascript, por eso hice el post en este subforo, yo no se nada de javascript es por ello que necesito ayuda desde 0 haha, de como hacer lo que les expliqué.

oshho · #6 (**permalink**) 24/03/2015, 09:17

Bueno hice el post en Java, pero ahora llegué al tema del Javascript, y supongo que eso va aquí, esta es la función que saque de un tutorial, no se muy bien como funciona pero no me resulta :(

Dejare el tema de JAVA para que puedan hecharle una mirada y ordenarse u algo :)
http://www.forosdelweb.com/f45/combos-dependientes-jsp-1123889

Este JS se ejecuta por medio del evento Onchange que añadi en el primer combo.

Código Javascript:

Ver original<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!--Funcion javascript para la carga del combobox/drop-down list de transacciones -->
        <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
        <script type="text/javascript">
            function cargarCTN(){
                $.post("sel_tran.jsp",$("#frmEliminar").serialize(),
                function(frm_del){$("#cmbTransactionName").html(frm_del);});
            }
        </script>
        <title>Eliminar Métricas</title>
    </head>

no tengo idea como funciona la funcion pero tuve que crear un jsp llamado "sel_tran.jsp" para utilizarla (repito que yo no se nada de javascript y en el tutorial no explican como funciona solo lo hacen)

aquí dejo el JSP (En el tutorial que ví todo funcionó pero el creaba las querys dentro del mismo JSP y también creó una variable de conexión que obtenia datos los cuales ni idea como eran , y bueno esto pierde la estructura que estoy usando es por ello que intente cargar el combo de la misma manera de como cargué el anterior, pero aún no se a que se debe que no me funcione)

Código Javascript:

Ver original<%@page import="dto.Transaction"%>
<%@page import="dao.TransactionDao"%>
 
<% int appID = Integer.parseInt(request.getParameter("cmbApplicationName")); %>
 
<select name="cmbTransactionName">
    <option value="">--Seleccione--</option>
    <%for(Transaction trans: new dao.TransactionDao().listarTransacciones(appID)) {%>
    <option value="<%= trans.getIdTransaction() %>"><%= trans.getNameTransaction() %></option>
    <% } %>
</select>

espero que puedan ayudarme

gracias.