Ajax y JSP

shaina · #1 (**permalink**) 04/03/2010, 12:28

Hola
Soy muy nueva en Ajax pero ya he trabajado con JSP.
Estoy intentando hacer combos dependientes, o sea que cuando escoja un pais en un combobox(la lista de paises la traigo de una bd Firebird) me salga en el otro combobox los departamentos asociados a ese pais.

Ya sé que hay muchos post en este foro y en la web que hablan de eso pero la mayoría son PHP y no he podido adaptarlos al JSP.

Al principio lo tenía con un controlador y un JSP pero no funcionó, así que ahora lo tengo con dos JSP's.

Este es el primero(PruebaCombos.jsp)

Código PHP:

  <%@page import="Operaciones.*,Controlador.*,IglesiaCristianos.*,java.util.*"%> 
 
<html> 
<script language="JavaScript"> 
/* 
 onclick="javascript:alert('Hola');" 
*/ 
 
var req; 
 
function Mostrar(){ 
  alert('esto es una prueba ¬¬'); 
} 
 
function obtenerCiudadesDePais(){ 
 
   if (formulario.pais.options[ formulario.pais.selectedIndex ].value == "-------------"){ 
      alert('Seleccione una opci?n v?lida para el pais'); 
      return ; 
   } 
 
   if( window.XMLHttpRequest ) 
        req = new XMLHttpRequest(); // No Internet Explorer 
    else 
        req = new ActiveXObject("Microsoft.XMLHTTP"); 
 
   url = "info.jsp?pais="+encodeURIComponent(formulario.pais.options[formulario.pais.selectedIndex].value); 
   req.onreadystatechange = procesadorRespuesta; 
 
   req.open("POST", url , true); 
   req.send(url); 
 
function procesadorRespuesta(){ 
   if (req.readyState == 4){ 
      if (req.status==200){ 
        document.all.ciudad.innerHTML = req.responseText; 
      } 
   } 
} 
 
</script> 
    <head><title>Combos</title></head> 
    <body> 
<form name="formulario"> 
    Escoja su pa&iacute;s de origen:<br> 
 
<% 
OperacionIglesia op=new OperacionIglesia(); 
ArrayList<Pais> listap=op.getPaises(); 
%> 
<select name="pais" id="pais" onChange="obtenerCiudadesDePais();"> 
<option>-------------</option> 
  <% 
    for(int i=0;i<listap.size();i++) 
        { 
        %> 
        <option value=<%=listap.get(i).getCod_Pais()%>><%=listap.get(i).getNom_Pais()%></option> 
        <% 
        } 
  %> 
 
</select><br> 
Escoja su ciudad<br> 
<select name="ciudad"> 
 
</select> 
 
</form> 
</body> 
</html>

Y este es el que debería devolver la respuesta al PruebaCombos.jsp, que se llama info.jsp

Código PHP:

  <%@page import="Operaciones.*,Controlador.*,IglesiaCristianos.*,java.util.*"%> 
<% 
String pais = request.getParameter("pais"); 
OperacionIglesia op=new OperacionIglesia(); 
ArrayList<Departamento> listac=op.getDptos(pais); 
 
String info = ""; 
 
    for(int i=0;i<listac.size();i++) 
        { 
            info = "<option>"+listac.get(i).getNom_departamento()+"</option>"; 
        } 
 
response.setContentType("text/html"); 
response.setHeader("Cache-Control", "no-cache"); 
response.getWriter().write(info); 
%>

Bueno ya he probado varias cosas y nada, tal vez estoy entendiendo mal la lógica de ajax...
Si alguno puede ayudarme lo aprecio mucho y gracias de antemano

ElJavista · #2 (**permalink**) 06/03/2010, 10:26

Aparentemente todo está bien, yo uso JSP y Servlets junto con Ajax, pero empleo un servlet como procesador, no un JSP. En todo caso viene a ser lo mismo, pero hay algo en tu código que me extraña. Esta línea:

response.getWriter().write(info);

yo en tu lugar lo hubiera hecho así:

response.getWriter().print(info);

No sé cual es la diferencia o por qué empleas el método write en lugar del print. Si viene a ser casi lo mismo, no sabría decirte qué está mal, lo que si te recomiendo es que visualices en el navegador la página info.jsp de este modo:

info.jsp?pais=1

asumiendo que 1 es el id del algún pais. Talvez envíes el nombre, yo enviaría el id, para evitar problemas con los acentos, los espacios y las eñes, claro que si todo está con UTF-8, tampoco tendría porque haber problemas.

Otra recomendación. No emplees este odioso código:

document.all.ciudad.innerHTML = req.responseText;

Eso solo funciona en el también odioso Internet Explorer, usa en su lugar este:

document.getElementById('cuidad').innerHTML = req.responseText;

en ese caso tienes que añadirle el id al elemento de name "cuidad".

Vamos! revisa bien esa página info.jsp por el navegador colocandolo el parámetro por URL que corresponde. Suerte!

shaina · #3 (**permalink**) 08/03/2010, 10:16

Hola ElJavista! Muchas gracias por responder.

Bueno lo de write y print no sabría decirte cual es la diferencia, pero lo tomare en cuenta.

Cita:

Iniciado por ElJavista

lo que si te recomiendo es que visualices en el navegador la página info.jsp de este modo:
info.jsp?pais=1

Bien, hice la prueba y me muestra solo el ultimo registro de la bd. O sea, de la lista de países el que corresponde al código 1 es "Colombia" y cuando lo pruebo desde el navegador me muestra "Vichada", que es el ultimo registro de la tabla Departamentos cuando el codigo de pais es igual a 1.
También lo probé con otros países y siempre es lo mismo, me muestra el ultimo registro.

Cita:

Otra recomendación. No emplees este odioso código:
document.all.ciudad.innerHTML = req.responseText;

Eso solo funciona en el también odioso Internet Explorer, usa en su lugar este:
document.getElementById('cuidad').innerHTML = req.responseText;

Bueno, esa linea la cambie y no funciona tampoco. Yo había intentado hacerlo con una estructura MVC pero cada vez que elegía un país, se cambiaban los departamentos pero se recargaba la pagina, quedando en el primer combo el país por defecto.

¿Que puede estar pasando?

de verdad muchas gracias por tu ayuda lo aprecio mucho :)

ElJavista · #4 (**permalink**) 08/03/2010, 11:20

El útlimo cambio que te dije que hicieras no era para arreglar tu problema, sino para que tu código JavaScript sea valido en I.E. y también para FF y otros navegadores. Bueno, el problema es todo un reto, me encanta, agregame a tu lista de MSN y veremos que hacemos.

shaina · #5 (**permalink**) 11/03/2010, 08:25

Hola!
gracias otra vez. Bien...
¿Tiene algo que ver que este probando el ejemplo sobre Mozilla Firefox instalado en Ubuntu? O que la bd sea Firebird?

Otra opción es adecuar este código a Ajax, es el MVC del que había comentado al inicio:

JSP:

Código PHP:

  <%--  
--%> 
 
<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<%@page import="Operaciones.*,Controlador.*,beans.*,java.util.*"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
   "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
    <head> 
 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <title>Combos dependientes con bd</title> 
 
        <script type="text/javascript"> 
            function control() 
            { 
            document.forms[0].action='Controlador?operacion=depende'; 
            document.forms[0].submit(); 
            } 
        </script> 
 
    </head> 
    <body> 
        <h1>PruebaCombos</h1> 
        <form name="formCombos" method="POST" action="javascript"> 
            <table> 
                <tr> 
                    <td> 
                        Nombre de pais 
                    </td> 
 
                    <td> 
                        <select name="Id_Pais" onchange="control()"> 
                            
                            <% 
                            Operaciones op=new Operaciones(); 
                            ArrayList<Pais> p=op.getPaises(); 
                            for(int i=0;i<p.size();i++) 
                            { 
                            %> 
                             
                            <option value="<%=p.get(i).getCod_Pais()%>"><%=p.get(i).getNom_Pais()%></option> 
                            <% 
                            } 
                            %> 
                        </select> 
                    </td> 
 
                    <td> 
                        <select name="Id_Departamento" onchange="control2()"> 
                             
                            <% 
                            ArrayList<Departamento> dp=op.getDptos(request.getParameter("Id_Pais")); 
                            for(int j=0;j<dp.size();j++) 
                            { 
                            %> 
             
                            <option value="<%=dp.get(j).getCod_Departamento()%>"><%=dp.get(j).getNom_departamento()%></option> 
                            <% 
                            } 
                            %> 
                        </select> 
                    </td> 
                </tr> 
 
                <tr> 
                    <td> 
                        <input type="button" name="Buscar" value="Buscar" id="Buscar"    onclick="control()"/> 
                    </td> 
                </tr> 
 
            </table> 
        </form> 
    </body> 
</html>

El controlador(Servlet):

Código PHP:

   //Combo dependiente para sacar los departamentos 
  public class Controlador extends HttpServlet   { 
    
    /**  
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods. 
     * @param request servlet request 
     * @param response servlet response 
     * @throws ServletException if a servlet-specific error occurs 
     * @throws IOException if an I/O error occurs 
     */ 
 
    protected void processRequest(HttpServletRequest request, HttpServletResponse response) 
    throws ServletException, IOException { 
        response.setContentType("text/html;charset=UTF-8"); 
        System.out.println(true); 
        String op = request.getParameter("operacion"); 
        System.out.println(op); 
     ServletContext ctx = this.getServletContext(); 
     System.out.println(ctx); 
 
     Operaciones data = new Operaciones(); 
     RequestDispatcher rd; 
     RequestDispatcher rd2; 
     System.out.println(request.getLocale()); 
 
   if(op.equals("depende")) 
     { 
         String cod_pais= request.getParameter("Cod_Pais"); 
 
         request.setAttribute("Departamento",data.getDptos(cod_pais)); 
         rd=request.getRequestDispatcher("/PruebaCombos.jsp"); 
         rd.forward(request, response); 
     } 
 
} 
 
//Metodos del Servlet 
@Override 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
    throws ServletException, IOException { 
        processRequest(request, response); 
    }  
    /**  
     * Handles the HTTP <code>POST</code> method. 
     * @param request servlet request 
     * @param response servlet response 
     * @throws ServletException if a servlet-specific error occurs 
     * @throws IOException if an I/O error occurs 
     */ 
    @Override 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
    throws ServletException, IOException { 
        processRequest(request, response); 
    } 
 
    /**  
     * Returns a short description of the servlet. 
     * @return a String containing servlet description 
     */ 
    @Override 
    public String getServletInfo() { 
        return "Short description"; 
    }

Y la clase Operaciones.java

Código PHP:

   
//Devolver lista de paises 
     public ArrayList<Pais> getPaises() 
     { 
         ArrayList<Pais> p=new ArrayList<Pais>(); 
 
         try{ 
             Connection cn=this.getConection(); 
             String query="Select * from Pais"; 
             Statement st=cn.createStatement(); 
             ResultSet rs=st.executeQuery(query); 
 
             while(rs.next()) 
             { 
                 Pais pa=new Pais(); 
                 pa.setCod_Pais(rs.getInt("Id_Pais")); 
                 pa.setNom_Pais(rs.getString("Nom_Pais")); 
                 p.add(pa); 
             } 
         }catch(SQLException e){ 
             e.printStackTrace(); 
         } 
         return p; 
     } 
 
     //Devolver lista de departamentos de acuerdo al pais al que corresponde. 
    public ArrayList<Departamento> getDptos(String cod_pais) 
    { 
        ArrayList<Departamento> dep=new ArrayList<Departamento>(); 
        try 
        { 
            Connection cn=this.getConection(); 
            String query="Select * from Departamento where Id_Pais='"+cod_pais+"'"; 
            Statement st=cn.createStatement(); 
            ResultSet rs=st.executeQuery(query); 
 
            while(rs.next()) 
            { 
                Departamento d=new Departamento(); 
                d.setCod_Departamento(rs.getInt("Id_Departamento")); 
                d.setNom_departamento(rs.getString("Nom_Departamento")); 
                d.setCod_Pais(rs.getInt("Id_Pais")); 
                dep.add(d); 
            } 
        }catch(SQLException e){ 
            e.printStackTrace(); 
        } 
        return dep; 
    }

Esa es la unica otra opción que se me ocurre de verdad aprecio mucho su ayuda

ElJavista · #6 (**permalink**) 11/03/2010, 09:11

Bueno, no quieres que te ayude mediante MSN, eso se respeta, no veo otra forma de ayudarte.

shaina · #7 (**permalink**) 20/03/2010, 09:51

Hola!
Disculpa la tardanza en contestar...

Cita:

Bueno, no quieres que te ayude mediante MSN, eso se respeta, no veo otra forma de ayudarte.

No puedo usar msn porque no dispongo de mucho tiempo y por eso recurro a este método. Seguire probando cosas

Muchas gracias de verdad

shaina · #8 (**permalink**) 21/04/2010, 08:55

Bueno, encontré un link con un ejemplo muy bueno:

http://nachxs.wordpress.com/2009/03/31/combos-dependientes-con-jsp-ajax-y-postgresql-en-netbeans/

Está hecho en JSP con Ajax y base de datos Posgres, y funciona. Ahora es sólo cuestión de adaptarlo a los combos de países.

Muchas gracias por las respuestas.
:D