Create "namespace" in $(document).ready(function() {..});

Question

// first.js
$(document).ready(function() {
   var MyNamespace = {};
});

// second.js
$(document).ready(function() {
   console.log(MyNamespace);
});

Running this script I'm getting error Uncaught ReferenceError: MyNamespace is not defined. I suppose, I'm getting this error because definition of MyNamespace and MyNamespace calling are in different scopes. How do I solve this problem?

I need to create namespace inside $(document).ready() wrapper because functions in this namespace will use jQuery methods etc.

What is the best practice?

Thank you!

you need to define the variable outside the document ready function, then assign a value within the function. Or, take out the var — Abe Petrillo
– Abe Petrillo, Commented Nov 22, 2011 at 9:30
@Tomalak, one $(document).ready() I'm using in first.js and second in second.js — Kirzilla
– Kirzilla, Commented Nov 22, 2011 at 9:31
@Abe Petrillo, but I'm going to use $ inside my namespace methods. So I have to be sure that jQuery is loaded and DOM is ready. It is the main reason why I'm asking this question... — Kirzilla
– Kirzilla, Commented Nov 22, 2011 at 9:32
@Kirzilla - You can still declare the namespace var outside of the ready event handlers. As long as code that requires the DOM to be ready stays inside, it won't make any difference. — James Allardice
– James Allardice, Commented Nov 22, 2011 at 9:37

steveyang · Accepted Answer · 2011-11-22 09:46:39Z

2

There are two things you need to change:

Put the MyNamespace in a global scope;
Avoid redefining MyNamespace in each file;

You put var MyNamespace = MyNamespace || {}; in front of both your js files. It decalres MyNamespace as an object if it isn't defined before.

// first.js
var MyNamespace = MyNamespace || {};
$(document).ready(function() {
   console.log(MyNamespace);
});

// second.js
var MyNamespace = MyNamespace || {};
$(document).ready(function() {
   console.log(MyNamespace);
});

answered Nov 22, 2011 at 9:46

steveyang

9,3189 gold badges58 silver badges82 bronze badges

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

Comments

ipr101 · Accepted Answer · 2011-11-22 09:31:30Z

2

It should work if you define your variable outside of the document ready handler -

var MyNamespace = {};
$(document).ready(function() {
    console.log(MyNamespace);
});

answered Nov 22, 2011 at 9:31

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

Comments

Tim Rogers · Accepted Answer · 2011-11-22 09:31:03Z

0

Create the namespace outside the scope, then add methods to it within the scope:

var MyNamespace = {};

$(document).ready(function() {
   MyNamespace.MyFunction = function () { ... };
});
$(document).ready(function() {
   console.log(MyNamespace);
});

answered Nov 22, 2011 at 9:31

Tim Rogers

21.8k8 gold badges55 silver badges69 bronze badges

Comments

Richard Dalton · Accepted Answer · 2011-11-22 09:31:38Z

0

Create it outside and update it inside:

var MyNamespace = {};

$(document).ready(function() {
   MyNamespace.Example = new function() { // do something };
});

$(document).ready(function() {
   console.log(MyNamespace);
});

answered Nov 22, 2011 at 9:31

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Comments

Tomas Vana · Accepted Answer · 2011-11-22 09:31:55Z

0

Using var defines a variable local to the function, which is not visible outside of this scope. Leaving out var would define a global variable, accessible in the other function as well. In general you should rather avoid using global variables, but if that's what you need, simply say MyNamespace = {};

answered Nov 22, 2011 at 9:31

Tomas Vana

19k9 gold badges57 silver badges67 bronze badges

Comments

Luo · Accepted Answer · 2011-11-22 09:32:50Z

-1

Use the 'window' object.

$(document).ready(function () {
    window['x'] = 'test';
});
$(document).ready(function () {
    alert(x);
});

answered Nov 22, 2011 at 9:32

Luo

1621 silver badge12 bronze badges

Collectives™ on Stack Overflow

Create "namespace" in $(document).ready(function() {..});

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related