YUI is not defined - Create all in a js FILE

Question

i'm trying to test some YUI3 examples in a Crossrider App, so i need to create all in a JS file. I dont know if something is added wrong or what is the failure

The code following is on the "extension.js" of the crossrider. After install, debugging in console i get this error: Uncaught ReferenceError: YUI is not defined

THE CODE:

var js = document.createElement("script");
js.setAttribute("src","http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js");

document.head.appendChild(js);
document.body.setAttribute("class","yui3-skin-sam");

var div = document.createElement("div");
div.setAttribute("id","demo");
document.body.appendChild(div);

YUI().use('tabview', function(Y) {
    var tabview = new Y.TabView({
    children: [{
        label: 'foo',
        content: '<p>foo content</p>'
    }, {
        label: 'bar',
        content: '<p>bar content</p>'
    }, {
        label: 'baz',
        content: '<p>baz content</p>'
    }]
});

tabview.render('#demo');
tabview.selectChild(2);

});

Some help?

Answer 1

There are 2 issues with your code.

1. As @Knollbert mentioned, you have an issue with synchronicity which can be resolved with Crossrider's appAPI.dom.addRemoteJS method using the callback to inject and build your UI.
2. You have an issue with scopes as you are loading the remote script into the HTML Page's scope (the DOM) and trying to call it (YUI) from within the Extension scope where it has not been defined.

You can resolve both issues with the following extension.js code (and use jQuery to inject your elements):

appAPI.ready(function($) {
  appAPI.dom.addRemoteJS("http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js", function() {
    $('body').addClass('yui3-skin-sam');
    $('<div id="demo">').appendTo('body');

    var script =
      "YUI().use('tabview', function(Y) {" +
      "  var tabview = new Y.TabView({" +
      "    children: [{" +
      "      label: 'foo'," +
      "      content: '<p>foo content</p>'" +
      "    }, {" +
      "      label: 'bar'," +
      "      content: '<p>bar content</p>'" +
      "    }, {" +
      "      label: 'baz'," +
      "      content: '<p>baz content</p>'" +
      "    }]" +
      "  });" +
      "  tabview.render('#demo');" +
      "  tabview.selectChild(2);" +
      "});";

    appAPI.dom.addInlineJS(script);
  });
});

In addition, you can tidy up the code injecting the inlineJS by creating a resource file (e.g. script.js) with the contents of the script variable and injecting it using appAPI.resources.addInlineJS, as follows:

script.js

YUI().use('tabview', function(Y) {
  var tabview = new Y.TabView({
    children: [{
      label: 'foo',
      content: '<p>foo content</p>'
    }, {
      label: 'bar',
      content: '<p>bar content</p>'
    }, {
      label: 'baz',
      content: '<p>baz content</p>'
    }]
  });
  tabview.render('#demo');
  tabview.selectChild(2);
});;

extension.js

appAPI.ready(function($) {
  appAPI.dom.addRemoteJS("http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js", function() {
    $('body').addClass('yui3-skin-sam');
    $('<div id="demo">').appendTo('body');
    appAPI.resources.addInlineJS('script.js');
  });
});

[Disclaimer: I am a Crossrider employee]

Answer 2

The issue is that the YUI script hasn't been parsed/loaded by the browser yet.
See document.createElement("script") synchronously for some solutions.