Javascript file does not load dynamically

Question

I am using this answer, the ever popular SO post to dynamically load a javascript file:

$.getScript("scripts/datagrid.js", function(){

    alert("Script loaded but not necessarily executed.");                      

});

But the it never loads. JQuery is referenced in the underlying HTML file in the header before the js file that is calling this script loading function. Furthermore, I don't call this script loader until after the document is loaded:

$(document).ready(function() {
    administration.init();
});



var administration = {
    ...


   init : function() {

      try {

          $.getScript("scripts/datagrid.js", function(){
              alert("Script loaded but not necessarily executed.");

            });


       } catch (e) {
        alert('[administration.init] error = ' + e);
       }


   ...

I have validated that JQuery is loaded already by checking the value of an element that is hard-coded in HTML using JQuery. Which is also validated by the fact the script is executed.

The script file exists and works if I add it to the HTML header, but I want to load it dynamically.

Why does the anonymous function never fire (obviously because the script never loads - why)?

EDIT

Following Sanjay's advice below, I bound the error handler to the ajax call and the console now displays the following:

TypeError: Cannot read property 'init' of undefined(…)

So it's finding the file, just not apparently able to find the init function of the class.

Do you get any errors in your JavaScript console? Do you see the request made for the js file? (maybe it returns a 404 or something, or the wrong mime-type). — Halcyon, Mar 08 '16 at 13:39
Maybe you're forgetting that a linked script in your page will be relative to the page while `$.getScript` will expect a url relative to the base address. In other words if I'm viewing `http://www.testme.com/somefolder/index.html` and I try to load script in `http://www.testme.com/somefolder/scripts/datagrid.js`, a link to "scripts/datagrid.js" will work because it is relative to index.html but `$.getScript` will expect "somefolder/scripts/datagrid.js" for the same file. — Neil, Mar 08 '16 at 13:43
$.getScript is just a shortcut for $.ajax (https://api.jquery.com/jquery.getscript/). Could you use the long form and add an error handler? — derpirscher, Mar 08 '16 at 13:45
@AndroidAddict No, because it is an ajax request. You should be getting an ajax request failure, but you have no callback, so it gets ignored. — Neil, Mar 08 '16 at 13:45
@Neil An ajax request still throw a 404 in the console even if there is no failure callback. — Hacketo, Mar 08 '16 at 13:46
Try this form and report the error: `$.getScript( "scripts/datagrid.js" ) .done(function( script, textStatus ) { console.log( textStatus ); }) .fail(function( jqxhr, settings, exception ) { alert("exception:"+ exception ); });` — Mark Schultheiss, Mar 08 '16 at 13:47
@Neil Fully qualifying throws a 404 not found error on the file reference. — Roy Hinkley, Mar 08 '16 at 13:47
Next question is the URL accurate from the page relative point (same folder/scripts)? `scripts/datagrid.js` OR do you really need a root folder: `/scripts/datagrid.js` — Mark Schultheiss, Mar 08 '16 at 13:48
@AndroidAddict do you have some Content-Security-Policy headers ? — Hacketo, Mar 08 '16 at 14:00
Proof of jQuery put this in a page level script: `window.load = function(){ alert(typeof jQuery); }` you have not loaded jQuery perhaps? Show page portion where it does. — Mark Schultheiss, Mar 08 '16 at 14:03
And are you sure your `$.getScript()` method is called at least??? EDIT!: ok so, have you try to bind `fail()` deferred method? **(see answer below!!!)** If ya, yhen if success not called, the error one would. Anyway, you have to learn how to debug js code. In your case if request failed, no not handled error will be thrown so your catch block is useless — A. Wolff, Mar 08 '16 at 14:07
@AndroidAddict So bind error handler of ajax method and you will get your answer — A. Wolff, Mar 08 '16 at 14:12

score 1 · Accepted Answer · answered Mar 08 '16 at 13:50

1

you should try to load script like

$.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    console.log( exception );  // here you can get reason why file is not loading 
});

you can see console error Not Found here jsfiddl

answered Mar 08 '16 at 13:50

Sanjay Nishad

1,537
14
26

Thank you. But I want to know why this extremely popular post and answer are not working. – Roy Hinkley Mar 08 '16 at 13:56
@AndroidAddict Because you are doing something wrong. You have to debug it, nothing we can help you – A. Wolff Mar 08 '16 at 13:58
@AndroidAddict what's error are you getting? May be `$.getScript()` is not getting correct `script path` – Sanjay Nishad Mar 08 '16 at 14:00
I don't see any errors in the console nor are any raised in the try block the script is executed in. – Roy Hinkley Mar 08 '16 at 14:01
@AndroidAddict `done` or `fail` method is executing of `getScript`? you should get something on `console` either `txtStatus` or `exception`. – Sanjay Nishad Mar 08 '16 at 14:05

score 1 · Answer 2 · answered Mar 08 '16 at 14:20

Change code using the sequence like this: (remove try/hide and use event handler to debug this) call it AFTER you declare it.

if(!jQuery){alert("No jQuery loaded")}
var administration = {
  init : function() {
    $.getScript( "scripts/datagrid.js" )
    .done(function( script, textStatus ) { 
        console.log( textStatus );
    })
    .fail(function( jqxhr, settings, exception ) { 
        alert("exception:"+ exception ); 
    });
  }
};
$(document).ready(function() {
    administration.init();
});

Javascript file does not load dynamically

2 Answers2