Not defined function from $.getScript

Question

This one must be very simple. An external javascript file contains:

function Hello() {
    alert('Hello');
}

It is getScript()ed and then a contained function is called

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $.getScript('myscript.js');
    Hello();
</script>

I get:

ReferenceError: Hello is not defined

But if the script is referenced in an HTML <script> tag it works as expected

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="myscript.js" type="text/javascript"></script>
<script type="text/javascript">
    Hello();
</script>

What I am missing? How to reference objects created in a getScript()ed script? The reason I want to use getScript() it to load the script on a ready() event.

See the [manual](http://api.jquery.com/jQuery.getScript/). It's AJAX. Pay special attention to the second argument. — Quentin, Oct 31 '13 at 20:46
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Kevin B, Oct 31 '13 at 20:50

score 14 · Accepted Answer · edited Nov 29 '19 at 18:32

14

The issue is that the $.getScript() function is asynchronous. When you call the Hello() function immediately after, the script is not yet loaded so the function is not available.

Loading scripts with regular <script> tags happens synchronously, so if you want to duplicate that behavior you have to disable the async option in your Ajax call.

getScript alone does not support this, so you can do this using an $.ajax call with the appropriate options:

 $.ajax({
     url: 'myscript.js',
     dataType: 'script',
     async: false
});

This will block the browser until the script is loaded.

However, a better technique is to use a callback, which $.getScript() does support:

$.getScript('myscript.js', function() {
    Hello();
});

edited Nov 29 '19 at 18:32

CoderBlue

695
7
14

answered Oct 31 '13 at 20:47

nullability

10,545
3
45
63

both not working for me, any ideas? http://stackoverflow.com/questions/29014968/jquery-getscript-fails-to-load-function – Viktor Mar 12 '15 at 16:17
1

missing comma after " dataType: 'script' " – SkyN Oct 11 '16 at 09:27
jQuery should mention this importan msg in their blogs. Sucks... – Alston Mar 08 '23 at 11:15

score 4 · Answer 2 · answered Oct 31 '13 at 20:48

4

You need to wait for the response:

$.getScript('myscript.js', function(){
    Hello();
});

answered Oct 31 '13 at 20:48

Madbreaks

19,094
7
58
72

Not defined function from $.getScript

2 Answers2

Linked