Why is this element null?

Question

Clarification:

I'm not interested in using jQuery methods.

Summary

I use a method to only run my modules after the html has finished loading. It looks like this. page_complete is the id of the last element on the page.

$A.finish('page_complete', function () { 
    // page has finished loading
});

Finish is implemented like this. It is just a timer that checks of the existence of the last element. Once it finds it, it initializes all the modules.

I don't understand why the element is NULL as FF is telling me.

/*finish
** Once an element has been loaded an HTML focus event is fired
** on that ID.  It can not be cancelled and bubbles up
**
*/
$A.finish = function (id, callback) {
    var htm_finished = document.getElementById(id);
    if (htm_finished) {
        $A.initAll(); // intilAll will fire the init function of all modules.
        $A.makeEvent('focus', htm_finished);
        callback();
    } else {
        setTimeout(function () {
            $A.finish(id, callback);
        }, 10);
    }
};

Error in Firefox

...TypeError: this.E.ready is null @ ...

Note I put a comment where the error is.

Module with error

/*MUserAny
**
**
**   
*/
$A.module({
    Name: 'MUserAny',
    S: {
        DynSma: SDynSma,
        DynTwe: SDynTwe,
        DynArc: SDynArc,
        AniFlipMediaPane: SAniFlipMediaPane,
        AniFlipPage: SAniFlipPage,
        ClientStorage: SClientStorage
    },
    E: {
        ready: $A('#page_complete')[0]
    },
    init: function () {
        var pipe = {},
            this_hold = this;
        this.E.ready.addEventListener("focus", function (event) { // error is here.
            pipe = $A.definePipe(this_hold.Name);
            $A.machine(pipe);
        }, false);
    },
    pre: function (pipe) {
        var h_token = this.S.ClientStorage.get('h_token');
        if ((h_token === '0') || (h_token === 'undefined') || (h_token === null)
                || (h_token === undefined)) {
            this.S.AniFlipPage.run('sp');
            pipe.state = false;
        } else {
            pipe.server.smalls.h_token = h_token;
            pipe.state = true;
        }
        this.S.AniFlipMediaPane.run('mi_cover');
        return pipe;
    },
    post: function (pipe) {
        this.S.DynSma.run(pipe.server.smalls);
        this.S.DynArc.run(pipe.server.arcmarks);
        this.S.DynTwe.run(pipe.server.tweets);
        this.S.AniFlipPage.run(this.S.ClientStorage.get('page'));
        return pipe;
    },
    finish: function (pipe) {
    }
});

Answer 1

It looks like

E: {
    ready: $A('#page_complete')[0]
}

is being evaluated as part of the object literal, and if this is occuring before the page is complete you get your error. One quick and dirty solution may be to change E.ready to a function, which will only be called during init, which you know happens after page complete, something like

E: {
    ready: function() { return $A('#page_complete')[0]; }
},
init: function () {
    var pipe = {},
        this_hold = this;
    this.E.ready().addEventListener("focus", function (event) { ...