CODEWITHSUNDEEP
javascriptjquery
Clodoaldo Neto
Clodoaldo Neto

Reputation: 125434

Not defined function from $.getScript

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.

Upvotes: 8

Views: 15627

Answers (2)

nullability
nullability

Reputation: 10675

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

Upvotes: 14

Madbreaks
Madbreaks

Reputation: 19549

You need to wait for the response:

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

Upvotes: 4

Related Questions