jQuery loads but is 'undefined'

Question

Working on a liferay 3.6 legacy project, without the ability to modify the liferay configuration, accessed via IE8/9 and am trying to load/use jQuery & UI from a portlet on a page but it's not working.

Tried loading jQuery & UI directly, as one merged file and tried loading from both yepnope and require; it appears the files load ok (for UI can see the load in the debugger). For example:

<script>
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "/pim/scripts/yepnope.js";
head.appendChild(script);
</script>

<script>
yepnope({
  load: ["scripts/jquery-1.9.1.js", "scripts/jquery-ui-1.10.2.custom.js"],
  callback: {
    "jquery-1.9.1.js": function () {
      console.log("jquery loaded!");
    },
    "jquery-ui-1.10.2.custom.js": function () {
      console.log("jquery-ui loaded!");
    }
  }
});
</script>

console: LOG: jquery loaded!

SCRIPT5009: 'jQuery' is undefined

jquery-ui-1.10.2.custom.js, line 6 character 1

So far get JQuery undefined message no matter how I load the two files

Any pointers on how I might get this to work?

Answer 1

Finally got this to work.

1) Kept the script that attached yepnope.js to head

2) In a script in one of the page's portlets that is invoked during the portlet's load, there appears: window.addEventListener("onload", invokeLoad, false);

3) the invokeLoad function executes the yepnope load of jQuery as in the second script in the question.

Should note, it didn't work with version 1.9.1, but did with 1.7.2