3

Buen día.

Tengo una pregunta y una duda, el detalle es el siguiente:

Estoy realizando un mensaje popup personalizado con dos botones "si" y "no". Lo que intento realizar es que este popup me devuelva una respuesta true o false de acuerdo al botón que se presione.

Tengo una función que me construye el popup y crea los eventos click de estos botones, ademas crea una variable donde la función retornará true o false. Ahora, el problema es que este popup lo activo desde el evento clic de un botón aparte, el evento se dispara y se activa la función que crea el popup pero ahí termina el evento.

Cuando le doy clic a los botones del popup disparan sus propios eventos y se pierde el hilo del evento anterior, pero del lado del evento del botón que abrió el popup esta una variable esperando la respuesta del mensaje pero al perder el hilo no hace nada.

Hay alguna manera de lograr esto, de regresar al evento click del botón que creo el popup para tomar la respuesta de este o es algo que no se puede lograr.

No se si me dejo entender, es un poco complicado explicar eso, y ahora imagínense buscar ayuda sobre esto en internet.

PD: Estoy realizando esto en JQuery.

$("#next-wizard").on("click", function(){
        var div_active = $(".active");
        if(validate_step(div_active)){          

            response_msg = msg_box_popup("¿cual es tu respuesta?");
            if(response_msg == true){               
                //hago algo.
            }else{              
                //hago algo tambien.                        
            }
        }
    });


function msg_box_popup(txt_msg){    
    var response = true;
    var msg_box = $(".msg-box");
    msg_box.parent().removeClass("hidden");
    msg_box.find(".text-msg .msg").html(txt_msg);

    msg_box.find("#btn_accept").on("click",function(){
        response = true;
        msg_box.parent().addClass("hidden");

    });

    msg_box.find("#btn_deneg").on("click",function(){
        response = false;
        msg_box.parent().addClass("hidden");
    });

   return response;
}

2 respuestas 2

3

Usa callbacks o promesas

Callbacks

Esta es la solución más simple

$("#next-wizard").on("click", function(){
    var div_active = $(".active");
    if(validate_step(div_active)) { 

        // En lugar de esperar un retorno pasas una función por parámetros

        msg_box_popup("¿cual es tu respuesta?", function(response_msg) {
            if(response_msg == true){               
                //hago algo.
            }else{              
                //hago algo tambien.                        
            }
        });            
    }
});

function msg_box_popup(txt_msg, callback){    
    var msg_box = $(".msg-box");
    msg_box.parent().removeClass("hidden");
    msg_box.find(".text-msg .msg").html(txt_msg);

    msg_box.find("#btn_accept").on("click",function(){
        msg_box.parent().addClass("hidden");
        // Ejecutas el callback pasando el valor aceptado (true)
        callback(true);
    });

    msg_box.find("#btn_deneg").on("click",function(){
        msg_box.parent().addClass("hidden");
        // Ejecutas el callback pasando el valor denegado (false)
        callback(false);
    });
}

Promesas

Para esto necesitas una librería como Q, bluebird u otra similar. Afortunadamente jQuery trae una implementación bastante simple a la que llaman Deferred Object que te puede servir.

$("#next-wizard").on("click", function(){
    var div_active = $(".active");
    if(validate_step(div_active)) { 

        // En lugar de esperar un valor por retorno, retornas una promesa y esperas el resultado usando un metodo then

        msg_box_popup("¿cual es tu respuesta?").then(function(response_msg) {
            if(response_msg == true){               
                //hago algo.
            }else{              
                //hago algo tambien.                        
            }
        });            
    }
});

function msg_box_popup(txt_msg, callback){  
    // Creas la promesa
    var defer = $.Deferred(); 
    var msg_box = $(".msg-box");
    msg_box.parent().removeClass("hidden");
    msg_box.find(".text-msg .msg").html(txt_msg);

    msg_box.find("#btn_accept").on("click",function(){
        msg_box.parent().addClass("hidden");
        // Resuelves la promesa con el valor aceptado (true)
        defer.resolve(true);
    });

    msg_box.find("#btn_deneg").on("click",function(){
        msg_box.parent().addClass("hidden");
        // Resuelves la promesa con el valor denegado (false)
        defer.resolve(false);
    });

    // La devuelves para que puedas agregarle un método then
    return defer;
}

Nota: Quizás te veas tentado a usar defer.reject para señalizar cuando el usuario escogió false pero esto es una mala idea ya que el reject está diseñado como el canal de error por lo que si ocurre una excepción te puede resultar dificil distinguir si el usuario escogio false o hay un error en algún lugar. Usar resolve(false) simplifica el problema.

2
  • Excelente ejemplo de la promesa ayer que anduve indagando buscando un ejemplo nomas no entendí :D, con esto y bastante sencillo se simplifica la cosa
    – JuankGlezz
    Commented el 11 ago. 2016 a las 17:53
  • @JuankGlezz Gracias. Usualmente debes escoger callbacks cuando el problema a resolver es sencillo y se debe hacer con la notación function(error, result) si quieres manejar errores (el OP no lo solicitó por eso no lo incluí). Si ya estas usando promesas en otra parte del código o tienes mucho anidamiento entonces las promesas son la solución ideal.
    – devconcept
    Commented el 11 ago. 2016 a las 18:01
1

Debido a la naturaleza asíncrona de javascript, no es posible obtener el valor para response_msg.

Estos problemas se solucionan utilizando callbacks en las funciones, de forma tal que cuando ocurra algún evento, sea llamado este callback.

Tu código debiese ser actualizado de la siguiente forma:

$("#next-wizard").on("click", function(){
        var div_active = $(".active");
        if(validate_step(div_active)){          

            // Le paso una función callback, la cual será llamada cuando ocurra el evento de click en el boton
            msg_box_popup("¿cual es tu respuesta?", function(response_msg) {
                if(response_msg == true) {               
                    //hago algo.
                } else {              
                    //hago algo tambien.                        
                }
            });
        }
    });


function msg_box_popup(txt_msg, callback){    
    var msg_box = $(".msg-box");
    msg_box.parent().removeClass("hidden");
    msg_box.find(".text-msg .msg").html(txt_msg);

    msg_box.find("#btn_accept").on("click",function() {
        callback(true); // llamo al callback con la response
        msg_box.parent().addClass("hidden");

    });

    msg_box.find("#btn_deneg").on("click",function() {
        callback(false); // llamo al callback con la response
        msg_box.parent().addClass("hidden");
    });
}

De todas formas, el paso de callbacks puede llevar varios problemas como Callback Hell. Te recomiendo leer sobre Promises, las cuales hacen mucho más legible el código.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.