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=".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=".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.

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.

• javascript
• jquery

• 2 you didn't wait for the script to finish loading. – Kevin B Commented Oct 31, 2013 at 20:46
• See the manual. It's AJAX. Pay special attention to the second argument. – Quentin Commented Oct 31, 2013 at 20:46
• 1 $.getScript('myscript.js', function() { Hello(); }); – emerson.marini Commented Oct 31, 2013 at 20:49
• possible duplicate of How to return the response from an AJAX call? – Kevin B Commented Oct 31, 2013 at 20:50

2 Answers 2

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();
});

You need to wait for the response:

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