Having to use $(document).ready() multiple times in same script

Question

I have a script with the following structure:

Test = {

    CONSTANTS : {},
    VARIABLES : {},
    MARKUP : {},
    FUNCTIONS : {
        init : function () {

            // Access variable from different namespace
            var all_constants = DifferentNamespace.CONSTANTS; // WORKS
            var tester = DifferentNamespace.CONSTANTS.chunk_of_markup; // SAYS UNDEFINED
        }
    },
    init : function () {

        // Call real init() function

        $(document).ready(function () {

            Test.FUNCTIONS.init();
        });
    }

};

$(document).ready(function () {

    Test.init();
});

If I remove either of the $(document).ready(..) function calls, when I try to access a constant from a different namespace it is undefined; with both is works well.

As you can see I'm using two init() functions, one it just to neaten up the call to init because I have wrapped functions inside an additional object.

If I remove the function that is on the same level as CONSTANTS, VARIABLES etc and try to call the init() within Test.FUNCTIONS it still does not work.

Edit:

If i console.log(all_constants) I get the full object (with .chunk_of_markup) but if I console.log(tester) is get undefined. If i wrap tester i get []

I should also note that the other namespace gets the markup from a seperate file.

Any ideas why?

Answer 1

Having two document ready doesn't make a difference here. You could have one document.ready and/or call Test.FUNCTIONS.init directly and all should work, and the fact that they are in different namespaces doesn't matter as well.

As for why you're getting undefined, I think it is probably because your chunk_of_markup variable is actually undefined at that point. My guess is that you're getting the value for it through AJAX and so the call is done asynchronously which means the DOM will be ready before it actually returns a value. When you use the Debugger then the value is evaluated at the point of time where you run the command so by then, the async call already returns successfully (it's a race condition, if you're fast enough and your AJAX is slow then you can still get undefined, and it's also why 2 ready functions happen to make it slow enough for the AJAX call to return but it's still unreliable).

In all cases, if my theory is correct, then you need to hook to the callback of the AJAX request rather that DOM ready event, this is the only place where you can guarantee that your variable is defined.

Answer 2

Why not call the function init() in the document Handler itself.. I don't think that will lead to the same problems.. You can remove the Test.init() completely as it does not seem to do anything in here

Test = {
    CONSTANTS : {},
    VARIABLES : {},
    MARKUP : {},
    FUNCTIONS : {
        init : function () {

            // Access variable from different namespace
            var all_constants = DifferentNamespace.CONSTANTS; // WORKS
            var tester = DifferentNamespace.CONSTANTS.chunk_of_markup; // SAYS UNDEFINED
        }
    }
};

$(document).ready(function () {

    Test.FUNCTIONS.init();
});