1

Could someone please explain the behaviour of jQuery's getScript() function?

Consider a javascript file test.js: 

var tmp = 'a variable';
alert('here');

When test.js is loaded via html's <script> tag, everything works fine: tmp variable is available in the global scope and a message box appears.

I'm trying to get the similar behavior via this code:

<script>
$(document).ready(function() {
    $.getScript("static/js/proto/test.js");

    setTimeout(function() { 
        // at this point tmp should be available 
        // in the global scope
        alert(tmp); 

    } , 2000); // 2 seconds timeout
}
</script>

But browser's error console reports an "Undefined variable tmp" error. What am I doing wrong? Thank you.

Zaur Nasibov
  • 22,280
  • 12
  • 56
  • 83
  • Maybe this helps: http://stackoverflow.com/questions/3052188/jquery-getscript-old-functions-variables-in-executed-script – m90 Sep 01 '11 at 11:43
  • Make sure your script was really loaded. When I experimented at my computer, I didn't managed to make the callback function to be called – Alleo Sep 01 '11 at 12:10

2 Answers2

5

$.getScript may be asynchronous, use the callback parameter:

$.getScript("static/js/proto/test.js", function() {
    // here you are sure that the script has been executed
});

See the documentation for $.getScript: http://api.jquery.com/jQuery.getScript

Arnaud Le Blanc
  • 98,321
  • 23
  • 206
  • 194
  • Thank you @arnaud, but I've already tried settings $.ajaxSetupt({'async' : false}) and then making the call. It doesn't solve the problem :( – Zaur Nasibov Sep 01 '11 at 11:47
  • 3
    @arnaud actually doesn't suggests you to set async to false, he suggests you to try onload handler. And he is actually right. Async false is bad-bad-bad. – shabunc Sep 01 '11 at 11:50
  • 2
    Yep, it's bad unless one needs to load 20 various js files in a very particular order. – Zaur Nasibov Sep 01 '11 at 11:54
  • 2
    Take a look at http://requirejs.org/ ; this will allow your javascript modules to specify their dependencies, and to ensure that they are executed only once their dependencies are loaded. – Arnaud Le Blanc Sep 01 '11 at 12:03
  • IMHO if your app needs to load 20 JS files asynchronously in a particular order with `getScript`, then you are doing something very, very, very wrong and it's time to consider a completely other approach. – RoToRa Sep 01 '11 at 13:10
  • 1
    @RoToRa or you've correctly structured your code in modules. There is no problem with this in development. (Obviously in production you concatenate most modules in a same file and let the loader (e.g. requirejs) manage this.) – Arnaud Le Blanc Sep 01 '11 at 13:13
0

The real problem with the script was my lack of experience with JS in general and particulary in AJAX: I was trying to run this script on a local machine without a web server.

Guess what: AJAX expects status '200' from a web server to load a document asynchronously. As there was no web server, the status of the async call was '0'.

Thank you everyone for answering.

Zaur Nasibov
  • 22,280
  • 12
  • 56
  • 83