Problema con Ajax y evento onBlur

freesoftwarrior · #1 (**permalink**) 31/08/2011, 06:30

Buenos días:
Tengo un código en ajax para el clásico "autocompletar" de un campo texto. Funciona bien y me permite seleccionar el elemento deseado y listo. Sin embargo le he encontrado un pequeño "bug".

Mientras estoy escribiendo el dato a buscar, la función me muestra el listado en un div. Hasta ahí normal. Sin embargo, si retiro el foco de ese campo, es decir activo el evento onBlur, el listado sigue presente y lo que deseo es que desaparezca.

Este es el código Ajax que utilizo

Cita:

var xmlHttp

function showHint(str,n)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
document.getElementById("txtHint").style.visibilit y="hidden";
return;
}

xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Su navegador no soporta AJAX");
return;
}

var url="datos.asp";

url=url+"?q="+str;
url=url+"&modelo="+n;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHt tp.responseText;
if(xmlHttp.responseText=="ND")
{document.getElementById("txtHint").style.visibili ty="hidden";}
else
{document.getElementById("txtHint").style.visibili ty="visible";}
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}
catch (e)
{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
}
return xmlHttp;
}

function selectItem(nombre)
{
document.getElementById("txtHint").style.visibilit y="hidden";
document.getElementById("txt1").value="";

document.registros.persona.value=nombre;
}

Obviamente la página datos.asp es la encargada de conectarse con la base de datos y muestra el listado. Y en la función selectItem, cierro el listado, limpio el campo texto utilizado para el autocompletar y "escribo" el dato seleccionado en el campo llamado persona.

Pero como les digo, si quito el foco del campo txtHint (es el ID del campo de texto que uso para la función autocompletar) el listado se queda visible.

Probé la opción más lógica, creo, y fue agregar una función al evento onBlur del campo texto que uso para el autocompletar, de esta forma (la función acceptNum(event) es para controlar que sólo se ingresen números, no afecta para nada a la función Ajax):

Cita:

y la función para el eventon onBlur es

Cita:

function cerrarListado()
{
document.getElementById("txtHint").style.visibilit y="hidden";
document.getElementById("txt1").value="";
}

Funciona, pero ya me di cuenta de que si tengo el listado abierto y selecciono un elemento, pues no lo llega a seleccionar, y eso porque al hacer clic en en listado estoy activando primero el evento onBlur.

He probado varias modificaciones como el que el evento onBlur active una función que primero determine si se ha llenado un campo (en este caso el campo persona), pero nada, siempre que tengo el listado y selecciono un elemento, se cierra todo y no lo selecciona al final de cuentas.

¿Alguna idea?. Espero haberme explicado bien.

Un saludo desde Lima, Perú

oscarbt · #2 (**permalink**) 31/08/2011, 06:38

Lo que debe hacer en ese caso es en el Onblur, limpiar la capa donde muestras los resultados.

Aca te dejo una funcion sencilla con la cual puedes limpiar la capa:

Código Javascript:

Ver originalfunction limpiaunacapa(capa){
var lim=document.getElementById(capa);
lim.innerHTML=" ";   
}

y en el onblur la llamas y listo:

Código HTML:

Ver original<input type="text" id="campo" Onblur="limpiaunacapa('id_capa')">

Espero te sirva

freesoftwarrior · #3 (**permalink**) 31/08/2011, 06:46

Muchas gracias por la pronta respuesta.
Lamentablemente no funciono porque si limpia el contenido de la capa, pero la capa (el div) sigue visible) y además, si selecciono algún elemento, se limpia la capa y no lo selecciona, igual que en el caso inicial.

Como dato, debajo del campo de texto que uso para el autocompletar esta el layer de esta forma:

Cita:

Otro detalle, lo necesito para IE, mejor dicho, sólo lo estoy testeando con IE (historia larga de explicar el porque sólo con IE y no viene al caso mencionarla).

Muchas gracias de todas formas. Lamento que no hay a funcionado.

oscarbt · #4 (**permalink**) 31/08/2011, 07:08

Entonces hazlo asi:

a cada resultado de la autobusqueda, colocale dos eventos: uno que te pase lo que selecciones a la caja de texto y el otro que te limpie la capa, de esa forma si te funciona...Como muestras los resultados??

Raziel_Ravenheart · #5 (**permalink**) 31/08/2011, 07:11

En este caso, el código que utilizas en la función onblur, vas a tener que pasarlo justo a la función o librería q estés utilizando, la que te permite utilizar la simulación de autocompletar, de modo que cuando esta librería u objeto, reciba la orden necesaria se cierre, supongo que dentro de la librería debe haber eventos onclick u onkeydown/press/up, para cuando se escoje un elemento, revisa bn esa parte del código, o proveenos un link para saber como funciona y tal vez te podamos ayudar, por que sin ver esa librería, no podemos saber como funciona. Además es poco probable q el ajax sea el que te esté generando el problema aunque puede que si.

freesoftwarrior · #6 (**permalink**) 31/08/2011, 07:16

No comprendo tu pregunta sobre como muestro los resultados. Acabo de publicar el código en un servidor gratuito para que veas lo que pasa

http://rmsd.brinkster.net/ajax/ajax.asp

freesoftwarrior · #7 (**permalink**) 31/08/2011, 07:24

Cita:

Iniciado por Raziel_Ravenheart

En este caso, el código que utilizas en la función onblur, vas a tener que pasarlo justo a la función o librería q estés utilizando, la que te permite utilizar la simulación de autocompletar, de modo que cuando esta librería u objeto, reciba la orden necesaria se cierre, supongo que dentro de la librería debe haber eventos onclick u onkeydown/press/up, para cuando se escoje un elemento, revisa bn esa parte del código, o proveenos un link para saber como funciona y tal vez te podamos ayudar, por que sin ver esa librería, no podemos saber como funciona. Además es poco probable q el ajax sea el que te esté generando el problema aunque puede que si.

Gracias por tu respuesta. Lo que he publicado es todo lo que tengo. La página ASP que hace la búsqueda en la base de datos no tiene importancia porque en nada interfiere. El objeto ajax lo creo con otro archivo js y es claro que tampoco tiene nada que ver porque funciona bien.

El script en gethint.js es el que controla todo lo que pasa y, como publique, el evento onKeyUp es el que lanza la función showHint() que es el inicio para mostrar el listado.

En la función seleccionar() se encuentra lo necesario para, que en caso se seleccione algo, se cierre todo, y funciona.

El caso con el onBlur es que sea lo que sea que ponga ahí, si tengo el listado visible y hago click para seleccionar, lo que va a pasar es que primero, antes de que se ejecute la función seleccionar() se va a ejecutar la función que este llamada por el evento onBlur.

Ese es el problema.

El que se limpie y cierre una vez seleccionado no es problema.
El problema es que si tengo el listado visible y hago un onBlur o simplemente quito el foco del campo que uso para el autocompletar, el listado queda visible.

Una opción que he implementado "temporalmente" es que se muestre un "cerrar ventana" en el listado. Pero no es nada elegante. Necesito que al perder el foco se cierre todo como sucede cuando se selecciona un elemento.

En la página que he publicado se ve este problema.

Mil gracias por el apoyo

freesoftwarrior · #8 (**permalink**) 31/08/2011, 07:35

En la página AJAX.ASP que he publicado se ve el problema que indico sobre que si saco el foco del primer campo texto y el listado esta visible, se mantiene.

Acabo de publicar otra página llamada AJAX2.ASP en que incluyo la función limpiaunacapa() en que se ve que si limpia (la función que cree inicialmente para cerrar la capa funciona igual) PERO ya no me permite seleccionar nada.

http://rmsd.brinkster.net/ajax/ajax2.asp

Reitero, el problema esta en que sea lo que sea que ponga en el evento onBlur, este se va a ejecutar ANTES que la función seleccionar de gethint.js.

Menudo lío, ¿eh?. Ojalá puedan darme una ayuda por favor.

oscarbt · #9 (**permalink**) 31/08/2011, 07:49

es decir por ejemplo si los resutlados los tienes en un while

seria algo como esto
<input type="text" id="campobusqueda">
while(resultados)
{
<a href="javascript:pasarvalor('parametro') ; limpiaunacapa('idcapa')">aca imprimes el resultado</a>
}

Código Javascript:

Ver originalfunction pasarvalor(parametro)
{
document.getElementById("campobusqueda").value=parametro;
}

de esa forma el resultado se plasma en la caja y la capa se limpia......
No pude probar el enlace que envias....que debo ingresarle para que me muestre sugerencias??

Raziel_Ravenheart · #10 (**permalink**) 31/08/2011, 07:55

Cita:

No pude probar el enlace que envias....que debo ingresarle para que me muestre sugerencias??

Yo también estoy intentando, pero por el momento, veo q oscar tiene más idea, para probarlo ingresa número 1 y luego 0

freesoftwarrior · #11 (**permalink**) 31/08/2011, 07:57

Cita:

Iniciado por oscarbt

es decir por ejemplo si los resutlados los tienes en un while

seria algo como esto
<input type="text" id="campobusqueda">
while(resultados)
{
<a href="javascript:pasarvalor('parametro') ; limpiaunacapa('idcapa')">aca imprimes el resultado</a>
}

Código Javascript:

Ver originalfunction pasarvalor(parametro)
{
document.getElementById("campobusqueda").value=parametro;
}

de esa forma el resultado se plasma en la caja y la capa se limpia......
No pude probar el enlace que envias....que debo ingresarle para que me muestre sugerencias??

Veamos...... en ambas páginas simplemente pulsa el número 1 en el primer campo de texto, nada más.

Sobre lo otro, como indique en una de mis repuestas, en la página del formulario tengo esto

Cita:

El evento onKeyUp lanza la función showHint que es la que desencadena todo, incluyendo llamar a la página gethint.asp que es la encargada de conectarse y buscar en la base de datos. Esta página, gethint.asp no presenta ningún problema.

Reitero, salvo que no te este comprendiendo por lo cual me disculpo, resumo así:

1. Al escribir un dato en el campo ID="txt1" se ejecuta la rutina de búsqueda de datos.
2. Si el listado esta visible (en el div id="txtHint") y quito el foco del campo ID="txt1" entonces el listado sigue visible.
3. Cualquier rutina o script que ponga en evento onBlur del ID="txt1" se ejecutará ANTES que la función seleccionar() que es la que me permite seleccionar un elemento y mostrarlo en los demás campos.

Actualmente he puesto una solución "cutre" como dicen mis amigos españoles, que es incluir, en el listado, una opción para cerrar la ventana. Pero eso no es lo que me han pedido. Me han pedido que se cierre cuando el campo que uso para el autocompletar (el de ID="txt1") pierda el foco. Ahí es cuando debe cerrarse, pero obviamente también debe poder permitirme seleccionar un elemento.

Espero en verdad estar explicándome bien, recién estoy incursionando en esto de Ajax.

Raziel_Ravenheart · #12 (**permalink**) 31/08/2011, 08:07

Bueno, yo creo que por ahora puede haber una solución no muy artesanal, pero puede funcionar, la idea sería la siguiente:

1. En vez de generar un evento onblur del primer elemento, mejor se genera un evento onfocus de los otros elementos, es decir

Código HTML:

Ver original<input type="text" id="nombre" name="nombre" size="70" readonly class="texto_amarillo" value="" onfocus="ocultarHint(this)">

y la función sería algo como la siguiente:

Código HTML:

Ver originalfunction ocultarHint(objeto){
 if(objeto.id !== "txtHint"){
         document.getElementById("txtHint").style.visibility="hidden";
    document.getElementById("txt1").value="";
 }
}

Yo se que funciona, pero no se si luego vayas a necesitar utilizar el evento onfocus, para los otros elementos, es decir, en ese caso tendrias que cambiar o extender la función, pero ya te queda más fácil.

Se me olvidaba: Creo q en este caso, sería bueno que le pusieras el atributo "id" a todos, para poder distinguirlos, o prueba así a ver que sucede.

Si te sirve y te gusta, avisas.

Raziel_Ravenheart · #13 (**permalink**) 31/08/2011, 08:11

Creo que no hay necesidad de enviar el evento onfocus así:

onfocus="ocultarHint(this)"

sería mejor así

onfocus="ocultarHint()";

y la función no tiene necesidad de comparar el id, solo de ocultar el hint, así:

Código Javascript:

Ver originalfunction ocultarHint(){ 
        document.getElementById("txtHint").style.visibility="hidden";
        document.getElementById("txt1").value=""; 
    }

Y se llama el evento onfocus, de los otros elementos, menos del div "txtHint" y del primer input text.

freesoftwarrior · #14 (**permalink**) 31/08/2011, 08:15

Justo estaba por publicar un adicional (en este foro no se puede, por lo que veo, editar respuestas).

Ya había considerado esa opción pero tiene una limitación. Si simplemente saco el foco del campo autocompletar PERO no me enfoco en otro campo, el listado sigue visible.

Había optado incluir un foco forzado en gethint.js de esta forma

Código:

document.getElementById("nombre").focus();

pero sólo funciona cuando se ha seleccionado un elemento. La cuestión es que si simplemente hago clic fuera del formulario, entonces lo que hago es sacar el foco del mismo y .. bueno, no se podría ejecutar la función del envento onFocus hasta que me ubique en algún campo en cuestión.

También había probado esta función en el evento onBlur

Código:

function cerrarListad()
{
var dato=document.getElementById("txt1").value;

if(dato != "")
{
document.getElementById("txtHint").style.visibility="hidden";
document.getElementById("txt1").value="";
}
}

pero el resultado es el mismo: siempre prevalecerá el evento onblur sobre cualquier función de selección. Esto es un lío jejeje.....

Raziel_Ravenheart · #15 (**permalink**) 31/08/2011, 08:34

Y necesariamente tienes que utilizar ese código, o puedes utilizar cualquiera? En mi caso estoy utilizando este, para ver como funciona y todo a la perfección, y viendo el código, me di cuenta que la solución q estamos buscando no es tan sencilla de programar, se lleva por ahí unas 20 líneas de código, sabiendo lo que se está haciendo. Creo.

Mi sugerencia es que le des un vistazo a ejemplos que hayan por ahi, o en su defecto utilices uno, en mi caso, me cansé de tratar de programar eso, por que tenía afán y utilicé esta:

http://www.enjoyxstudy.com/javascript/suggest/index.en.html

Prueba a hacer lo que dices en el ejemplo:

http://www.enjoyxstudy.com/javascript/suggest/demo.en/demo1.html

y vemos si podemos adaptarlo, pero por lo que te digo, en este ejemplo añaden y detectan demasiados eventos, para lograrlo.

Si revisas el ejemplo, y el código te darás cuenta que no es tan sencillo, justo ahora lo estoy revisando, pero no se si sirva.

freesoftwarrior · #16 (**permalink**) 31/08/2011, 09:22

Voy a revisar el código y ver si puedo adaptarlo a mi proyecto. Muchas gracias por la sugerencia. Te comento luego luego como resultó.

freesoftwarrior · #17 (**permalink**) 31/08/2011, 10:06

Interesante ejemplo, pero lamentablemente tiene un gran pero: carga los datos localmente y eso no me conviene por 2 razones. Los datos a consultar son muchos, más de 3,000 registros en algunos casos (hablamos por ejemplo de un Plan Contable); el otro es que estaría visible si uno hace un "ver código fuente" y eso definitivamente no conviene.

Sin embargo encontré en el js una línea que me dejó pensando

Código:

this._addEvent(this.input, 'focus', this._bind(this.checkLoop));
this._addEvent(this.input, 'blur', this._bind(this.inputBlur));

Y se me ocurrió (y mientras voy investigando pero dejo la consulta por si las dudas), ¿habrá alguna forma con javascript de poder "capturar" un evento?. Porque si logro "capturar" el evento onblur cuando se de, creo que podré modificar el código del ajax para que se cierre como lo hace cuando se ha seleccionado un elemento.

Muchas gracias

Raziel_Ravenheart · #18 (**permalink**) 31/08/2011, 10:33

Eso es justamente lo que estaba pensando, pero sucede que el evento onblur, se ejecuta, justo cuando un elemento pierde el foco, lo que significa que todavía el foco no a pasado a otro elemento, el único que lo recibe es el body, pero lamentablemente, para toda acción el body del sitio, recibe todos los eventos

, y sería algo desastrozo, sigo pensando.

Es decir, en orden de eventos, el onblur se ejecuta, pero todavía no ha pasado nada, nisiquiera otro elemento a generado el evento onfocus, y por lo tanto no se puede detectar cual elemento tiene el foco con hasFocus. aunque lo intentaré.

Otra cosa que intenté fué document.activeElement, pero tampoco. En cuanto a este ejemplo, solo lo usé un par de veces y hasta ahora, lo estoy estudiando.

Por ahora me ocuparé, pero si alcanzo a ayudarte, mas tarde te respondo.

freesoftwarrior · #19 (**permalink**) 31/08/2011, 10:55

Pues mira que estamos en la misma línea, pues ya me quedó claro que, al menos, la única forma es prescindir del evento onBlur dentro del campo texto para el autocompletar (en mi ejemplo el de ID="txt1") y ver como capturar un evento "click" para que este dispare una función simple (y ya comprobada) de cerrar el div y limpiar el campo de autocompletar.

Porque esa idea de poner una función para hacer el cierre del div con el evento onFocus de los otros campos es viable pues en el formulario solo tengo una funcion llamada resturar() que funciona para un combobox, de modo que cuando se selecciona algo, restablece el listado al primer elemento.

Estoy viendo como hacer una función que cuando haga clic en cualquier parte de la página "capture" ese evento y así poder lanzar la función de cierre.

Mil gracias

freesoftwarrior · #20 (**permalink**) 31/08/2011, 11:18

SOLUCIONADO

Y es ridículamente simple, pero la verdad es que leyendo las respuestas se me prendió el foco (el de la idea pues).

La solución es

Cita:

Y ya no tengo que poner ninguna función en onFocus de otros campos o elementos del Form. Me dio un ataque de risa el ver que la solución fue tan pero tan tan tan tan simple.

Gracias a todos por las ideas que me brindaron, me ayudaron muchísimo.

Un saludo desde Lima, Perú.

PD.
Por cierto, cada vez que quiero publicar algo ahora me aparece una enorme página con un captcha porque dice que detectaron no se que cosa en mi post y por eso la validación. ¿Que es eso?. Porque francamente es bien molestoso. Pero en fin.

Mil gracias