Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Validación de valores devueltos por AJAX mediante onBlur

Estas en el tema de Validación de valores devueltos por AJAX mediante onBlur en el foro de Jquery en Foros del Web. Saludos a los foreros, paso a explicar mi problema: Tengo un input que valida su valor mediante el evento onBlur. Los valores que puede coger ...
  #1 (permalink)  
Antiguo 19/09/2013, 08:55
 
Fecha de Ingreso: septiembre-2013
Mensajes: 12
Antigüedad: 7 años, 8 meses
Puntos: 1
Pregunta Validación de valores devueltos por AJAX mediante onBlur

Saludos a los foreros, paso a explicar mi problema:

Tengo un input que valida su valor mediante el evento onBlur. Los valores que puede coger este input vienen definidos por una lista devuelta por una respuesta AJAX, lo que se conoce comunmente como una lista de opciones para el autocompletado. Los elementos de la lista devuelta por AJAX tienen una funcion jQuery, concretamente la ".on('click', ..)", que se encarga de enviar el valor de la lista clicado al input que he mencionado al principio y de comprobar si el valor es correcto.

El problema surge cuando, al desplegarse la lista de opciones, clico en una de las opciones para seleccionarla. El input pierde el FOCO y se ejecuta el onBlur, pero las acciones descritas dentro de la funcion ".on('click', ..)" no se ejecutan, dando lugar a una comprobación erronea. Lo curioso es que cuando intento clicar sobre el valor de la lista por segunda vez, entonces sí que funciona.

¿Hay alguna manera de evitar que el foco del input se vaya, para así evitar la ejecución de la comprobación? ¿La funcion ".on.." no funciona con elementos dinámicos?¿Puede que hasta el segundo clic no se cargue correctamente jQuery?

Se que el problema debe ser que el <ul> que viene del AJAX es dinámico y no ejecuta bien la funcion ".on..", pero según los tutoriales y demás foros, esta función es la adecuada para tratar con contenido asíncrono.

Llevo atascado ahí durante horas y me está poniendo de los nervios. He buscado en internet y leído tutoriales sobre el orden de los eventos, pero nada. Necesito ayuda, por favor. Gracias de antemano.

Código HTML:
Ver original
  1. <div>
  2.    <input id="autocompletar" onBlur="compruebaValor(this.id)" onKeyUp="ajaxListaAutocompletar(this.value)">
  3.    <div id="respuesta-ajax">
  4.    Aquí viene, por AJAX, la lista de opciones para autocompletar el input
  5.    </div>
  6. </div>
  7.  
  8. <script type="text/javascript" >
  9. function ajaxListaAutocompletar(){
  10.  
  11.        var ajax=nuevoAjax();
  12.        var respuesta=document.getElementById('respuesta-ajax');
  13.  
  14.        ajax.onreadystatechange=function() {
  15.  
  16.             if (ajax.readyState==1){
  17.                 // Mientras carga...
  18.             }
  19.             if (ajax.readyState==4){
  20.                   respuesta.innerHTML=ajax.responseText;//
  21.        
  22.           $('#id_li-respuestas').on('click', function(){
  23.        
  24.           // funcion que pone el texto en input
  25.           var selectItem = function(that){
  26.             $(that).parent().parent().parent().find('input').val($(that).find('b').html());
  27.             // Borro el cuadro de autocompletar
  28.             $(that).parent().remove();
  29.                 // Compruebo
  30.             compruebaValor('autocompletar');
  31.             $('#autocompletar').focus();
  32.             $('#autocompletar').blur();
  33.           };
  34.        
  35.                  selectItem(this);
  36.                  });
  37.         }
  38. }

Última edición por thorstorm; 19/09/2013 a las 12:16
  #2 (permalink)  
Antiguo 20/09/2013, 07:25
 
Fecha de Ingreso: septiembre-2013
Mensajes: 12
Antigüedad: 7 años, 8 meses
Puntos: 1
Respuesta: Validación de valores devueltos por AJAX mediante onBlur

No tenéis por qué darme la respuesta correcta solamente. Si tenéis alguna sugerencia de cómo solucionarlo o alguna idea, por rara que pueda ser, comentadla por favor. Nunca se sabe lo que me puede llevar a mi o a alguien a solucionarlo..

Gracias
  #3 (permalink)  
Antiguo 27/09/2013, 15:39
 
Fecha de Ingreso: septiembre-2013
Mensajes: 12
Antigüedad: 7 años, 8 meses
Puntos: 1
Respuesta: Validación de valores devueltos por AJAX mediante onBlur

Después de batallar con el problema durante estos días he conseguido arreglarlo. No sé si es la forma más elegante de resolverlo, pero al menos he conseguido que realice su función de la manera que necesito.

Estas dos maneras son equivalentes:
Código Javascript:
Ver original
  1. <div id="contenedor">
  2.    <input id="autocompletar" onBlur="compruebaValor(this.id)" onKeyUp="ajaxListaAutocompletar(this.value)">
  3.    <div id="respuesta-ajax">
  4.       <ul>
  5.          <li id="listado"></li>
  6.       </ul>
  7.    </div>
  8. </div>
  9.  
  10. <script type="text/javascript" >
  11. function ajaxListaAutocompletar(){
  12.  
  13.        var ajax=nuevoAjax();
  14.        var respuesta=document.getElementById('respuesta-ajax');
  15.  
  16.        ajax.onreadystatechange=function() {
  17.  
  18.             if (ajax.readyState==1){
  19.                 // Mientras carga...
  20.             }
  21.             if (ajax.readyState==4){
  22.               respuesta.innerHTML=ajax.responseText;
  23.        
  24.               $('#contenedor').on('mousedown', '#listado', function(){
  25.                  var that=$(this);
  26.                 // funcion que pone el texto en input
  27.                 var selectItem = function(that){
  28.                    $(that).parent().parent().parent().find('input').val($(that).find('b').html());
  29.                    // Borro el cuadro de autocompletar
  30.                    $(that).parent().remove();
  31.                   };
  32.        
  33.                  selectItem(that);
  34.               });
  35.            }
  36. }
  37. </script>

Código Javascript:
Ver original
  1. <div id="contenedor">
  2.    <input id="autocompletar" onBlur="compruebaValor(this.id)" onKeyUp="ajaxListaAutocompletar(this.value)">
  3.    <div id="respuesta-ajax">
  4.       <ul>
  5.          <li id="listado"></li>
  6.       </ul>
  7.    Aquí viene, por AJAX, la lista de opciones para autocompletar el input
  8.    </div>
  9. </div>
  10.  
  11. <script type="text/javascript" >
  12. function ajaxListaAutocompletar(){
  13.  
  14.        var ajax=nuevoAjax();
  15.        var respuesta=document.getElementById('respuesta-ajax');
  16.  
  17.        ajax.onreadystatechange=function() {
  18.  
  19.             if (ajax.readyState==1){
  20.                 // Mientras carga...
  21.             }
  22.             if (ajax.readyState==4){
  23.               respuesta.innerHTML=ajax.responseText;
  24.            }
  25. }
  26. $(document).ready(function(){
  27.             $('#contenedor').on('mousedown', '#listado', function(){
  28.                  var that=$(this);
  29.                 // funcion que pone el texto en input
  30.                 var selectItem = function(that){
  31.                    $(that).parent().parent().parent().find('input').val($(that).find('b').html());
  32.                    // Borro el cuadro de autocompletar
  33.                    $(that).parent().remove();
  34.                   };
  35.        
  36.                  selectItem(that);
  37.               });
  38. });
  39. </script>

Explicación: Me di cuenta de que el foco se iba del input, ejecutando el onBlur, cuando soltaba el botón del ratón. Ejecutándolo en base al 'mousedown' ya no hace falta la comprobación del valor dentro de la función. Aclarar que en la función '.on(...', cuando se define para eventos que se propagan, debe indicarse dónde se quiere originar el evento (#listado) y hasta dónde se puede propagar (#contenedor).

¡A los usuarios que entiendan español!

Etiquetas: eventos, focus, javascript, jquery-ajax, onblur
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:40.