loading script files asynchronously

Question

I'm using $.getScript to load the script files, this works fine. if I check the network tab in my browser, the file did download successfully.However, when I try and use functions in the script file they are undefined. There also is no new script tag in the HTML.

How do I use the new script file once it has been downloaded?

Note: The file also does not show up in the resources tab of the dev tools after it has been downloaded.

Edit: added code below and some more info

Script being loaded file:

var STUD = function () { return { STUDLoaded: function () { alert('Working!'); } } } function foo() { alert('bar!'); }

js downloading the script file and calling the functions.

$.getScript(gSiteRoot + 'Scripts/Views/' + ControllerName + '.js') .done(function (script, textStatus) { debugger; foo(); if ($('#hdnJSClass') != undefined) window[$('#hdnJSClass').val()][$('#hdnJSClassFunc').val()](); }) .fail(function (jqxhr, settings, exception) { GEN._displayNotification('Error', 'There was an error loading the page, please retry', true); });

The function foo fires correctly when called after the async loading. So the issue is with the window call, this call works for my other js functions, but not the dynamically loaded ones.

getScript is intended to retrieve a script from the server and execute it immediately. It is not supposed to be used as an 'include'. — Rory McCrossan
– Rory McCrossan, Commented Jun 2, 2014 at 10:06
Check the DOC, use success callback: api.jquery.com/jquery.getscript Call methods defined inside external script from there then — A. Wolff
– A. Wolff, Commented Jun 2, 2014 at 10:06
$.getScript downloads the script via AJAX and evaluates it locally. You will neither see <script> tag nor you will see it as a resource. If it doesn't work then you probably have an error somewhere in the script. Since it is a custom way to download js it will be difficult to debug it. Show us the code. — freakish
– freakish, Commented Jun 2, 2014 at 10:07
An example of how you're using it and what you're expecting might be useful too. — roobeedeedada
– roobeedeedada, Commented Jun 2, 2014 at 10:08
Where is stored window[$('#hdnJSClass').val()] object? If foo() works then .getScript() works too. The problem is with the function stored in object (or the object) that you are looking for — kosmos
– kosmos, Commented Jun 2, 2014 at 10:29

kosmos · Accepted Answer · 2014-06-02 10:09:33Z

1

Use .getScript() so:

$.getScript('path/to/file.js', function(data, ts, jqxhr){ if( jqxhr.status == 200 ){ // do stuff } else{ // failed retrieving file } });

answered Jun 2, 2014 at 10:09

kosmos

4,2881 gold badge21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Swifty Over a year ago

I am doing pretty much exactly this, see above.

kosmos Over a year ago

Sorry, didn't load edition when I posted. Looking it

Swifty · Accepted Answer · 2014-06-03 11:55:12Z

I found the issue, there was a syntax error in the STUD object with invalidated its content. I forgot to add the closing parenthesis:

var STUD = function () { return { STUDLoaded: function () { alert('Working!'); } } }(); // <-- forgot those

Collectives™ on Stack Overflow

loading script files asynchronously

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related