return within a nested function

Question

I'm using the apprise function, yes to return true and No to returns false I am using this to validate a control with the onclientclick method. The return parameter does not seem to make it back as the function is nested.
Anyone know how I can properly return to the test(e) method

function test(e) {

    apprise('Are you sure you want to add a 12 Month Donation?', { 'verify': true }, 
        function (r) {
        if (r) {
            // user clicked 'Yes'
            apprise("Donation Added");
        }
        else {
            // user clicked 'No'
            return false;

        }
    });       
}

I've edited the java script to what Thomas has recommended but by validation still doesnt seem to work although the JS function above is returning the correct parameters

Here is the edited JS and the asp part. the onclick method never seems to be reached in the new code but the return parameters are correct

OnClientClick ="if (!test()) {return false;}"
onclick="btn12MonthDonate"



function test() {
    function donationAdded() {
        console.log("yes");
        return true;
    };
    function donationNotAdded() {
        console.log("no");
        return false;
    };
    apprise('Are you sure you want to add a 12 Month Donation?', { 'verify': true },
        function (r) {
            if (r) {
                // user clicked 'Yes'
                apprise("Donation Added");
                donationAdded();
            }
            else {
                // user clicked 'No'
                donationNotAdded();

            }
        });
}

@Quentin it is okay, to mark this question as a duplicate. But in the linked thread, the mechanism is not explained. Technically the answers are correct, but not really detailed. — Thomas Junk, Nov 22 '14 at 08:01
@ThomasJunk — You can improve answers or add new ones to existing questions. — Quentin, Nov 22 '14 at 08:34

Sampath Liyanage · Answer 1 · 2014-11-21T23:01:28.383

Actually I think, you shouldn't return. The function you have added a return statement is a callback function. Callback mechanism is an alternative to return mechanism. Instead of returning you can call another function inside the callback function to get things done...

function test(e) {

apprise('Are you sure you want to add a 12 Month Donation?', { 'verify': true }, 
    function (r) {
    if (r) {
        // user clicked 'Yes'
        apprise("Donation Added");
    }
    else {
        // user clicked 'No'
        toBeCalledIfFalse(false);
    }

  }
)};

function toBeCalledIfFalse(){
    //code to handle false
}

Thomas Junk · Accepted Answer · 2014-11-22T22:16:08.407

As plbsam wrote, the apprise-function has a parameter, which is a callback(i.e. a function which is passed as a parameter and is called some point in time).

A typical control flow would be:

function(){
    Step1 ...
    Step2 ... 
    ...
    Step n
    return;
};

That is a synchronous / linear controll flow.

A callback on the other hand facilitates asynchronous control flow:

function(callback){
    Step1 ...
    Step2 ... 
    ...
    callback();
    ...
    Step n
    return;
};

This is suitable for event-driven-Programming: a dialog pops up and the exact moment, when the user made a choice and the result is known, a function is called. Some point in time, the callback is called.

So if you want your control-flow to return to a function, define the part, where it should return in a function:

function(){
    var goOnHere=function(result){

    };
    Step1 ...
    Step2 ... 
    callFunction(goOnHere);
    Step n
    return;
};

function(callback){
    Step1 ...
    Step2 ... 
    ...
    callback(result);
};

So your code could be transformed to:

function test(e) {
    function donationAdded(){
        console.log("yes");
    };
    function donationNotAdded(){
        console.log("no");
    };
    apprise('Are you sure you want to add a 12 Month Donation?', { 'verify': true }, 
        function (r) {
        if (r) {
            // user clicked 'Yes'
            apprise("Donation Added");
            donationAdded();
        }
        else {
            // user clicked 'No'
            donationNotAdded();

        }
    });       
}

For clarity, I explain the further controll flow:

function(){
    var goOnHere=function(result){

       return value; // returns to the calling point
    };
    Step1 ...
    Step2 ... 
    callFunction(goOnHere); //pass flow to call function, which itself calls goOnHere
    Step 3
    return;
};

If you take a look at the flow, it goes from top to bottom:

Step1
Step2
callback of goOnHere
goOnHere returns
since callFunction is a pure call, every return-value is thrown away
Step3
return returns from function

There is no direct way to return a value. It is a oneway.

A possible way out would be MVC-Style programming:

You pass a "Model" to the inner function, which itself has implemented callbacks as "events". So if you know your "result", you set your model in the appropriate state. After that, the model fires a change-event, to which all of its subscribers could react. The details are beyond this thread.

For event-driven-programming you need a diffrent mindset. And at first it is hard to get one's head around the concepts.

thanks Thomas your code is what I was looking for. Unfortunately I still can get this to work. I've added return false for the no part but my onclientclick event is still not validating see above for the asp part — AShah, Nov 22 '14 at 06:48
Your code can not work. The problem is the controll-flow: when you call `donationAdded`, you do it from within the anonymous function passed to `apprise`. If you call `donation added` the flow is passed to the previous defined function `donationAdded`, if the last line of that function is a `return`-statement, the flow returns back to the anonymous function. — Thomas Junk, Nov 22 '14 at 07:44

return within a nested function

2 Answers2