So I´m trying to retrieving an Edge animation through jQuerys $.getScript() which is the same as calling $.ajax with dataType: script.
Now if I include the script with a script tag it works fine, but when I try to load and execute the script through $.getScript() nothing happens. (I dont get any errors, and the script and sub-scripts are loaded fine - but nothing happens.)
Have anyone tried doing this before? I suspect I have problems loading it through AJAX because Adobe uses yepnope in page_a_edgePreload.js.
I used a simple example I found from the Adobe Edge for testing purposes. If you want to try it out locally - open a editor and save the following into a wrapper.html file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Edge always wanted to be a Wrapper</title>
<style>
.edgeLoad-PAGE_A { display:none; }
</style>
<script src="edge_includes/jquery-1.7.1.min.js"></script>
</head>
<body style="margin:0;padding:0;">
<H1>WRAPPER.HTML</H1>
<div id="content" class="PAGE_A">
<p>EDGE animation composition should appear beneath me!</p>
</div>
<script type="text/javascript">
$.getScript("page_a_edgePreload.js", function(data, textStatus, jqxhr) {
//console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});
</script>
<!--uncomment script below to see that it works if included regulary -->
<!--<script src="page_a_edgePreload.js"></script>-->
</body>
</html>
And then download the example .zip file from Adobe here: http://blogs.adobe.com/edge/files/2012/05/an15BootStrapExample.zip
Extract the following into the same folder as your wrapper.html:
- edge_includes folder
- page_a_edge.js
- page_a_edgeActions.js
- page_a_edgePreload.js
EDIT
Ok, so I tried loading the files without going through the edgePreloader.js as suggested by Alex. I get access to the AdobeEdge, but it returns undefined if I write out the composition after successfully loading the scripts:
var comp = window.AdobeEdge.getComposition("PAGE_A");
var stage = comp.getStage();
console.log("Stage: " + stage);
(I also tried this with a setTimeout() function - still same result)
The following works fine if I include the script in a regular <script src="..edgePreloader.js"></script> tag
setTimeout(function() {
// Try getting the edge composition after 2 seconds
var comp = window.AdobeEdge.getComposition("PAGE_A");
var stage = comp.getStage();
console.log("Stage: " + stage);
}, 2000);
I notice that Adobe uses closures on the edgePreload.js, seems that I must load edge.1.5.0.js inside this closure. Im now trying to understand what events and features that are essential in this closure in order to get it working.
You probably just want to load the adobe edge file directly instead of injecting another preloader inside of a preloader. But if you just want to load things asynchronously with a preloader (yepnope for instance) then including the file like you have commented out is exactly how it should work.
If you wanted to switch it to use jQuery's
getScriptyou could just switch out the yepnope specific stuff. Unfortunately the preloader file has a bunch in it, but I think it's boilerplate for Adobe Edge. It's like something you'd switch out when you weren't in an example.So your line that looks like this:
Should change to this:
The preloader also looks like it does some feature tests and sets up events. If you needed that stuff you could copy it from the bottom of the file. But if you know what to call to initialize the same things without the preloader (which you seem to want to avoid), then you could just load in the other two files that the preloader pulls in in this example:
That exact code probably isn't exactly right to get you fully working, but it should be the right idea.