Load jQuery by javascript and run a function from another file

Question

I need to load 3 jquery scripts in a page. For business reasons i've to make the minimum modifications possible so i've decided to create one javascript to be included in the website.

After that, this script must load the jQuery and also 3 more jquery scripts besides 3 css files.

Basically, until now, that's what i've got:

var jquery = document.createElement('script');
jquery.type = "text/javascript";
jquery.src = "common/com/jquery/jquery-1.9.1.js";
document.getElementsByTagName('head')[0].appendChild(jquery,document.getElementsByTagName('head')[0].firstChild);

var prettyPhoto = document.createElement('script');
prettyPhoto.type = "text/javascript";
prettyPhoto.src = "common/com/prettyPhoto/jquery.prettyPhoto.js";
document.getElementsByTagName('head')[0].appendChild(prettyPhoto,document.getElementsByTagName('head')[0].firstChild);

var jqueryui = document.createElement('script');
jqueryui.type = "text/javascript";
jqueryui.src = "common/com/jqueryui/jquery-ui.js";
document.getElementsByTagName('head')[0].appendChild(jqueryui,document.getElementsByTagName('head')[0].firstChild);

var kohlerApp = document.createElement('script');
kohlerApp.type = "text/javascript";
kohlerApp.src = "common/js/lelak.js";
document.getElementsByTagName('head')[0].appendChild(kohlerApp,document.getElementsByTagName('head')[0].firstChild);

var style = document.createElement("link");
style.type = "text/css";
style.href = "common/css/style.css";
style.rel = "stylesheet";
document.getElementsByTagName('head')[0].appendChild(style,document.getElementsByTagName('head')[0].firstChild);

var jqueryui = document.createElement("link");
jqueryui.type = "text/css";
jqueryui.href = "common/css/jquery-ui.css";
jqueryui.rel = "stylesheet";
document.getElementsByTagName('head')[0].appendChild(jqueryui,document.getElementsByTagName('head')[0].firstChild);

var prettyPhoto = document.createElement("link");
prettyPhoto.type = "text/css";
prettyPhoto.href = "common/css/prettyPhoto.css";
prettyPhoto.rel = "stylesheet";
document.getElementsByTagName('head')[0].appendChild(prettyPhoto,document.getElementsByTagName('head')[0].firstChild);

lelakApp.giveError("0","test");

I'm trying to execute one of jquery functions contained in one of the scripts included but with no success. Returns the following error:

Uncaught ReferenceError: lelakApp is not defined 

(Where lelakApp is from my script)

How can i load the jQuery and a Personal Jquery Script and load a function from that personal script, together?

---

EDIT

I'm trying to execute a simple request of jquery using requireJs

define(["../com/jquery/jquery-1.9.1"], function($) {
$('body').html('');
});

but i'm receiving this error:

Uncaught TypeError: undefined is not a function

Answer 1

I would think this is because you dont know whether the script has loaded or not at the time you try to use the function.

You could try adding an onload event handler to the script tags and only start using the scripts once they are all loaded.

Take a look at require.js either to use or for ideas : http://requirejs.org/

require(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

Answer 2

You should wait for the scripts to be loaded completely before using lelakApp . I suggest you to use require.js for loading scripts dynamically.

in order to do this without require.js , you can do something like:

script.onload = script.onreadystatechange = function () {
    'use strict';

    if (script.readyState === 'complete') {
        // ...
    }
}

Note: I have no ideas about browser compatibility.