jQuery: getScript for including Javascript into Javascript

Question

I know the topic of "including a javascript file into another javascript file" has been discussed a lot. But my scenario is slightly different so I could not find an answer fitting to my problem.

Let's assume there are three files: test.html, starter.js and object.js

test.html simply includes starter.js using jQuery:

<html>
  <head>
    <script src="js/starter.js"></script>
  </head>
  <body>
  <script src="jquery/jquery-1.9.1.js"></script>
    <script>
    $( document ).ready(function() {
        $.getScript("js/starter.js", loadobject());
        alert( "a" );
    });
   </script>
  </body>
</html>

starter.js contains a function with $.getScript to include object.js and looks like this:

function loadobject() {
    alert( "b" );
    $.getScript("object.js", function(){
    Object.init();
    alert( "c" );
    });
}

Finally the object.js contains an object like the following:

var Object = {
init: function () {
            // . . .
},
searchString: function (data) {
            // . . .
    }
};
Object.init();

As far as I can see, when test.html is called in a browser it should include starter.js as soon as the document is ready. Furthermore, starter.js should load object.js when called. But this seems to fail as the line alert( "object loaded" ); is never executed. I also trial-and-errored a lot, for example replacing the line in starter.js $.getScript("object.js", function(){ with $.getScript("object.js", init(){, but I was not able to find a solution - although it might be simple. :(

How can I fix this and include the js file containing an object correctly? Additionally how can a new Object be initialized and accessed within starter.js?

I think that I messed up with the function(), but actually I have no clue about that and appreciate any hint.

Thank you!

Is it intentional that you're including starter.js twice? Once through HTML script tag, once through getScript(). What is your goal with doing all this stuff? I don't see the point. — kapa
– kapa, Commented Nov 7, 2013 at 9:44
If I leave out the script tag, the getScript() function throws an error saying that the variable loadobject is undefined. With the script tag this error does not occur. — coroner
– coroner, Commented Nov 7, 2013 at 11:02
In this case you do not need the getScript(). Simply do loadobject() instead of $.getScript("js/starter.js", loadobject());. At that time, starter.js is already loaded. — kapa
– kapa, Commented Nov 7, 2013 at 12:17

melc · Accepted Answer · 2013-11-07 12:35:25Z

1

The code works if you write it as follows,

HTML

no need to load starter.js since you accomplish that by the getScript function

<!DOCTYPE html>
<html>
    <head>
        <!--<script src="closure-library/closure/goog/base.js"></script>-->
        <!--<script src="js/starter.js"></script>-->
    </head>
    <body>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
        <script>
            $(document).ready(function() {
                $.getScript("js/starter.js", function(){
                    alert('starter loaded');
                    loadobject();
                });
                alert("a");
            });
        </script>
    </body>
</html>

object.js

var theObject = {
    init: function() {
alert('init');
    },
    searchString: function(data) {

    }
};

starter.js

Specify absolute path and within the callback function you have access to the object as you assumed. Renamed Object to theObject since calling function on Object causes a jquery error to be thrown.

function loadobject() {
    alert( "b" );
    $.getScript("/test/js/object.js", function(){
    theObject.init();
    alert( "c" );
    });
}

The result that you get is consecutive alerts showing "a" > "starter loaded" > "b" > "init" > "c"

answered Nov 7, 2013 at 12:35

melc

11.7k3 gold badges39 silver badges42 bronze badges

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

3 Comments

coroner Over a year ago

Thank you for your detailled answer! I modified everything just the way you advised. Unfortunately the alerts only show "a" > "starter loaded" > "b". That's it. So I thought the path to object.js might be wrong but I tried the absolute path /var/www/js/object.js as well as the webserver path http://serverip/js/object.js and httP://localhost/js/object.js - it's always the same. There is no "init" and no "c" alert. At least Dragonfly does not show any errors ;-D

melc Over a year ago

@coroner the code posted has been tested in chrome(30.0.x), ff(24) and opera (12.00)

coroner Over a year ago

Allright! That's working. Thank you very much! :) For some reason it did not work correctly on my localhost. When copied to a real-world webserver, everything's fine. Thank for your help and testing!

bipen · Accepted Answer · 2013-11-07 09:45:50Z

0

pass the function reference and not the function's returned value. you are calling the function there loadobject() and passing the returned value to it .

  $.getScript("js/starter.js", loadobject);

or

 $.getScript("js/starter.js", function(){
     loadobject()
 });

edited Nov 7, 2013 at 9:45

answered Nov 7, 2013 at 9:38

bipen

36.6k9 gold badges51 silver badges62 bronze badges

3 Comments

kapa Over a year ago

Actually he did not pass the function itself, but called it and tried to pass the return value.

coroner Over a year ago

I'm sorry but I do not understand. When I leave out the brackets after loadobject in the getScript within test.html the function loadobject() of starter.js is not called. I added an alert-popup to the loadobject() function before the getScript function to verify this. After all the object.js does not seem to be loaded, so the Object's init function is not executed.

coroner Over a year ago

I edited the code above so that you can see the added alerts. When using loadobject() in getScript, the alerts "b" and "a" show. When leaving these brackets out, only the "a" alert pops up. The alert "c" is never seen although there are no script errors in Dragonfly.

Collectives™ on Stack Overflow

jQuery: getScript for including Javascript into Javascript

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related