JQuery: varias funciones consecutivas

[Iranio]

Hola,

Soy novato en Javascript y JQuery y tengo un problema que no consigo solucionar.
Pido vuestra ayuda.

Tengo un script JQuery en el que, a la pulsación de cada tecla, quiero que se ejecuten varias funciones consecutivamente (la primera cargará con un valor un input y la segunda copiará ese valor en otro input)
Ejemplo:

Código:

$(document).ready(function() {

   function primera(){
      var valor = 23;
      $.get('carga_datos.php, {variable: valor}, function(dato1){
          $('.dato1').val(dato1);
      });

   function segunda(){
       var dato1 = $('.dato1').val();
       $('.dato2').val(dato1);
   }

   $('.accion').bind('keyup', function(){
	primera();
        segunda();
    });
...

Cuando se pulsa y se suelta una tecla sobre el input con class='accion' , en el input con class='dato1' se carga el valor correspondiente.
El problema es que primera() se ejecuta bien, pero segunda() no.
segunda() no puede recuperar el valor que hay en el input con class='dato1'
Parece como si no le diese tiempo a recuperar lo que hay en el input.

Sin embargo, juntando todo en una única función, todo va bien.

Es como si en:

Código:

 $('.accion').bind('keyup', function(){
    primera();
        segunda();
    });

segunda() intentase ejecutarse antes de haber acabado primera() de escribir en el input.

¿Es esto así?.
¿Hay solución (aparte de hacer una única función)?
Gracias anticipadas.

Un saludo

[tredio]

recuerda que estas usando ajax, y este no sigue el flujo normal de ejecucion del codigo, lo mas probable es que intentes copiar el valor antes de que el ajax se haya completado, puedes tratar haciendo algo asi:

Código Javascript:

function primera(callback){
      var valor = 23;
      $.get('carga_datos.php, {variable: valor}, function(dato1){
          $('.dato1').val(dato1);
          callback();
      });
 
   function segunda(){
       var dato1 = $('.dato1').val();
       $('.dato2').val(dato1);
   }
 
   $('.accion').bind('keyup', function(){
    primera(segunda);
    });
 

[Iranio]

Hola,

Desconocía el "callback".
Ya me estoy poniendo al día de ese tema.

Muchas gracias, Tredio, por tu ayuda.

Saludos

[tredio]

lo que se esta haciendo es pasar como parametro otra funcion, si lo pillas?, asi se logra lo que quieres hacer, no necesariamente se tiene que llamar callback, como cualquier otro parametro el nombre es indiferente.

espero me haya sabido explicar, saludos.

[Iranio]

Hola,

Creo que te has explicado muy bien.
El problema posiblemente es que aún no lo he entendido correctamente, porque no consigo que me funcione.

Mi script está en un formulario y hace lo siguiente:

Código Javascript:

$(document).ready(function() {
 
    function cambio_proveedor(callback){
        var id_proveedor = $('.id_proveedor option:selected').val();
        // Llamamos a carga_dtos_proveedor.php
        $.get('carga_dtos_proveedor.php', {id_proveedor: id_proveedor}, function(datos){
            // Pinta dtos de proveedor
            $('.dto_proveedor_1').val(datos.dto_1);
            $('.dto_proveedor_2').val(datos.dto_2);
            $('.dto_proveedor_3').val(datos.dto_3);
        },'json');
        callback();
    }
 
    function coste_final(){
        var tarifa_compra = $('.tarifa_compra').val();
        var dto_proveedor_1 = $('.dto_proveedor_1').val();
        var dto_proveedor_2 = $('.dto_proveedor_2').val();
        var dto_proveedor_3 = $('.dto_proveedor_3').val();
        var dto_1 = $('.dto_1').val();
        var dto_2 = $('.dto_2').val();
        var dto_3 = $('.dto_3').val();
        var dto_ajuste = $('.dto_ajuste').val();
        var punto_verde = $('.punto_verde').val();
        // Obtenemos coste_final y lo pintamos
        $.get('carga_coste_final.php', {tarifa_compra: tarifa_compra, dto_proveedor_1: dto_proveedor_1, dto_proveedor_2: dto_proveedor_2, dto_proveedor_3: dto_proveedor_3, dto_1: dto_1, dto_2: dto_2, dto_3: dto_3, dto_ajuste: dto_ajuste, punto_verde: punto_verde}, function(coste_final){
            $('.coste_final').val(coste_final);
        });
    }
 
    // Cálculo a la carga de la página
    $(window).bind('load', function(){
        cambio_proveedor(coste_final);
    });
 
});
 

Tengo un select donde se escoge un proveedor.
Un script en PHP (carga_dtos_proveedor.php) recupera los valores de descuentos de ese proveedor (dto_proveedor_1, dto_proveedor_2, ...)

En el apartado "Cálculo a la carga de la página" hago que se ejecuten sucesivamente las funciones cambio_proveedor() y coste_final()

La primera se ejecuta correctamente y en el formulario se ven los datos de descuentos recuperados.

Pero la segunda función, coste_final(), no consigue recuperar los datos de los campos input de los descuentos.

Por las múltiples pruebas realizadas parece que es un problema de tiempo entre la primera y segunda función.

Y no acabo de entenderlo porque creo que he puesto bien las llamadas al callback.

Si podéis echarme una mano, se agradece.

Saludos

[mayid]

Estas seguro de que se puede pasar el nombre de una funcion como parametro?

Código Javascript:

function cambio_proveedor(callback){
...
 callback();
 
...
}
 
$(window).bind('load', function(){
        cambio_proveedor(coste_final);
    });
 

A menos que tengas una muy buena razon para eso, mejor llamar a las funciones por su nombre.

Por cierto: que te dice firebug?

[Iranio]

Hola,

Sí. Leí en [URL="http://www.cristalab.com/tutoriales/tutorial-de-jquery-c214l"]www.cristalab.com/tutoriales/tutorial-de-jquery-c214l[/URL] que podía hacerse:
"Nota: La funcion debe colocarse sin los parentesis y sin comillas "

El Firebug no indica error alguno del script.

Y he comprobado que si hago un retardo, mediante un alert(), al comienzo de la segunda función, todo va bien.
Por lo que todo parece indicar que hay un problema y cuando se ejecuta la segunda función aún no ha acabado la primera.

Saludos

[tredio]

Iniciado por mayid

Estas seguro de que se puede pasar el nombre de una funcion como parametro?

estoy muy seguro que puede hacerce. y por otro lado no te funciona Iranio por que la estas colocando en el sitio incorrecto, seria asi

Código Javascript:

function cambio_proveedor(callback){
        var id_proveedor = $('.id_proveedor option:selected').val();
        // Llamamos a carga_dtos_proveedor.php
        $.get('carga_dtos_proveedor.php', {id_proveedor: id_proveedor}, function(datos){
            // Pinta dtos de proveedor
            $('.dto_proveedor_1').val(datos.dto_1);
            $('.dto_proveedor_2').val(datos.dto_2);
            $('.dto_proveedor_3').val(datos.dto_3);
            callback();
        },'json');
       
    }
 

[Iranio]

Hola,

¡¡¡¡ Bieeeennnn !!!!
Ya me funciona.
Muchas gracias Tredio.
Llevaba varios días con el tema y no conseguía resolverlo.

El error, como muy bien dices, era la colocación de callback();

Ahora tengo una duda más:
Si al acabar la función 1, se quiere ejecutar la función2 y al acabar la función 2, la función 3 ¿Cómo habría que hacer la llamada?
He probado con:
funcion_1(funcion_2(funcion_3));
Pero me da error.

¿Podrías ayudarme de nuevo con eso?
Gracias anticipadas.

Saludos

[Iranio]

Hola,

Otra duda sobre el mismo tema.

Tengo 3 funciones que no precisan parámetros y quiero que al hacer click sobre un elemento del formulario se ejecuten las 3 sucesivamente.
¿Debería servir?:

Código Javascript:

$('.elemento').click(function(){
    funcion_1(function(){
        funcion_2(function(){
            funcion_3();            
        }); 
    }); 
});
 

Se me ejecutan bien las funciones 1 y 2, pero no la 3.
¿Donde está el error?
Gracias anticipadas por vuestra ayuda.

Saludos

[tredio]

pon el codigo a ver como lo estas haciendo.

[mayid]

En principio, las llamadas van en los callbacks. Pero si la función retornara true/false, podrías hacer:

Código Javascript:

if( foo1() )
   if (foo2())
      foo3;
 

[Iranio]

Iniciado por tredio

pon el codigo a ver como lo estas haciendo.

Hola,

Son 3 funciones independientes, cambio_proveedor(), coste_final() y tarifas() .
Son sin entrada de parámetros y sin el "callback".
La llamada es así:

Código Javascript:

$('.id_proveedor').change(function(){
   cambio_proveedor(function(){
      coste_final(function(){
         tarifas();
      });       
   });  
});
 

Se ejecutan consecutivamente bien las dos primeras, pero no la tercera.

Gracias.

Saludos

[Iranio]

Iniciado por mayid

En principio, las llamadas van en los callbacks. Pero si la función retornara true/false, podrías hacer:

Código Javascript:

if( foo1() )
   if (foo2())
      foo3;
 

Hola,

Estoy intentando no usar lo del callback porque uso las mismas funciones, también, de forma aislada desde otras llamadas.

Gracias.

Saludos

[mayid]

Estoy intentando no usar lo del callback porque uso las mismas funciones, también, de forma aislada desde otras llamadas.

Eso no afectaría en nada a las demás llamadas. A menos que necesites retornar otra cosa que true / false.

[Iranio]

Hola,

Como el problema se prolongaba, lo he resuelto de otra forma que, aunque menos elegante, funciona correctamente.
He hecho una función que engloba las anteriores.
De todas formas, seguiré estudiando, más adelante el tema para ver si puede mejorarse.

Muchas gracias Tredio y Mayid por vuestra ayuda.

Saludos

[tredio]

hola que tal, si quieres pones el codigo de las tres funciones, a eso me referia, para ver de que forma se podria colocar. saludos.

[mayid]

Bueno, si es por seguir investigando nomás... esto me llegó hoy en un boletin. Se trata de efectos encadenados:

http://www.desarrolloweb.com/articul...os-jquery.html
http://www.desarrolloweb.com/articul...a-efectos.html

El segundo link en particular trata sobre el queue en jQuery. No se como funciona, pero sirve para encadenar...

[Iranio]

Iniciado por mayid

Bueno, si es por seguir investigando nomás... esto me llegó hoy en un boletin. Se trata de efectos encadenados:

[url]http://www.desarrolloweb.com/articulos/colas-efectos-jquery.html[/url]
[url]http://www.desarrolloweb.com/articulos/metodo-queue-acceder-cola-efectos.html[/url]

El segundo link en particular trata sobre el queue en jQuery. No se como funciona, pero sirve para encadenar...

Hola,

Muchas gracias, Mayid, pero ya había leído esos dos artículos.
Pero no me había aclarado (mis conocimientos de Javascript son muy escasos)

Saludos

[Iranio]

Iniciado por tredio

hola que tal, si quieres pones el codigo de las tres funciones, a eso me referia, para ver de que forma se podria colocar. saludos.

Hola,

Muchas gracias Tredio por tu oferta.
Las funciones son:

Código Javascript:

function cambio_proveedor(){
        var id_proveedor = $('.id_proveedor option:selected').val();
        // Llamamos a carga_dtos_proveedor.php
        $.get('carga_dtos_proveedor.php', {id_proveedor: id_proveedor}, function(datos){
            // Pinta dtos de proveedor
            $('.dto_proveedor_1').val(datos.dto_1);
            $('.dto_proveedor_2').val(datos.dto_2);
            $('.dto_proveedor_3').val(datos.dto_3);
        },'json');
    }
 
    function coste_final(){
        var tarifa_compra = $('.tarifa_compra').val();
        var dto_1 = $('.dto_1').val();
        var dto_2 = $('.dto_2').val();
        var dto_3 = $('.dto_3').val();
        var dto_ajuste = $('.dto_ajuste').val();
        var punto_verde = $('.punto_verde').val();
        // Obtenemos coste_final y lo pintamos
        $.get('carga_coste_final.php', {tarifa_compra: tarifa_compra, dto_proveedor_1: datos.dto_1, dto_proveedor_2: datos.dto_2, dto_proveedor_3: datos.dto_3, dto_1: dto_1, dto_2: dto_2, dto_3: dto_3, dto_ajuste: dto_ajuste, punto_verde: punto_verde}, function(coste_final){
            $('.coste_final').val(coste_final);
                });
    }
 
    function tarifas(){
        var coste_final = $('.coste_final').val();
        var margen_1 = $('.margen_1').val();
        var margen_2 = $('.margen_2').val();
        // Obtenemos tarifa_1 y la pintamos
        $.get('carga_tarifa.php', {coste_final: coste_final, margen: margen_1}, function(tarifa_1){
            $('.tarifa_1').val(tarifa_1);
        });
        // Obtenemos tarifa_2 y la pintamos
        $.get('carga_tarifa.php', {coste_final: coste_final, margen: margen_2}, function(tarifa_2){
            $('.tarifa_2').val(tarifa_2);
        }); 
    }
 

El tema es poder llamar independientemente a 1, 2 ó 3 funciones encadenadas de forma que cuando se ejecute una ya haya acabado la anterior.

Saludos

[tredio]

hola. prueba con algo asi y me cuentas.

Código Javascript:

function cambio_proveedor(callback){
        var id_proveedor = $('.id_proveedor option:selected').val();
        // Llamamos a carga_dtos_proveedor.php
        $.get('carga_dtos_proveedor.php', {id_proveedor: id_proveedor}, function(datos){
            // Pinta dtos de proveedor
            $('.dto_proveedor_1').val(datos.dto_1);
            $('.dto_proveedor_2').val(datos.dto_2);
            $('.dto_proveedor_3').val(datos.dto_3);
            callback();
        },'json');
    }
 
    function coste_final(callback){
        var tarifa_compra = $('.tarifa_compra').val();
        var dto_1 = $('.dto_1').val();
        var dto_2 = $('.dto_2').val();
        var dto_3 = $('.dto_3').val();
        var dto_ajuste = $('.dto_ajuste').val();
        var punto_verde = $('.punto_verde').val();
        // Obtenemos coste_final y lo pintamos
        $.get('carga_coste_final.php', {tarifa_compra: tarifa_compra, dto_proveedor_1: datos.dto_1, dto_proveedor_2: datos.dto_2, dto_proveedor_3: datos.dto_3, dto_1: dto_1, dto_2: dto_2, dto_3: dto_3, dto_ajuste: dto_ajuste, punto_verde: punto_verde}, function(coste_final){
            $('.coste_final').val(coste_final);
            callback();
                });
    }
 
    function tarifas(){
        var coste_final = $('.coste_final').val();
        var margen_1 = $('.margen_1').val();
        var margen_2 = $('.margen_2').val();
        // Obtenemos tarifa_1 y la pintamos
        $.get('carga_tarifa.php', {coste_final: coste_final, margen: margen_1}, function(tarifa_1){
            $('.tarifa_1').val(tarifa_1);
        });
        // Obtenemos tarifa_2 y la pintamos
        $.get('carga_tarifa.php', {coste_final: coste_final, margen: margen_2}, function(tarifa_2){
            $('.tarifa_2').val(tarifa_2);
        }); 
    }
 

las anidarias de esta manera:

Código Javascript:

cambio_proveedor(function(){
    coste_final(tarifas);
});
 

como te dije, prueba y me cuentas, no estoy seguro de si es asi.

[Iranio]

Iniciado por tredio

hola. prueba con algo asi y me cuentas.
...
las anidarias de esta manera:

Código Javascript:

cambio_proveedor(function(){
    coste_final(tarifas);
});
 

como te dije, prueba y me cuentas, no estoy seguro de si es asi.

Hola,

Tengo algunas dudas:
Si en lugar de 3 funciones, son 5, 7, ... ¿cómo haría para llamarlas de forma encadenada?
¿Puedo llamar a una de esas funciones, independientemente, sin enviar ningún parámetro, a pesar de que esperen el parámetro callback?
Gracias.

Saludos

[tredio]

seria muy parecido, pero no me dijiste si te sirvio de esa manera jeje, si son mas de 3 seria algo asi.

Código Javascript:

funcion_1(function(){
    funcion_2(function(){
        funcion_3(funcion_4);
    });
});
 

siguiendo esa estructura, otra cosa que no entiendo es para que lo haces asi, si ya sabes cual es el nombre de las funciones que vas a usar y siempre lo haces con la misma, por que no haces algo asi:

Código Javascript:

function cambio_proveedor(){
        var id_proveedor = $('.id_proveedor option:selected').val();
        // Llamamos a carga_dtos_proveedor.php
        $.get('carga_dtos_proveedor.php', {id_proveedor: id_proveedor}, function(datos){
            // Pinta dtos de proveedor
            $('.dto_proveedor_1').val(datos.dto_1);
            $('.dto_proveedor_2').val(datos.dto_2);
            $('.dto_proveedor_3').val(datos.dto_3);
            coste_final();
        },'json');
    }
 
    function coste_final(){
        var tarifa_compra = $('.tarifa_compra').val();
        var dto_1 = $('.dto_1').val();
        var dto_2 = $('.dto_2').val();
        var dto_3 = $('.dto_3').val();
        var dto_ajuste = $('.dto_ajuste').val();
        var punto_verde = $('.punto_verde').val();
        // Obtenemos coste_final y lo pintamos
        $.get('carga_coste_final.php', {tarifa_compra: tarifa_compra, dto_proveedor_1: datos.dto_1, dto_proveedor_2: datos.dto_2, dto_proveedor_3: datos.dto_3, dto_1: dto_1, dto_2: dto_2, dto_3: dto_3, dto_ajuste: dto_ajuste, punto_verde: punto_verde}, function(coste_final){
            $('.coste_final').val(coste_final);
            tarifas();
                });
    }
 
    function tarifas(){
        var coste_final = $('.coste_final').val();
        var margen_1 = $('.margen_1').val();
        var margen_2 = $('.margen_2').val();
        // Obtenemos tarifa_1 y la pintamos
        $.get('carga_tarifa.php', {coste_final: coste_final, margen: margen_1}, function(tarifa_1){
            $('.tarifa_1').val(tarifa_1);
        });
        // Obtenemos tarifa_2 y la pintamos
        $.get('carga_tarifa.php', {coste_final: coste_final, margen: margen_2}, function(tarifa_2){
            $('.tarifa_2').val(tarifa_2);
        }); 
    }
 

¿Puedo llamar a una de esas funciones, independientemente, sin enviar ningún parámetro, a pesar de que esperen el parámetro callback?

si se puede pero de la forma en que esta ahorita daria error para que no suceda eso tendrias que validar que la funcion existe, es decir que el valor del callback sea diferente de null, podria ser algo asi:

Código Javascript:

if(callback){callback();}
 

claro asi no asegurariamos que el parametro sea una funcion, para eso creo que puedes usar el tipeof investiga algo sobre eso.

saludos.

[Iranio]

Iniciado por tredio

...siguiendo esa estructura, otra cosa que no entiendo es para que lo haces asi, si ya sabes cual es el nombre de las funciones que vas a usar y siempre lo haces con la misma, por que no haces algo asi:...

Hola,

No puedo hacer que desde dentro de una de las funciones se llame a otra porque hay otros eventos que deben disparar sólo una de esas funciones.

Tengo que estudiar más sobre Javascript y JQuery
(Hasta ahora sólo he manejado PHP)
A ver si cuando acabe el desarrollo actual para mi cliente puedo dedicar un tiempo a ello.

Da gusto encontrar a personas dispuestas a ayudar.
Muchas gracias por todo.

Saludos

[tredio]

tranquilo amigo espero te vaya bien. saludos.

[mayid]

No puedo hacer que desde dentro de una de las funciones se llame a otra porque hay otros eventos que deben disparar sólo una de esas funciones.

Mira, podes usar las mismas funciones para diferentes cosas, y ponerles condicionales:

Código Javascript:

function muestra(evaluador){
 
tatata..tatata...
if(evaluador) segunda_funcion();
}
 

Ahora las llamadas:

Código Javascript:

muestra(true); // esta va a encadenar
 
..
 
muestra(false);// esta no va a encadenar
 

Volviendo a mi propuesta, de encadenar una tras otras las llamadas a la función y retornar true/false: el perfectamente viable, pero si no te convence entonces bueno, será en un futuro.

[Iranio]

Iniciado por mayid

Mira, podes usar las mismas funciones para diferentes cosas, y ponerles condicionales:

Código Javascript:

function muestra(evaluador){
 
tatata..tatata...
if(evaluador) segunda_funcion();
}
 

Ahora las llamadas:

Código Javascript:

muestra(true); // esta va a encadenar
 
..
 
muestra(false);// esta no va a encadenar
 

Volviendo a mi propuesta, de encadenar una tras otras las llamadas a la función y retornar true/false: el perfectamente viable, pero si no te convence entonces bueno, será en un futuro.

Hola,

Ya veo: es pasarle como parámetro si debe ejecutar o no la siguiente función.
Es una solución muy sencilla pero elegante.
Muchas gracias Mayid.

Saludos