Lectura de datos desde GetJSON

nemreb · #1 (**permalink**) 05/04/2011, 06:27

Hola compañeros! Tengo un problema con un script jQuery, espero que me puedan ofrecer algo de luz porque estoy muy confuso.

Estoy haciendo un formulario donde se introduce una direccion de email y se comprueba su validez (no sintáctica, sino existencia real) mediante un php (dyn_validate_email.php) que devuelve un JSON de la forma "{'mail':'x'}", donde x puede ser 0 ó 1. Este valor lo consulto con el método getJSON, y dependiendo si es válido o no, cambio una imagen al lado del input (la misma imagen que al pulsar activa el callback).
El caso es que llevo más de un año usando getJSON y nunca me había encontrado con un problema semejante! Puedo ver que por Firebug el script php me devuelve el JSON correctamente, pero el js no hace nada más, es decir, no se me ejecuta el function definido a continuación.
Os indico el código que utilizo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript">if(typeof jQuery==='undefined'){document.write(unescape("<scri"+"pt src='../includes/js/jquery-1.5.min.js' type='text/javascript' />"));}</script>
    <script>
    $(document).ready(function(){
        $("#img_email").click( function(){            
        	$.getJSON("../tools/dyn_validate_email.php?mail="+$("#email").val(),function(json){
    			if (json.mail == '1'){
    				imagen_resultado = "thumb";
    			} else {
    				imagen_resultado = "thumb-up";
    			}
    			$(this).attr("src","images/16/"+imagen_resultado+".png");		
    		});
        });
    });
    </script>
</head>
<body>
<form>
<input type="text" id="email" name="email"></input>
<img class="icon" id="img_email" name="img_email" src="images/16/mail-exclamation.png" width="16" height="16" alt="Valida"/>
</form>
</body>
</html>

He probado a hacer alerts, a dejar el código a su mínima expresión, pero ni así. Lo más curioso es que el formulario tiene otros botones que sí usan getJSON y funcionan sin problemas, pero un copy/paste no me funciona

. Seguro que es un error muy evidente, pero no veo.
¿A alguien se le ocurre qué puede ser? Gracias!!

Dany_s · #2 (**permalink**) 05/04/2011, 06:39

el json lo tenes con comillas simples

nemreb · #3 (**permalink**) 05/04/2011, 07:40

Efectivamente!!! Muchas gracias!!

Lo que ahora me intriga es que tengo otros php que me devuelven JSON con comillas simples y el getJSON me los acepta. ¿Cómo es esto posible? Porque fíjate Dany_s, si puse comillas simples fue porque hice un copy/paste de otro script que así lo tiene y me funciona bien.

Dany_s · #4 (**permalink**) 05/04/2011, 07:52

porque en el que tienes comillas simples tienes la versión de jquery 1.3? y ahora estas con la 1.4 o 1.5?

nemreb · #5 (**permalink**) 05/04/2011, 07:59

Mmm pues no, las dos llamadas a getJSON están en el mismo script js, con lo que usan la misma versión: 1.5. El código que puse arriba es una simplificación muy grande de un script más grande.
Otra cosa: aunque ya alcanzo ver el valor de json.mail, no se me ejecuta el cambio de src de la imagen. Esto me extraña, porque fuera del bucle de getJSON sí se ejecuta pero no dentro. Y si hago un alert antes de ejecutar ese cambio, aparece la ruta correcta de la imagen, pero no se cambia el src. Estoy probando otras opciones, pero lo que te comento es la forma más sencilla de cambiar el src de la imagen... y no lo hace :(

Dany_s · #6 (**permalink**) 05/04/2011, 08:05

porque $(this).attr no está haciendo referencia a la imagen, en el callback de evento click si pero en el método getJSON no

fuera del método getJSON guardá la referencia para usar en el callback

o sea

Código Javascript:

Ver original$("#img_email").click( function(){
    imagen = $(this);
    $.getJSON.....

ahora usa esa referencia
imagen.attr(....

nemreb · #7 (**permalink**) 05/04/2011, 08:07

Sí, acabo de darme cuenta con dos alert (uno antes y el otro despues)! Iba a escribirlo cuando he leido tu comentario :)
Gracias por el apunte.