How to add two same adobe edge animation in single html page?

Question

I am using jquery mobile where different pages contents will be in one html page.

On page change(sliding page), other pages have same edge animates, because of all html contents will be located in single html page, only first edge animate will work, rest will not work.

I have two stage id's

<div id="Stage" class="spring_animation"></div>

<div id="Stage2" class="spring_animation"></div>

Below code used for one stage(<div id="Stage") edge animate to work...

<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="spring_edgePreload.js"></script>
<!--Adobe Edge Runtime End-->

<script type="text/javascript">
 jQuery(document).ready(function(){        
     jQuery('[data-url="10.htm"]').live('pageshow', function(){

        if($ && $.Edge && $.Edge.symbol.get($("#Stage"))){
            $('#Stage, #Stage > div').show();
            $.Edge.symbol.get($("#Stage")).play(0); 
        }

    });   
 });       
</script>

But, it doesn't works.

Will anyone in community please help me solve this issue?

I think, problem is relies with adobe edge animate and its API.

Answer 1

I followed this tutorial and it works. http://blogs.adobe.com/edge/2012/05/15/bootstrapping-edge-compositions/

It uses plain javascript to show/hide the right composition. All the magic is beacause of the callback: AdobeEdge.bootstrapCallback(function (compId) { //your function will be called when the composition is ready to play });

As stated in the comment this callback will be called when the composition is ready. I did a working example that changes the composition on button click.