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:

Edge always wanted to be a Wrapper

    .edgeLoad-PAGE_A { display:none; }

WRAPPER.HTML

   
EDGE animation composition should appear beneath me!



$.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.');
});

  

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:

1. edge_includes folder
2. page_a_edge.js
3. page_a_edgeActions.js
4. 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 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.

1. 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.

Originally posted 2013-11-29 06:06:46.