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
– Halcyon, Commented Mar 8, 2016 at 13:39
$.getScript is just a shortcut for $.ajax (api.jquery.com/jquery.getscript). Could you use the long form and add an error handler? — derpirscher
– derpirscher, Commented Mar 8, 2016 at 13:45
@Neil An ajax request still throw a 404 in the console even if there is no failure callback. — Hacketo
– Hacketo, Commented Mar 8, 2016 at 13:46
@Neil Fully qualifying throws a 404 not found error on the file reference. — Roy Hinkley
– Roy Hinkley, Commented Mar 8, 2016 at 13:47

Sanjay Nishad · Accepted Answer · 2016-03-08 13:50:58Z

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 8, 2016 at 13:50

Sanjay Nishad

1,62515 silver badges29 bronze badges

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

5 Comments

Roy Hinkley Over a year ago

Thank you. But I want to know why this extremely popular post and answer are not working.

A. Wolff Over a year ago

@AndroidAddict Because you are doing something wrong. You have to debug it, nothing we can help you

Sanjay Nishad Over a year ago

@AndroidAddict what's error are you getting? May be $.getScript() is not getting correct script path

Roy Hinkley Over a year ago

I don't see any errors in the console nor are any raised in the try block the script is executed in.

Sanjay Nishad Over a year ago

@AndroidAddict done or fail method is executing of getScript? you should get something on console either txtStatus or exception.

Mark Schultheiss · Accepted Answer · 2016-03-08 14:20:20Z

1

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

answered Mar 8, 2016 at 14:20

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Collectives™ on Stack Overflow

Javascript file does not load dynamically

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related