Undefined property of variable in jquery

Question

What is the proper way to make this code work?

$(function(){

    var base = {
            $wrapper: $('.homepage_main'),
            $main: base.$wrapper.find('#primary').find('.home_slides').closest('[data-id="Colleague"]'),
            $panel: base.$wrapper.find('#sidebar').find('.home_slides').closest('[data-id="Colleague"]'),

            Template: {
                $img: function () { return $('img'); }
            },

            Modal: {
                $modalInterrupt: $('#searching_interruption'),
                Suggestion: {
                    $self: $('#suggested_colleague'),
                    $loading: base.Modal.Suggestion.$self.find('.gif_loading'),
                    $paging: base.Modal.Suggestion.$self.find('.pagination'),
                    $itemContainer: base.Modal.Suggestion.$self.find('.request_items'),
                    $itemClone: base.Modal.Suggestion.$itemContainer.find('[data-id="Clonable"]').clone().removeAttr('data-id').removeClass('hide'),
                    $lblCount: base.Modal.Suggestion.$self.find('[data-id="SuggestCount"]'),
                    $listItems: function () {
                        return base.Modal.Suggestion.$itemContainer.find('.coll_panel_content:not([data-id="Clonable"])');
                    }
                }
            }
        };
});

I'm getting Uncaught TypeError: Cannot read property '$wrapper' of undefined when you look at Google Chrome console.

Some fiddle

I tried pulling out the $wrapper and now I get new error:

Uncaught TypeError: Cannot read property 'Modal' of undefined

Another fiddle sample

I made this approach because it is more easy to manage. For example, if I have changed some class name or id on my html page, I just have to modify 1 specific variable in my jquery code and everything will be fine again. If you know a better approach, kindly share it to me.

Because you can't access the object nor its properties upon its creation. Try another approach, like closures, constructors or something. — Joseph
– Joseph, Commented Apr 4, 2013 at 6:16
All the references to base.XXX fail because the base variable hasn't been assigned yet. — Barmar
– Barmar, Commented Apr 4, 2013 at 6:17

Alfred Xing · Accepted Answer · 2013-04-04 06:22:50Z

You can't use the variable you're defining while you're defining it. So a shorter example would be:

var hi = "hi" + hi.length;

Because the variable isn't completely defined yet.

To make your code work, define the variables you need beforehand:

$(function(){
    var $wrapper = $('.homepage_main'),
        $modalSelf = $('#suggested_colleague'),
        $itemContainer = $modalSelf.find('.request_items');
    var base = {
            $main: $wrapper.find('#primary').find('.home_slides').closest('[data-id="Colleague"]'),
            $panel: $wrapper.find('#sidebar').find('.home_slides').closest('[data-id="Colleague"]'),

            Template: {
                $img: function () { return $('img'); }
            },

            Modal: {
                $modalInterrupt: $('#searching_interruption'),
                Suggestion: {
                    $loading: $modalSelf.find('.gif_loading'),
                    $paging: $modalSelf.find('.pagination'),
                    $itemClone: $itemContainer.find('[data-id="Clonable"]').clone().removeAttr('data-id').removeClass('hide'),
                    $lblCount: $modalSelf.find('[data-id="SuggestCount"]'),
                    $listItems: function () {
                        return $itemContainer.find('.coll_panel_content:not([data-id="Clonable"])');
                    }
                }
            }
        };
});

Collectives™ on Stack Overflow

Undefined property of variable in jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related