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

Please provide the context showing the code that is referencing lelakApp and throwing this error — D-Rock
– D-Rock, Commented Apr 25, 2013 at 12:09
@D-Rock i've added to the end of the code my function call. The following function should return an Alert. It works if i include all scripts manually in head tags — Alexandre
– Alexandre, Commented Apr 25, 2013 at 12:15

Tom Elmore · Accepted Answer · 2013-04-25 12:16:47Z

3

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

answered Apr 25, 2013 at 12:16

Tom Elmore

1,98015 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexandre Over a year ago

Sorry, english are not my first language. I don't understand what you mean in the comment lines. Can you explain to me (Maybe with a example of this define())?

Alexandre Over a year ago

Nevermind. It was a mistake i made. Now its working fine, thanks!

fardjad · Accepted Answer · 2013-04-25 12:31:07Z

3

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.

edited Apr 25, 2013 at 12:31

answered Apr 25, 2013 at 12:17

fardjad

20.5k6 gold badges55 silver badges68 bronze badges

Collectives™ on Stack Overflow

Load jQuery by javascript and run a function from another file

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related