4 Replies Latest reply on Oct 31, 2012 1:28 PM by blackBoxed

    Referencing a parent symbol from an html form element

    blackBoxed

      Hello. Kind of new to Edge here. And I am wondering what I wrote in the title is possible to do. Feels like it should be, but I can't seem to get it to work. A <form> element was appended inside a div using html(). This div is inside a symbol, which is what I want it to play at .submit() of the form element.

       

      First I created the form by doing:

       


      $(this).html('<form id="formWrap" class="html_form" action="#"></form>');

      (and then some html input elements were appended inside of it)

       

      On .submit() of this element I wanted its parent symbol to play, so on the parenting symbol's Timeline.play (initially tried on creationComplete, but did not work), I wrote this function that look something like this:

       

      $(".html_form").submit(function(){

            if(true){

                sym.getParentSymbol().play();

                return true;

          }

          else{return false;}

      });

       

      And the symbol do not respond. The above is simplified version of what I actually have, and the form.submit() fuction seems to work okay; it responces to my input as expected. Just can't play() its parenting symbol. To be honest, I am not entirely sure exactly what I grab if I do .getParentSymbol() from $(".html_form")...I tried .getParentSymbol().getParentSymbol() as well, since sym.$(this).parent().parent() seems to grab the symbol I intended to play.

       

      Also, in case you are wondering why I am not writing this on document.compositionReady, it is because I wanted this function to be "bundled" up with the symbol, so that it will be like a component I can copy around other Edge documents. I don't know if this is a good solution though; I am still finding my way around Edge.

        • 1. Re: Referencing a parent symbol from an html form element
          TimJaramillo Level 4

          Hi there, there are a few threads that discuss this, you can also reference the API doc for more info.

           

          To reduce confusion, rather than targetting your symbol via parent, you can use sym.getComposition().getStage() to go up to the Stage, then use getSymbol() to get back down to your symbol. This is assuming that "your_symbol" is on the root stage, and you have a label called "in" on that symbol's timeline.

           

          sym.getComposition().getStage().getSymbol("your_symbol"). play("in");

           

          References:

          http://forums.adobe.com/message/4743921#4743921

          http://forums.adobe.com/thread/1091251?tstart=0

          http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html

          • 2. Re: Referencing a parent symbol from an html form element
            blackBoxed Level 1

            Ah, I forgot to mention that I do not wish to hard code anything. I am aware of that method, and I can get the symbol to play that way indeed, but the parenting symbol is expected to be copied multiple times, and I did not want to rely on the symbol name for the code to work correctly. This is why I was trying to get the parents instead. Is this even possible...? ):

             

            But thanks for your reply!

            • 3. Re: Referencing a parent symbol from an html form element
              TimJaramillo Level 4

              Gotcha.

               

              Without having the files on hand, it's a bit hard to debug, but it seems that this:

               

              sym.getParentSymbol().getParentSymbol().play("in");

               

              ... should play the symbol you want. I ran a test with the structure below, and it's working for me.

               

              Stage/symbol_1/symbol_2/symbol_3

               

              Also note that if the timeline of the symbol you want to play has "Autoplay" unchecked, I've found you need to either play from a label play("in"), or use play(0);,  as play(); on it's own doesn't play the timeline.

               

              Inside of "symbol_3", I have a shape with a click event that calls the above code, and it successfully plays the timeline of "symbol_1".

               

              I'm a bit confused about where you are putting the "submit" function. Rather than putting it on the symbol's play function, I think in your case, the best practice might be to add the function via the "setVariable" method. See the API docs: http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html

               


              • 4. Re: Referencing a parent symbol from an html form element
                blackBoxed Level 1

                Hello again Tim,

                 

                That's pretty cool. I didn't know I can set a function as a variable! Unfortunately, I am not quite getting the picture how I can utilize this. Right now .submit() is inside the symbol's (named "commInput")'s Timeline.play action.

                 

                I initially had the .submit(function()) inside 'creationComplete' action, but for some reason the .submt() won't fire. That's why I moved it to Timeline.play, and it worked. What I hoped to do was having something like 'formElement.submit' action, Kind ouf like 'inputBox.click' action in the image above, but wasn't sure if Edge can work like that.

                 

                Testing .getParentSymbol().getParentSymbol() with nested Edge-native symbols worked for me too. What I suspect here is that I was trying to grab a Parent"Symbol" from the <form> element which its direct parent is not a symbol, but a <div> element. Maybe that was the problem. Not sure.

                 

                I actually came up with a solution that is a mix of what you suggested initially; I got the id string using .parent().parent() to climb out from the <form> twice to get the name of the parenting symbol. Then I just plugged the string into sym.getComposition().getStage().getSymbol(stringVariableName). play("in");