Problema con Ajax en google Chrome y Opera

Iniciado por RedWarrior, 18 Abril 2013, 19:30 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

RedWarrior

18 Abril 2013, 19:30 PM
Vera mi problema es el siguiente:

Tengo una pagina en JSP ,con conexion a BD y AJAX, funciona de la siguiente manera, tengo un input con datalist parecido a un combobox, al seleccionar un producto se manda llamar a otra jsp mediante ajax para que sustituya una etiqueta que tengo oculta por un input el cual es llenado con una segunda consulta a BD el cual funciona de la misma manera que el primero hasta alli todo bien, cuando selecciono el segundo producto en el segundo input, mando llamar mediante ajax una tabla la cual nos muestra los registros seleccionados de la consulta, el problema es que cuando mando llamar la jsp con latabla no pasa nada, lo probe en firefox y todo funciona bien. no entiendo por que en estos navegadores no pasa nada-  :( anexo el codigo para que me entiendan mejor :

esta es la primer JSP o la principal
Código [Seleccionar]

<%@page language="java" import="java.sql.*"%>
<%@page import="Basededatos.*" %>
<%@page import="java.net.*" %>
<%@page  contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>


<%
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Pragma", "no-cache");
    response.setDateHeader("Expires", 0);
    Conecct con = new Conecct();
    ResultSet rs=null;
    session.setAttribute("conexion",con );
    con.AbrirConexion(); 
    String query = "select Descripciondel from kdii ";
    rs = con.Consultar(query);
    request.setCharacterEncoding("UTF-8");
    String valorencode = URLEncoder.encode("","UTF-8");
       %>
<html>

    <head>

         
<script language="javascript" type="text/javascript">
 
       
       
        function objetoajax(){
        var peticion  = false;
        try{
            peticion = new ActiveXObject("Msxml2.XMLHTTP");
              }catch(e){
                  peticion=false;
              }
        if(!peticion && typeof XMLHttpRequest !='undefined'){
            peticion = new XMLHttpRequest();
            peticion.onreadystatechange
        }
        return peticion;
    }
    function Coger(url){
      var valor = document.getElementById("lista").value;
       ajax =  objetoajax();
      ajax.open('GET',url);
      ajax.onreadystatechange=function() {
          if(ajax.readyState==4){
              document.getElementById('resultado').innerHTML = ajax.responseText;
          }
         }
    ajax.send(null); 
    }
         function Coger1(url){
      var valor = document.getElementById("lista1").value;
       ajax =  objetoajax();
      ajax.open('GET',url);
      ajax.onreadystatechange=function() {
          if(ajax.readyState==4){
              document.getElementById('resultado1').innerHTML = ajax.responseText;
          }
         }
    ajax.send(null); 
    }   
               
           
           
       
        </script>
        <title> La Flecha de Oro </title>
       </head>

    <body background="productos.bmp">
        <div align="left" style="position: absolute; top: 119; left:132 ;" class="text">
            <font color="red" face="Monotype Corsiva" Size=3>
            Experiencia a tu Servicio!
            </font>
        </div>

        <div align="left" style="position: absolute; top: 16; left:310 ;" class="text">
            <embed src="menu_1.swf" width="630" height="53"></embed>
        </div>

        <div align="left" style="position: absolute; top: 83; left:313 ;" class="text">
            <embed src="banner.swf" width="415" height="170"></embed>
        </div>

        <div align="left" style="position: absolute; top: 152; left:788 ;" class="text">
            <embed src="pedidos_linea.swf" width="159" height="100"></embed>
        </div>

        <div align="left" style="position: absolute; top: 320; left:186 ;" class="text">
           
            <form name="datos">     
                <font size=2 face="verdana" style=" color: blue;">Descripción: &nbsp; &nbsp; <input value="--elige un producto y pulsa TAB--"name="descrip" onchange=" Coger('prueba.jsp?valor='+ document.datos.descrip.value.toString());" style ="width:250px"type=text list=option id="lista" >
           
            <datalist id=option >
                <%
                    String combo;
                    try {
                        while (rs.next()) {
                            combo = rs.getString(1);
                %>
                <option>
                    <%
                                out.println(combo);
                            }
                        } catch (Exception ex) {
                         
                            System.out.println(ex);
                        }
                       con.CerrarConexion();
                       rs.close();

                    %>
                </option>
            </datalist>
           </form>   
                   <br>
                   <br>
               <form name="form">    <label id="resultado" type="hidden" name="oculto" ></label></form>
                <br>
                <br>
               <form name="form">    <label id="resultado1" type="hidden" name="oculto" ></label></form>
              </font>

        </div>
            <div align="left" style="position: absolute; top: 675; left:530 ;" class="text">
            <STYLE type="text/css">
                <!--
                A:link {COLOR: #cccccc; TEXT-DECORATION: none}
                A:visited {COLOR: #cccccc; TEXT-DECORATION: none}
                A:active {TEXT-DECORATION: none}
                A:hover {COLOR: #ffffff; TEXT-DECORATION: none} -->
            </STYLE>
        </p>
        <p>
            <font color=orange face="Arial" Size=2>
            <a href="#top"><font face="Arial" Size=2>Mapa de Sitio</font></a> |
            <a href="#top"><font face="Arial" Size=2>Directorio</font></a> |
            <a href="#top"><font face="Arial" Size=2>Bolsa de Trabajo</font></a> |
            <a href="#top"><font face="Arial" Size=2>Ofertas y Promociones</font></a>
            </font>
            <br><br><br>
        </p>
    </div>
</body>
</html>


esta es la segunda JSP

Código [Seleccionar]

<%@page import="java.sql.*"%>
<%@page import="java.net.*" %>

<!DOCTYPE html>
<html>
    <head>
        <%@page  contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
       
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <%
           response.setHeader("Cache-Control", "no-cache");
           response.setHeader("Pragma", "no-cache");
           response.setDateHeader("Expires", 0);
           Class.forName("com.mysql.jdbc.Driver");
           Connection con1 = DriverManager.getConnection("jdbc:mysql://localhost/kdii","root","root");
           Statement st1= con1.createStatement();
           String valor = request.getParameter("valor");
           String sql1="Select Aplicacioncort from kdii where Descripciondel = "+"'"+valor+"'"; //where Descripciondel = "+"'"+valor+"'";
           ResultSet rs1=st1.executeQuery(sql1);
           String valor1 = request.getParameter("valorr");
           
           
           
       %>
       <script  language="javascript" type="text/javascript" >
            peticion1 =  new XMLHttpRequest();
             function Coger1(url1){
            if(peticion){
                var valor = document.getElementById("lista1").value;
                peticion1.open('GET',url1,false);
                peticion1.send(null);
                document.getElementById('resultado1').innerHTML = peticion1.responseText;
               
               
            }
                 
               
            }
           
       </script>
       <form name="datos1">
           Aplicacion: &nbsp; &nbsp; &nbsp;   <input value="--elige Producto y pulsa TAB--" name ="aplica" onchange="Coger1('TablaProductos.jsp?valor1='+document.datos1.aplica.value+'&'+'valor2='+document.datos.descrip.value.toString())"; style ="width:250px"type=text list=option1 id="lista1" >
           
     </form>
           
           
           
           <datalist id=option1 >
                <%
                    String combo1;
                    try {
                        while (rs1.next()) {
                            combo1 = rs1.getString(1);
                %>
                <option>
                    <%
                                out.println(combo1);
                            }
                        } catch (Exception ex) {
                         
                            System.out.println(ex);
                        }
                       

                    %>
                </option>
            </datalist>
    </body>
</html>



y aca es la tercera JSP la Tabla
Código [Seleccionar]

<%@page import="java.sql.*"%>
<%@page import="java.net.*" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       
        <%
            response.setHeader("Cache-Control", "no-cache");
            response.setHeader("Pragma", "no-cache");
            response.setDateHeader("Expires", 0);
            Class.forName("com.mysql.jdbc.Driver");
            Connection con1 = DriverManager.getConnection("jdbc:mysql://localhost/kdii","root","root");
            Statement st1= con1.createStatement();
            String valor1 = (String)request.getParameter("valor1");
            String valor2 = (String)request.getParameter("valor2");
            String sql1="Select * from kdii where Descripciondel = '"+valor2+"'"+"&&"+ "Aplicacioncort = '"+valor1+"'"; //where Descripciondel = "+"'"+valor+"'";
            ResultSet rs1=st1.executeQuery(sql1);
         
                     %>
    </head>
   
        <table border=1  bgcolor="white" style="border:solid  ; border-spacing: 1px ;whidth: 50%; border: 1px solid #999; text-align: left; " >
            <thead>
                <tr>
                   
                    <th>Producto</th>
                    <th>Descripcion</th>
                    <th>Aplicacion</th>
                    <th>Precio</th>
                   
                </tr>
            </thead>
            <tbody>
                <%
                    try{
                    while(rs1.next()){
                out.println("<tr>");
                    out.println("<td>"+ rs1.getString(1)+"</td>");
                    out.println("<td>"+ rs1.getString(2)+"</td>");
                    out.println("<td>"+ rs1.getString(14)+"</td>");
                    out.println("<td>"+ rs1.getString(7)+"</td>");
                out.println("</tr>");   
                    }
                    } catch(Exception ex){
                            System.out.println(ex);
                }
                %>
            </tbody>
        </table>

    </body>
</html>



agradezco mucho su tiempo ! Espero alguien me pueda ayudar de antemano gracias hermanos ;D
El conocimiento humano pertenece al mundo

robe007

#1
18 Abril 2013, 23:36 PM Ultima modificación: 18 Abril 2013, 23:38 PM por robe007
Hey que tal !

Prueba cambiando tu método de GET a POST de la siguiente manera:

Código [Seleccionar]
function Coger(url){
     var valor = document.getElementById("lista").value;
      ajax =  objetoajax();
     ajax.open("POST",url,true);
     ajax.onreadystatechange=function() {
         if(ajax.readyState==4){
             document.getElementById('resultado').innerHTML = ajax.responseText;
         }
        }
 ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 ajax.send('valor='+valor);
   }

Recuerda cambiar tambien tu código del lago del servidor, para que ahora reciba por POST y no por GET. Cuando termines, por favor, cuéntame como te fue !

Saludos

PD: Podrías ahorrarte más tiempo si utilizas directamente las bondades que ofrece jquery para trabajar con ajax (http://api.jquery.com/jQuery.ajax/)

RedWarrior

#2
20 Abril 2013, 02:20 AM Ultima modificación: 20 Abril 2013, 02:25 AM por RedWarrior
Muchas gracias, el problema fue solucionado haora todo funciona a la perfeccion muchas gracias hermano me has ayudado vastante  ;D y ps... a seguir aprendiendo jejejej  :silbar:

supongo que el  problema era que el método GET tiene un límite en la cantidad de datos que se pueden enviar. (512 bytes).

http://librosweb.es/ajax/capitulo_7/interaccion_con_el_servidor.html

investigare que cosas puedo hacer con Jquery y AJAX !!
El conocimiento humano pertenece al mundo
Imprimir
Ir Arriba Páginas1
Acciones del Usuario