Javascript scope help

Question

I am relatively new to javascript so please be patient if what i am asking is completely stupid!

I am trying to make a simple module. Inside the module i want to have a config object that holds settings for the module. I am also using jquery. The jquery selectors work only when in a function directly in the main object/module.

I understand that javascript has functional scope so I am suprised that I cannot use the jquery selectors anywhere inside the module.

EDIT: I want to be able to directly set all of my configs inside the configs object using jquery selectors. This way i keep all the messy stuff inside one place and can then access configs.whatever throughout the rest of the module. At the moment jquery selectors do not work inside the configs module.

 var OB = function() {
 var configs = {
 'mode' : 'test',
 'numOfSelects' : $('.mySelect').find('select').length, // This doesnt work
 }
 var getMode = function() {
 return configs.mode;
 }
 function init() { 
 alert(configs.numOfSelects); // This alerts 0 until the following line
 alert($('.mySelect').find('select').length); // This correctly alerts 2
 };
 var handlers = {
 successHandler : function() {
 alert("Success");
 },
 errorHandler : function() {
 alert("error");
 }
 }
 return {
 init : init,
 getMode : getMode
 }
}( );
$(document).ready(function(){
 OB.init();
});

• Aardvark: Could you edit this to include exactly what your question is? What are you expecting? What have you already tried? What results are you getting? How can we help? Whats your favorite color? Thanks :)
• Marcelo Cantos: jQuery selector are global in scope, and so should be accessible from anywhere. Are you sure they're not accessible? What are the symptoms?
• David: Hi Marcelo. there are two select boxes called in the dom with the class .mySelect. When i call alert(configs.numOfSelects); in the example above - i get 0 When i call alert($('.mySelect').find('select').length); which is in the init function i get the correct amount of 2

Answer 1

It isn't that jQuery isn't in scope — that's that the code isn't executing when you think it is. The variable config is defined when that anonymous function (var OB = function() {}()) is executed. The DOM isn't ready yet, so that DOM traversal doesn't find anything. When you do the DOM traversal in init(), that isn't executed until it's explicitly called inside the $(document).ready() handler, at which point that DOM is set up. That's the difference you're seeing.

• David: Thanks chuck. I knew i was being stupid. You wouldnt believe how long i have tried working this out.
• David: I want to give @chuck, @absynce and @marcelo the correct answer as you all pointed it out to me. But i cant.

Answer 2

OB() needs to be called after the DOM has completely loaded. Hence the answer by Marcelo, which calls OB() in the ready() method.

• David: Aaaahhh!!! Now i see. I am calling it before the dom has loaded and so there are no select boxes to count yet!.
• absynce: Chuck, you beat me to it:) You did a better job of describing it as well.

Answer 3

EDIT: It's funny that my original answer below was incorrect because I didn't notice two little parentheses at the end of the definition of OB, and it turns out that these are the culprit. You define and then immediately invoke OB, which is before the DOM has been fully loaded. Remove those parentheses and make the change I suggest below.

Calling OB() returns an object with init and getMode, but you haven't called OB(), you've only referred to OB. Try this instead:

$(document).ready(function(){
 OB().init();
});

Also, I assume you want to later refer to getMode. In particular, you will to get the copy of getMode that has access to the same local scope that your init() call had access to. To achieve this, you will need to store the result of calling OB() for later use:

var ob;
$(document).ready(function(){
 ob = OB();
 ob.init();
});
function some_other_function() {
 ... ob.getMode() ...;
}

• David: But i have called OB(). I have included the opening and closing parenthesis at the end of the function as in }( )
• Marcelo Cantos: Silly me, I didn't notice those parentheses.
• David: Something else just occurred to me, one of the main points of the module pattern is to reduce global variables. If I have everything encapsulated inside OB but then also introduce ob ament i then introducing another global. albeit, only 1 but stil...
• Marcelo Cantos: @David: You normally avoid that by placing all uses of ob inside the document.ready handler.
• David: So you mean basically keep the whole module inside document.ready ?