Why am I getting a jQuery is not defined error?

Question

I have to use an external js file in order to load jquery. The code from my js file is below:

 document.write('<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>');

    (function($) {
        $(document).ready(function() {
            alert('it works!!');
        });
    })(jQuery);

In the firefox firebug console I see this error: "jQuery is not defined" and I think it is because the jQuery library is loaded after the $ function from my js file.

Do you have any idea about how can I fix this? If I run the script from the firebug console everything works fine.

score 5 · Answer 1 · answered Dec 27 '10 at 13:29

5

The generated <script> element will appear after the current script element, and the code in it will not be executed until after the current <script> element's code has finished.

You need to load the library before you start the <script> that tries to use it.

Change to:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            alert('it works!!');
        });
    })(jQuery);
</script>

answered Dec 27 '10 at 13:29

Quentin

914,110
126
1,211
1,335

your right, this solution works, but not when I have to load jQuery from an external js file. Using document.write() with this idea, will make my life a nightmare bc I have to escape all ' and to write the functions in a single line. Can you provide a better approach? – dole Dec 27 '10 at 13:49

Elzo Valugi · Accepted Answer · 2010-12-27T14:00:25.987

2

You are correct about jquery not being loaded at the time you call it. You'll have to write a function that will load the jQuery library and only later call your code. Alternatively you can delay your code execution, but this is not 100% full proof.

Update. Link to check if jQuery has been loaded useful for a callback call.

edited Dec 27 '10 at 14:00

answered Dec 27 '10 at 13:47

Elzo Valugi

27,240
15
95
114

I think I'll go with writing a js function which loads the code after the jquery also, because I think I've seen such an approach somewhere on SO. TY – dole Dec 27 '10 at 13:52
1

you can write 2 functions: 1 that loads the jquery and 2 that executes 1 with a callback that executes your code. You can also check if jQuery has been loaded. Here are some methods http://jquery-howto.blogspot.com/2009/03/check-if-jqueryjs-is-loaded.html – Elzo Valugi Dec 27 '10 at 13:58

score 1 · Answer 3 · answered Dec 27 '10 at 13:31

1

Why are you using document.write to pull in jQuery? Just put the <script> tag in the HTML directly.

answered Dec 27 '10 at 13:31

Ned Batchelder

364,293
75
561
662

bc I NEED that the script to be loaded outside of the HTML page. – dole Dec 27 '10 at 13:41

score 1 · Answer 4 · edited May 23 '17 at 12:14

Loading scripts dynamically might help you. however, you're trying to load it while the page is loading, which would be a bit different from loading it when the page is loaded.

My suggestion is kind of a hack:

document.write('<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js" onload="loaded()" onreadystatechange="loadedIE()"></script>');

function loadedIE() { //for ie
    if(this.readyState == 4){loaded();}
};

function loaded() {
    $(document).ready(function() {
        alert('it works!!');
    });
};

I think the readystatechange listener should work (its an IE hack).

Why am I getting a jQuery is not defined error?

4 Answers4

Linked