How do I load an edge animation with an AJAX call? jquery getScript fails

Question

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.

score 1 · Answer 1 · answered Aug 27 '13 at 19:21

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 getScript you 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:

$.getScript("page_a_edgePreload.js", function(data, textStatus, jqxhr) {});

Should change to this:

$.getScript("edge_includes/edge.1.5.0.min.js", function(data, textStatus, jqxhr) {
  // AdobeEdge should exist now
});

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:

$.getScript("edge_includes/edge.1.5.0.min.js", function() {
  $.getScript('page_a_edge.js', function(){
    $.getScript('page_a_edgeActions.js', function(){
      // window.AdobeEdge should be fully available
    });
  });
});

That exact code probably isn't exactly right to get you fully working, but it should be the right idea.

Must have been tired yesterday, because what I tried with the bootstrapCallback didnt work - it was just that i had forgotten to comment the at the bottom.. I´ll keep on trying to solve this. — am_, Aug 28 '13 at 07:31

score 0 · Answer 2 · edited May 23 '17 at 11:49

I am not a javascript expert but the problems I had with Edge Animate in multiple use over the same website seem to be at least similar. Maybe I can contribute a little with a link I found and whose stuff I use which is the following: http://www.tricedesigns.com/2012/07/12/using-adobe-edge-animations-as-components/ My work (in part) is here: prevent Adobe Edge preload.js file from loading jquery I am also wondering why Edge has to load jquery before being ready even it is already in the main page.

How do I load an edge animation with an AJAX call? jquery getScript fails

2 Answers2