Question

What I’ve got is an ASP.NET MasterPage/ContentPage, where the ContentPage utilizes an UpdatePanel with UpdateMode set to “Conditional”. This ContentPage is basically a MultiView that has 3 views: Setup, Confirm, and Complete. I’ve got navigation buttons that when clicked, go to the server, do what they need to do and finally update the UpdatePanel so it can come back. My problem lies in my JavaScript.

I have the following Global object literal named PAGE:

PAGE = {

    panel : undefined,
    currentView: undefined,

    buttons : {

        all : undefined,
        cont : undefined

    },

    views : {

        setup       : {},
        confirm     : {},
        complete    : {}

    }

};

My PAGE.init() function looks like this:

PAGE.init = function() { console.log("PAGE.init() fired");

    this.panel    = $('div[id$="Panel_Page"]');
    this.currentView  = this.panel.find('input[id$="Hidden_CurrentView"]').val();
    this.buttons.all  = this.panel.find('input[type="submit"]');
    this.buttons.cont = this.panel.find('input[id$="Button_Continue"]');

    this.buttons.all.click(function() { PAGE.panel.hide(); });

    switch (this.currentView) {

        case "confirm"      : this.views.confirm.init();    break;
        case "complete"     : this.views.complete.init();   break;
        default             : this.views.setup.init();      break;

    }

};

And last, but not least, it all gets kicked off by:

// Fire events on initial page load.
PAGE.init();

// Fire events for partial postbacks.
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(PAGE.init);

My issue is that when it first fires Page.init() everything is great, however, when you click a button it immediately throws an error of: Uncaught TypeError: Cannot set property ‘all’ of undefined. Now I’ve tried to figure this out, but I’m at a loss. It seems as though this happens to ANY nested object literal off of the root of PAGE. The immediate properties like PAGE.panel work just fine, but as soon as you need access to PAGE.buttons.all or PAGE.views.setup, it throws this error. I have never seen this before.

Any ideas out there?

Answer 1

Instead of using this inside of the PAGE.init() function, I used PAGE and that corrected the issue. Apparently this was not referring to PAGE but rather PAGE.init. Still not sure why, as I do this elsewhere and it works.

For instance, the following use of this works and it’s no different than how I use it in my OP:

PAGE.views.setup = {

    buttons : { 

        all : undefined,
        cont : undefined

    },

    init: function() {

        var self = this,
            buttons = self.buttons;

            buttons.all = PAGE.panel.find('input[type="submit"]');

        buttons.all.click(function() { alert(this.id + " clicked"); });

    }

}