Home / Questions / 20283
Accepted
Oscar E. Alvarado
Asked: 2020-08-12 09:33:20 +0800 CST 2020-08-12 09:33:20 +0800 CST

How can I keep the execution thread in JQuery click event?

  • 772

Good day.

I have a question and a doubt, the detail is as follows:

I am making a custom popup message with two buttons "yes" and "no". What I am trying to do is that this popup returns a response trueor falseaccording to the button that is pressed.

I have a function that builds the popup for me and creates the events clickof these buttons, it also creates a variable where the function will return trueor false. Now, the problem is that this popup is activated from the event clicof a separate button, the event fires and the function that creates the popup is activated, but the event ends there.

When I click the popup buttons they fire their own events and the thread of the previous event is lost, but on the side of the event of the button that opened the popup there is a variable waiting for the response of the message but when the thread is lost it does nothing.

Is there a way to achieve this, to return to the click event of the button that created the popup to take the response from it or is it something that cannot be achieved.

I don't know if I understand myself, it's a bit complicated to explain that, and now imagine looking for help on this on the internet.

PS: I am doing this in 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;
}
javascript

2 Answers

  1. Best Answer

    Use callbacks or promises

    Callbacks

    This is the simplest solution

    $("#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);
    });
}

    promises

    For this you need a library like Q , bluebird or similar. Fortunately jQuery comes with a fairly simple implementation called Deferred Object that can help you.

    $("#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;
}

    Note: You might be tempted to use it defer.rejectto signal when the user chose false but this is a bad idea as it rejectis designed as the error channel so if an exception occurs it may be hard to tell if the user chose falseor there is a mistake somewhere. Using resolve(false)simplifies the problem.

    • 3

  2. Due to the asynchronous nature of javascript, it is not possible to get the value for response_msg.

    These problems are solved using callbacks in the functions, so that when an event occurs, this callback is called.

    Your code should be updated as follows:

    $("#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");
    });
}

    However, passing callbacks can lead to various problems like Callback Hell . I recommend you read about Promises, which make the code much more readable.

    • 1