TLDR:
When loading multiple Compositions into a html page via AdobeEdge JavaScript, how do I remove/delete/unload a loaded composition so that it can be added/loaded to the same page again later? I am open to options not mentioned here, but this is done externally, not within Edge's limited code abilities (working with multiple comps on one page).
----------------------
*Note: I am making comps in Edge then loading multiple within my own JavaScript/HTML external pages. This programming is NOT done within Edge's code.
Overview:
I could have more than 50 compositions to load into my page, but only one is displayed at a time. In order to make this easier on the user, I load 5 into the page in divs with display: none. I set the id of the first one to an id that has my css to show the content properly. When clicking next, that div is set back to an ID that has hidden css values. Going forward and back works the same. This functions properly. This puts all the obvious preloading in the beginning so the user doesn't have to wait again, as comps are preloaded in the background while they are viewing other comps.
As the user moves farther, I drop the first div and add one on the end with the next comp. This works fine. I can go forward all day, no problem by removing the first div element and adding one to the end. This should make memory not horrible, since theoretically, the comps would be removed as needed...
Problem:
The problem is if the user wants to go back. If I drop the last div and add one to the front, the comp (which was loaded and dismissed earlier) cannot be re-loaded. It also cannot be re-added, even if the div is cloned and re-added later.
This is the code I am using to load the comps:
$.getScript('comp_' + i + '_edgePreload.js', function() {});
Options:
The options I have thought of (and not found a way to make them work) in order of preference:
- Fully unload the comp from memory, that way when I make the call to load the comp, it will act as if it has never been loaded before. (Is there a way to unload a comp completely? I haven't found one, but the API is sorely incomplete) **I want this one to work very much.
- Ok, maybe you can't actually unload a loaded comp. Can you re-add it to a new div? I have printed out every option I could thru AdobeEdge's interface, and cannot find a way to re-make a div the way it was. Heck, I'd be happy to load the content into a non-child element in JS, then append to html when I actually want to display it. I can't find how to re-setup the div, which has the correct Class and is set up the way it was when the comp was loaded the first time. (this option is bad because it seems all of the comps are still in memory, but at least it would work)
- Worst case, I have tried this and ALMOST got it to work. When I removed the old divs from the page, I cloned them and added them to an array of objects in JS. Then, when going back, I pushed them back out, so it was an EXACT copy of the original div, all content was the same, all id, class, style, etc was the same. Unfortunately, AdobeEdge seemed to lose the ability to talk to it. (AdobeEdge.getComposition('EDGE-MyUniqueIdentifier').getStage(); // returns undefined). How do I tell it to re-associate the div with the object that still exists here? And obviously, this is an awful solution, since it appears that all of the comps stay in memory, but I was desperate to simply make it work somehow.
If you need code examples of any of my attempts at the previous options (I have tried them all extensively, and unsuccessfully), I can provide it. I hope someone has found a way to deal with this or has links to actually useful information. Most posts I have found simply tell you to load all your comps and hide/unhide them as needed. This works for small-scale, but when you have a lot of comps to move between, it becomes less of a viable solution.