jQuery : Defining elements in the object literal?

Question

I am trying to define all my main variables within an object called globals. The problem is that when it comes to using a previous element such as membersTab to grab faces I get the error:

Uncaught TypeError: Cannot read property 'membersTab' of undefined.

What am I doing wrong?

 var globals = {
  siteWrap      : $('#siteWrap'),
  content       : $('#content'),
  membersTab    : $('#membersTab'),
  faces     : globals.membersTab.find('.member'),
  members       : {},
  mID       : globals.siteWrap.attr('mID'),
  uID       : globals.siteWrap.attr('uID'),
  mTag      : globals.siteWrap.attr('mTag'),
  uFirst        : globals.siteWrap.attr('fn'),
  uLast     : globals.siteWrap.attr('ln'),
  host      : globals.siteWrap.attr('host'),
  dialogueBox   : $('#dialogueBox'),
  screen        : $('#screen').click(function(){ closeDialogue(true); })
  }

Exactly where is this code in relation to other code (incl. libraries)? Is it in it's own ` — Pointy, Feb 26 '11 at 16:58
See http://stackoverflow.com/questions/4616202/self-references-in-object-literal-declarations — Crescent Fresh, Feb 26 '11 at 17:00

score 1 · Accepted Answer · answered Feb 26 '11 at 16:57

1

If your definition of globals is not inside $(document).ready(), it is possible that the page is not yet loaded, hence $('#membersTab') returns an empty collection.

Moreover when you declare faces, the object globals is not yet created.

The simplest way is probably something like

globals = {};
globals.membersTab = $('#membersTab');
globals.faces = globals.membersTab.find('.member');
...

answered Feb 26 '11 at 16:57

Andrea

20,253
23
114
183

But it would still be a jQuery object. – BoltClock Feb 26 '11 at 16:58
1

If the definition of "globals" is inside the "ready" handler, then "globals" is not global. :-) – Pointy Feb 26 '11 at 16:59
"the object `globals` is not yet created" Actually, it is, at least in Firefox. I believe the literal is a shorthand for instantiating the object and adding properties to it one by one. – BoltClock Feb 26 '11 at 17:00
2

I think the object is created only when you end the literal, which is too late. Of course sometimes this does not matter. For instance a member of globals could be a function in which you use globals itself. This is perfectly legitimate, as the function will be invoked later, when globals is finally defined. But in this case you are using globals before you have finished defining it! – Andrea Feb 26 '11 at 17:03

jimmystormig · Answer 2 · 2011-02-26T19:07:47.843

0

The member membersTab isn't initialized until the literal is closed.

First declare the global object. The null assignments are not necessary but are there for clarity and also gives nice code completion if the editor has that support. This could reduce typing errors.

var globals = {
    siteWrap = null,
    content = null,
    ...
};

Initialize the object once the DOM is loaded.

$(function(){
    globals.siteWrap = $('#siteWrap');
    globals.content = $('#content');
    ...
})

edited Feb 26 '11 at 19:07

answered Feb 26 '11 at 17:20

jimmystormig

10,672
1
29
28

? the variable you create are not even properties of `globals`. And since you do not use `var`, they will end up in global scope. Finally, if you plan to declare all the properties of `globals` later, there is no need to declare them as `null` in the first place. – Andrea Feb 26 '11 at 17:30
Thanks for the notes, I updated my answer. I think there might be some reasons to declare the properties when the object is declare. – jimmystormig Feb 26 '11 at 19:10

jQuery : Defining elements in the object literal?

2 Answers2