Call Javascript function from dynamically loaded inner function

Question

My main application loads javascript files based on the 'page' visited:

var AdminConsole = (function() {
    function openPage(folder, template) {
        $.getScript('viewmodels/' + template + '.js')
            .done(function() {
                console.log(template + " script loaded.");
            });
    }
    function test() {
        // do something ...
    }
})();

The javascript being loaded in $.getScript() looks like this:

var UserPermissions = (function() {
    // try to call test()
})();

My question is, how do I call AdminConsole.test() from within UserPermissions()?

When I try AdminConsole.test() it says AdminConsole is undefined. And when I try just test(), test is undefined.

Define AdminConsole gloablly.

void
– void

2015-02-10 20:29:07 +00:00
Commented Feb 10, 2015 at 20:29 — void
– void, Commented Feb 10, 2015 at 20:29

Oriol · Accepted Answer · 2015-02-10 20:31:43Z

4

The value assigned to AdminConsole is the value returned by that anonymous function. Since you don't return anything, it's undefined.

Instead, you should export the public methods/properties:

var AdminConsole = (function() {
    // ... (private data)
    return { // Export public data to the outside
        test: test,
        openPage: openPage
    };
})();

If you don't need private data, you can also consider the simpler

var AdminConsole = {
    test: function(){ /*...*/ },
    openPage: function(){ /*...*/ }
};

answered Feb 10, 2015 at 20:31

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

Comments

John · Accepted Answer · 2015-02-10 20:29:31Z

1

AdminConsole appears to be the result of calling a function. If that function does not have a return, then AdminConsole will be undefined. Perhaps you want this:

AdminConsole = {
    openPage: ...
    test: ...
}

But what you probably want is to use modules, as provided by Browserify or RequireJS.

answered Feb 10, 2015 at 20:29

community wiki

John

Comments

royhowie · Accepted Answer · 2015-02-10 20:41:13Z

1

In your code snippet, AdminConsole is a self-executing, anonymous function. In other words, it is equal to whatever (function () {/* your code*/})() returns. In your case above, you don't return anything (you just have functions inside of the anonymous function), so AdminConsole == undefined. Those functions are private. For example,

function myPrivateData () {
    this.data = "public";
    var nobodyCanSee = "private";
}
var test = new myPrivateData();
// test.data => "public"
// test.nobodyCanSee => undefined

This is the same as your situation. None of your inner functions are attached to the anonymous function, so they're invisible outside of that function's scope.

If you want to access the functions within AdminConsole, you can make it an object:

var adminConsole = {
    openPage: function () {
        // etc
    },
    test: function () {
        // etc
    }
}

With this structure, you can call test with adminConsole.test().

edited Feb 10, 2015 at 20:41

answered Feb 10, 2015 at 20:29

royhowie

11.2k14 gold badges54 silver badges67 bronze badges

3 Comments

Jon Surrell Over a year ago

I don't see what closures have to do with this. It looks like things are just not being defined as the OP expected.

user400654 Over a year ago

There is "a" closure involved here, but it isn't the focus of the question or the problem in the question.

royhowie Over a year ago

@JonSurrell I mean, it has to do with scope, but I can probably remove that first sentence.

Collectives™ on Stack Overflow

Call Javascript function from dynamically loaded inner function

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related