Adobe Edge Animate reading a stage variable from within a symbol's action

Question

I'm struggling with this Edge Animate composition for hours:

What i try to create, is a character selection (multiple images), which will trigger a different text message inside a speech bubble (symbol) for each person.

Along with the individual text I also have 2 input fields (select2.js) which reside between the text spans. For that I had to generate the text spans and input fields in the symbol's creationComplete action like this:

    perscontent.html('<span style="font-weight: bold;">'+perstext[0]+'<br></span>'+
                    '<span>'+perstext[1]+'</span>'+
                    '<input id="tech" class="bubbleinput" style="margin-top: 5px" type="text" data-position="top" placeholder="mit der Technologie:"></input>'+
                    '<span>'+perstext[2]+'</span>'+
                    '<input id="probl" class="bubbleinput" style="margin-top: 5px" type="text" data-position="top" placeholder="das Problem/Produkt:"></input>'+
                    '<span>'+perstext[3]+'</span></p> ');

As you can see there is the array variable perstext which takes the values from another array (containing the individual text) depending on the value of the stage variable "perstoggle" which I set in the stage action > compositionReady : sym.setVariable("perstoggle", "pers1select");

► And here is the point where the pain starts! I'm not able to read perstoggle:

    var cur = sym.getComposition().getStage().getVariable("perstoggle");
    console.log( "=> ", cur);

On the console log it displays "undefined"...ANY ADVICE? Thanks alot in advance!

//EDIT On the other hand if I read the perstoggle stage variable from inside the callback function, it suddenly displays the correct value ("pers1text") on the console. But my jquery select2 inputs are not being loaded:

    yepnope({

both: [

                    "select2.min.js",
                    "select2.css",
                    "pagestyle.css"

        ],

    callback: function(){


                    $("#tech").select2(......);

                    $("#probl").select2(.....);

                    var cur = sym.getComposition().getStage().getVariable("perstoggle");
                    console.log( "=> ", cur);

                    switch (cur){
                    case ("pers1select"): var perstext = pers1text;
                    break;

                    default : var perstext = pers2text;
                    }

Answer 1

why not keep it simple?

(simple example)

open the code window in edge animate ( menu -> window > code ) click on stage and add this code:

var perstext;
perstext = "begin"; 
var foo = function() {
   $("#Stage_Rectangle").html('<span style="font-weight:bold;">'+perstext+'</span>');
};// will set the text on div Retan

this will make the function foo that updates the perstext global.

first you need to make it run at the beginning. so to do that add stage > compositionready and add this code:

foo();

this will run the function foo at the beginning

and to change it to something else add a click event on a div or image and just add this code:

perstext = "i changed!";
foo();

and that will change the perstext and update it again through foo();