Question

Using jQuery (1.7), and not jQueryUI – (how) would it be possible to accomplish the following?

• Call function 1
• Within function 1, a variable is defined and set to the
  outcome of function 2
• When called, function 2 ‘on the fly’ creates 2 buttons, if
  the first is clicked a value of ‘true’ is returned, the second returns ‘false’
• Within function 1, the variable being set to the outcome of function 2 should wait until there had been user input and a value has been returned
• This value should then be evaluated

Is there any way to do this in jQuery without using an interval/timeout etc to keep looking for an intermediate value being set to the users input?

I’ve outlined the principle below:

function function1(){

    var myVariable=function2;
    // nothing should happen at this point until function2 has returned a response
    if(myVariable){
        alert('true');
    }else{
        alert('false');
    }
}


function function2(){

    var yesbutton=$("<input type='submit' value='yes' />");
    var nobutton=$("<input type='submit' value='no' />");
    $('body').append(yesbutton)
    $('body').append(nobutton)
    nobutton.click(function(){
        return false;
    });
    yesbutton.click(function(){
        return true;
    });

}


function1();

As always, many thanks for any help!

Answer 1

It is possible, just maybe not in the way you expected it to be.

function function1(){

    var myVariable=function2();
    // nothing should happen at this point until function2 has returned a response
    myVariable.done(function(){
        alert('true');
    }).fail(function(){
        alert('false');
    });
}


function function2(){
    var deferred = $.Deferred();

    var yesbutton=$("<input type='submit' value='yes' />");
    var nobutton=$("<input type='submit' value='no' />");
    $('body').append(yesbutton)
    $('body').append(nobutton)
    nobutton.click(deferred.reject);
    yesbutton.click(deferred.resolve);

    return deferred.promise().always(function(){
        yesbutton.add(nobutton).remove();
    });

}


function1();