Título: Problema con Ajax en google Chrome y Opera
Publicado por: RedWarrior en 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 <%@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: <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 <%@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: <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 <%@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
Título: Re: Problema con Ajax en google Chrome y Opera
Publicado por: robe007 en 18 Abril 2013, 23:36 pm
Hey que tal ! Prueba cambiando tu método de GET a POST de la siguiente manera: 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/ (http://api.jquery.com/jQuery.ajax/))
Título: Re: Problema con Ajax en google Chrome y Opera
Publicado por: RedWarrior en 20 Abril 2013, 02:20 am
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 !!
|