CODEWITHSUNDEEP
javascriptjquery
coroner
coroner

Reputation: 543

jQuery: getScript for including Javascript into Javascript

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!

Upvotes: 0

Views: 1412

Answers (2)

melc
melc

Reputation: 11671

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"

Upvotes: 1

bipen
bipen

Reputation: 36541

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

Upvotes: 0

Related Questions