Javascript scope problems

Question

I have a bunch of javascript "classes" (Prototype) that make up the inheritance hierarchy of a web application I'm building. I've been trying to organize these classes into "namespaces":

var UI = {
Control: Class.create(KVO.Object,
{
...
})
}

The classes are organized into separate files, so when I wanted to add a class to UI, I did this in a separate file:

UI.TextFieldControl = Class.create(UI.Control,
{
...
})

But, when I try to use UI.TextFieldControl in my program after including the files, it is undefined. I guess this is a scope problem of some sort, because within the TextFieldControl file it is defined, but as far as I can understand UI.TextFieldControl should be defined after it is included; what am I doing wrong?

Answer 1

Have you tries using FireBug? Because by the code you provided nothing seems to be wrong. If your file includes are fine. Your controls should be defined.

1. Use FireBug and check your files and their order of loading. Maybe your UI.Control is being loaded after you define TextFieldControl? You'll also be able to see your UI namespace if it hass all the necessery classes and also try defining them by hand and see what happens.

2. If you're using IE you probably forgot to remove some trailing comma, that simply discarded the whole file with your TextFieldControl...

Answer 2

Ok, I found the problem; I was including the file that defines UI twice, once before the file that defines UI.TextFieldControl and once after. Thanks for your responses; I was beginning to worry I didn't understand javascript scope at all!