loading a JavaScript file with vars not set at load time

Question

the post title may not explain fully, but here is what I am hoping to do: I have my JavaScript code in a separate file, and I have it arranged like so

var PK = {
    "vars" : {
        "uris" : {
            "app1": "http://this/server/",
            "app2": "http://that/server/"
        },

        "something": {
            "objects": [],
            "obj1": { "url": PK.vars.uris.app1 },
            "obj2": { "url": PK.vars.uris.app2 }                                   
        }
    },

    "methods" : {
        "doThis" : function(a) {
            $.ajax({
                url: PK.vars.uris.app1,
                data: data,
                type: "GET",
                success: function(data) { .. do something .. }
            });     
        },

        "doThat" : function(a) {
            $.ajax({
                url: PK.vars.uris.app2,
                data: data,
                type: "GET",
                success: function(data) { .. do something else .. }
            });     
        },

        "init" : function(position) {
            if (position) { PK.methods.doThis();
            }
            else {
                PK.methods.doThat();
            }
        }
    }
};

and then, in my html, I have the following

$(document).ready(function() {
    PK.vars.uris.app1 = "[% app1 %]";
    PK.vars.uris.app2 = "[% app2 %]";
    PK.methods.init();
});

where the values of app1 and app2 are sent from the server based on a config file. Except, it doesn't work as expected, because, when the separate JavaScript loads, PK.vars.uris is not defined at that time. Of course, everything works beautifully if I have PK.vars.uris{} hardcoded.

How can I delay the evaluation of var PK until after the document has loaded and PK.vars.uris is available to be used in the JavaScript code?

Not sure I understand - but can you just load the separate file first? — Rusty Fausak
– Rusty Fausak, Commented Sep 25, 2011 at 22:24
hmmm... I was hoping I hadn't messed up in explaining what seems to be a simple situation. My external.js has the var PK = {} defined in. That is loaded in the main html file via the script tag. In the same html file, the value of PK.vars.uris is initialized $(document).ready(function(). I want to ensure that the initialized value is available to var PK in external.js — punkish
– punkish, Commented Sep 25, 2011 at 22:28

Andrew Shepherd · Accepted Answer · 2011-09-25 23:21:31Z

2

Is the problem that you need to pass values into an initialiser?

How's this approach:

In your external file:

  function PK_Constructor(app1Uri, app2Uri) {
        this.vars = { "uris" : {
                    "app1" : app1Uri,
                    "app2" : app2Uri
            },
               "something": {
                    "objects": [],
                    "obj1": { "url": app1Uri },
                    "obj2": { "url": app1Uri }                                   
                 },
            };
       this.doThis = function(a) {
           $.ajax({
               url: this.vars.uris.app1,
               data: data,
               type: "GET",
               success: function(data) { .. do something .. }
           }); 
       // etc

    }

And in you HTML:

   // Ensuring PK has global scope
   var PK = undefined;

   $(document).ready(function() {
       PK = new PK_Constructor("[% app1 %]", "[% app2 %]");
   });

edited Sep 25, 2011 at 23:21

answered Sep 25, 2011 at 22:58

Andrew Shepherd

45.5k33 gold badges148 silver badges212 bronze badges

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

1 Comment

punkish Over a year ago

yes, that does work, many thanks. Of course, now I have to figure out how to modify this pattern so I can pass several other config params to the initializer. But, at least it gives me something to proceed with. Thanks again.

Collectives™ on Stack Overflow

loading a JavaScript file with vars not set at load time

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related