Foros del Web » Programando para Internet » Javascript »

Funciones Callback - Undefined en variable

Estas en el tema de Funciones Callback - Undefined en variable en el foro de Javascript en Foros del Web. Hola amig@s Un script de PHP retorna o un 1 o un 0 . Con AJAX nativo y "callback functions" capturo ese valor de respuesta ...
  #1 (permalink)  
Antiguo 09/12/2016, 16:59
Avatar de ghidalgoram  
Fecha de Ingreso: marzo-2008
Ubicación: Costa Rica
Mensajes: 446
Antigüedad: 16 años, 2 meses
Puntos: 7
Pregunta Funciones Callback - Undefined en variable

Hola amig@s

Un script de PHP retorna o un 1 o un 0. Con AJAX nativo y "callback functions" capturo ese valor de respuesta (1 o 0).

Todo funciona bien hasta aquí.

El problema es que no he podido asignar ese valor de respuesta a una varible llamada "encontrado". La variable aparece como undefined. Quiero que aparezca 1 o 0, no undefined.


Este es el código.

//Llamada

Código Javascript:
Ver original
  1. var encontrado = foo(function(result){
  2.    console.log(result);
  3. });
  4. console.log(encontrado);


//++++++

Código Javascript:
Ver original
  1. function foo(callback){
  2.     var producto = $("#inpt-producto").val();
  3.  
  4.     var ajax = new XMLHttpRequest();
  5.     var url = "archivo.php";
  6.     var params = "producto=" + producto;
  7.     ajax.open("POST", url, true);
  8.  
  9.  
  10.     ajax.onreadystatechange = function()
  11.    {
  12.         if(ajax.readyState == 4 && ajax.status == 200) {
  13.  
  14.             callback(ajax.responseText);
  15.  
  16.         }
  17.     };
  18.  
  19.     ajax.send(params);
  20. }


Me podríar ayudar e indicar que hace falta para resolver el problema.
Esta es la parte que me hace falta.

Código Javascript:
Ver original
  1. var encontrado = foo(function(result){
  2.    console.log(result);
  3. });
  4. console.log(encontrado);


Gracias de antemano.
__________________
Loading...
  #2 (permalink)  
Antiguo 09/12/2016, 22:24
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Funciones Callback - Undefined en variable

Es lógico que obtengas ese resultado. Es decir, la petición es asíncrona, pero lees el contenido de la variable de forma síncrona, por eso no logras obtener el valor luego de concluida la petición.

Tienes dos soluciones: o lees el valor en la llamada de retorno o usa una promesa, aunque sería algo similar.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 10/12/2016, 07:59
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 8 años, 5 meses
Puntos: 86
Respuesta: Funciones Callback - Undefined en variable

Aunque la llamada síncrona está desactualizada por que se pierde todo el potencial de ajax, cuando hay que usarla, hay que usarla
Código Javascript:
Ver original
  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="es-es">
  3.     <head>
  4.         <title></title>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
  7.         <style>
  8.  
  9.         </style>
  10.         <script>
  11.             function foo() {
  12.  
  13.                 var usuarios = '{"nombre" : ["Juan", "Pedro", "Mária"]}',
  14.                 url = 'enviojson.php',
  15.                 ajax = new XMLHttpRequest(),
  16.                 u = null;
  17.  
  18.                 ajax.open('POST', url, false);
  19.                 ajax.onreadystatechange = function() {
  20.  
  21.                     if (ajax.readyState == 4) {
  22.  
  23.                         if (ajax.status == 200) {  
  24.  
  25.                             u = ajax.responseText;
  26.                         }
  27.                     }
  28.                 }
  29.                 ajax.setRequestHeader('Content-Type','application/json');  
  30.                 ajax.send(usuarios);
  31.                 return u;
  32.             }
  33.  
  34.  
  35.             var encontrado = foo();
  36.  
  37.             console.log(encontrado);
  38.         </script>
  39.     </head>
  40.     <body>
  41.  
  42.     </body>
  43. </html>
enviojson.php
Código PHP:
Ver original
  1. <?php
  2.  
  3. $content = file_get_contents('php://input');
  4. $dec = json_decode($content, true);
  5. sleep(5);
  6. echo $dec['nombre'][1];
  7.  
  8. ?>
  #4 (permalink)  
Antiguo 10/12/2016, 22:55
Avatar de ghidalgoram  
Fecha de Ingreso: marzo-2008
Ubicación: Costa Rica
Mensajes: 446
Antigüedad: 16 años, 2 meses
Puntos: 7
Respuesta: Funciones Callback - Undefined en variable

Hola amigos. Gracias Alexis88 y mpozo.


Si tienen razón. Hay 2 procesos que se ejecutan en tiempos diferentes. Gracias por aclarármelo.

Por otro lado, creo que cometí un error. No haber incluído más detalles del ¿cómo? y ¿por qué? realizo estos procesos. Les mostraré un esquema de mi idea.


Tengo un formulario. El problema está en la validación. Verifico que los campos no estén vacios, formatos de correos, etc. Todo bien hasta ahí.

Problema.
Pero uno de los campos del formulario (requeridos) no puede estar repetido en la base de dato (ese campo de la base de datos es UNIQUE). Por eso necesito saber desde JavaScript si el nombre del producto existe(1) o no(0). Esa es la idea.


"foo" recibe respuesta de PHP. Devuelve si el valor existe o no. Esto lo hace muy bien.
var encontrado = foo(function(result){
return result;
});


Código Javascript:
Ver original
  1. var seguir = true;
  2. if(campo1==""){
  3.  
  4.    var seguir = false;
  5.  
  6. }else
  7. if(encontrado==1){ // tiene "undefined"
  8.     //no continua y muestra mensaje al usuario que ese dato YA existe
  9.     var seguir = false;
  10. }
  11.  
  12. if(seguir){
  13.  
  14.     // Actualizar todos los datos usando otro proceso de Ajax.
  15.     // Envio todos los datos del formulario para ser actualizados en la base de datos.
  16.  
  17.  
  18. }
__________________
Loading...
  #5 (permalink)  
Antiguo 10/12/2016, 23:16
Avatar de ghidalgoram  
Fecha de Ingreso: marzo-2008
Ubicación: Costa Rica
Mensajes: 446
Antigüedad: 16 años, 2 meses
Puntos: 7
Respuesta: Funciones Callback - Undefined en variable

Gracias mpozo. Utilicé el código que me presentaste, lo adapté y funciona.

var producto = $("#inpt-producto").val();



Código Javascript:
Ver original
  1. if(producto!=""){
  2.         encontrado = foo(); // Realiza consulta al servidor. El dato retornado es único y no deben exister 2 o más iguales
  3.     }
  4.  
  5.     if(nombre==""){
  6.          $("#mensajes").html("El campo Nombre está vacio");
  7.          datosValidos = false;
  8.     }else
  9.      if(encontrado==1){
  10.           $("#Mensaje").html("Por favor digite otro producto.");
  11.           $("#inpt-producto").focus();
  12.          datosValidos = false;
  13.     }
  14.  
  15.     ......
  16.     mas validaciones....
  17.     ......
  18.     ......
  19.  
  20.    if(datosValidos){
  21.     //Guardar datos en la BD
  22.   }
  23.  
  24.  
  25.  
  26. function foo()
  27. {
  28.  
  29.     var producto = $("#inpt-producto").val();
  30.     var datos = "producto=" + producto ;
  31.  
  32.     url = 'producto.php',
  33.    
  34.     ajax = new XMLHttpRequest(),
  35.     u = null;
  36.  
  37.     ajax.open('POST', url, false);
  38.     ajax.onreadystatechange = function()
  39.     {
  40.         if (ajax.readyState == 4)
  41.         {
  42.             if (ajax.status == 200){
  43.                 u = ajax.responseText;
  44.             }
  45.         }
  46.     };
  47.  
  48.     ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  49.     ajax.setRequestHeader("Connection", "close");
  50.     ajax.send(datos);
  51.    
  52.     return u;
  53. }


Solo un pequeño detalle. Por el momento la llamada al ser "síncrona". Lo dejaré así por un tiempo.


Mientras investigaba, encontré acerca del método "Deferred Object" de jQuery.
No lo conozco o nunca lo he utilzado. Menciona sobre llamadas asíncronas.

Para el caso que expuse en este foro, había pensado cambiar(probar) la forma de consultar a la BD obtener el valor de "encontrado". Es decir,pasar de AJAX nativo a usar AJAX con jQuery. Nunca he utilizado este método "Deferred Object".
Se aplica a mi caso?

También había encontrado sobre las "Promise", tal como lo menciona @Alexis88

Muchas gracias
saludos
__________________
Loading...
  #6 (permalink)  
Antiguo 11/12/2016, 02:09
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Funciones Callback - Undefined en variable

Si buscas evitar que se ingresen datos existentes en la base de datos, puedes hacer la verificación conforme el usuario vaya llenando los campos y mostrar, a la derecha o debajo del campo, un mensaje en donde se le indique que, el dato que ingresó, existe o no en la base de datos. Para esto podrías apoyarte en eventos que indiquen que se modificó el contenido de un campo de texto, como el evento input:
Código Javascript:
Ver original
  1. input.addEventListener("input", function(){
  2.     //Lanzas la petición asíncrona buscando en la BD el valor ingresado en el <input>
  3. }, false);
Para no sobrecargar al servidor con peticiones, puedes realizarlas cuando la caja de texto pierda el enfoque (evento blur) o cuando se produzca cualquier otro evento.

Con respecto a la información que encontraste sobre el objeto diferido de jQuery, es una implementación que hizo la librería de John Resig y que representa una alternativa cross-browser al objeto Promise de JavaScript. Y no hace falta que eches mano de jQuery para utilizar una promesa; es más sencillo de lo que parece:
Código Javascript:
Ver original
  1. function Ajax(/* parámetros */){
  2.     return new Promise(function(exito, error){
  3.         var xhr = new XMLHttpRequest();
  4.        
  5.         xhr.open(/* método, ruta, asíncrono */);
  6.         xhr.addEventListener("load", function(){
  7.             this.status == 200 && exito(this.textResponse); //En caso de éxito
  8.             [/* códigos de estado HTTP distintos al 200 que indiquen algún problema, como el 404 (recurso no encontrado) */].indexOf(this.status) > -1 && error(this.textStatus); //En caso de error
  9.         }, false);
  10.         xhr.addEventListener("error", function(){
  11.             error(this.textStatus); //En caso de error
  12.         }, false);
  13.         //Otras acciones, como establecer cabeceras
  14.         xhr.send(/* cadena de consulta */);
  15.     });
  16. }
  17.  
  18. var ejemplo = Ajax(/* parámetros */);
  19.  
  20. //Líneas más abajo
  21. ejemplo.then(function(respuesta){ //Caso de éxito
  22.     //Instrucciones
  23. });
  24.  
  25. //Aún más abajo
  26. ejemplo.then(function(respuesta){ //Caso de éxito
  27.     //Instrucciones
  28. });
  29.  
  30. //Todavía más abajo
  31. ejemplo.then(function(respuesta){ //Caso de éxito
  32.     //Instrucciones
  33. }, function(error){
  34.     //Aquí también podemos ver el mensaje de error, en caso haya ocurrido uno
  35. });
  36.  
  37. //Si algo salió mal
  38. ejemplo.catch(function(error){ //Caso de error
  39.     //Instrucciones
  40. });

Como ves, puedes acceder tanto a la respuesta de éxito (todo marchó con normalidad en la petición) como al mensaje de error (en caso haya ocurrido uno), ya sea en la misma línea en la que realizas la petición o más abajo e incluso en más de una ocasión, manteniéndose siempre la respuesta inicial. El objeto diferido de jQuery contiene una promesa que trabaja de una manera muy similar; ya dependerá de ti cuál utilizar.

Un ejemplo en vivo del uso de promesas y procesos asíncronos

NOTA: La implementación nativa, además de la respuesta, sea positiva o negativa, devuelve otra promesa; mientras que, la implementación de jQuery, solo devuelve la respuesta, sea positiva o negativa (al menos hasta antes de la versión 3.0).

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 11/12/2016 a las 15:35 Razón: Ejemplo
  #7 (permalink)  
Antiguo 12/12/2016, 08:05
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 8 años, 5 meses
Puntos: 86
Respuesta: Funciones Callback - Undefined en variable

Cita:
Iniciado por Alexis88 Ver Mensaje
Para no sobrecargar al servidor con peticiones, puedes realizarlas cuando la caja de texto pierda el enfoque (evento blur) o cuando se produzca cualquier otro evento.
Hace un tiempo cree un autocomplete. Una vez finalizado, me di cuenta que realiza demasiadas peticiones, puesto que lo hacía a cada pulsación. Recordé este código y lo apliqué - aumentando el tiempo del temporizador. En un principio no me percaté del problema, pero luego, observé que aparecián opciones que no deberían de estar. Haciendo algunas pruebas, vi que el problema residía en que la última petición (la cadena completa) no se realizaba.
  • 1ª petición --> foro
  • 2ª y última petición --> forosdelw
  • petición que no se realiazada --> forosdelweb

Se ocurrió que en lugar de sobre escribir a null la variable, podía limpiar el temporizador. Y entonces, si obtuve el resultado deseado
  • 1ª petición --> foro
  • 2ª petición --> forosdelw
  • última petición --> forosdelweb

Código Javascript:
Ver original
  1. var keyUpTimeout = 0;
  2.  
  3. if (keyUpTimeout) clearTimeout(keyUpTimeout);
  4.  
  5. keyUpTimeout = setTimeout(function() {
  6.  
  7. // Se realiaza la petición
  8.  
  9. }, 700);
  #8 (permalink)  
Antiguo 12/12/2016, 11:00
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Funciones Callback - Undefined en variable

Es una buena alternativa, porque permite encolar la peticiones. Algo similar hice con un plugin de efectos de una librería que escribí hace unos años; aunque, en lugar de basar el control en el temporizador, utilizaba estados y llamadas de retorno para ejecutar las peticiones conforme vayan acabándose las anteriores (FIFO), utilizando temporizadores para el tema del efecto y limpiándolos al concluir el proceso, así como lo haces tú; sin embargo, la tendencia es que se realicen N peticiones en una misma sesión (no sabemos cuántas veces el usuario hará búsquedas), por lo que el problema persistirá, aunque, claro, ya no en la misma medida. Algo que puede ser determinante, al menos cuando se producen problemas como el de la búsqueda que mencionas, es el evento de teclado que se utiliza. Alguna vez me pasó lo mismo, hasta que empecé a hacer las búsquedas una vez que se haya completado el proceso de pulsación de la tecla y las cosas empezaron a marchar mejor.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: callback, funcion, funciones, php, text, undefined, valor, variable
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 11:45.