Javascript variable scope

Question

Is it possible for me to call selectCompanyJump(this) internally without calling it from App.site.profile?

Instead of doing App.site.profile.selectStateJump(this); can I do like parent.selectStateJump(this); without reassigning this outside of the .change() call?

$(document).ready(function () {
    App.site = function () {
        return {
            init: function () {
                this.profile.init();
            },
            profile: function () {
                var profile;

                return {
                    init: function () {
                        profile = $('div#profile');

                        $('select[name="company_id"]', profile).change(function () {
                            App.site.profile.selectCompanyJump(this);
                        });

                        $('select[name="state_id"]', profile).change(function () {
                            App.site.profile.selectStateJump(this);
                        });
                    },
                    selectCompanyJump: function (select) {
                        $(select.parent()).submit();
                    },
                    selectStateJump: function (select) {
                        $(select.parent()).submit();
                    }
                }
            }()
        }
    }();

    App.site.init();
});

Sean Adkinson · Accepted Answer · 2011-03-09 19:56:25Z

You can reference the "this" scope you want as another variable outside change() function definitions:

     profile: function () {
            var profile;

            return {
                init: function () {
                    profile = $('div#profile');
                    var self = this;

                    $('select[name="company_id"]', profile).change(function () {
                        self.selectCompanyJump(this);
                    });

                    $('select[name="state_id"]', profile).change(function () {
                        self.selectStateJump(this);
                    });
                },
                selectCompanyJump: function (select) {
                    $(select.parent()).submit();
                },
                selectStateJump: function (select) {
                    $(select.parent()).submit();
                }
            }
        }()

detaylor · Accepted Answer · 2011-03-09 20:22:58Z

Assuming that you are just using the select argument of your functions to reference the element that triggered the event you could just pass a pointer to the event binder and then use the this keyword.

profile: function () {
            var profile;

            return {
                init: function () {
                    profile = $('div#profile');
                    $('name="state_id"', profile).change(this.selectStateJump);

                },
                selectStateJump: function () {
                    $(this).parent().submit();
                }
            }

vittore · Accepted Answer · 2011-03-10 01:27:53Z

you can do the following

$(document).ready(function () {
App.site = function () {
    var me = this;
    me.selectStateJump = function selectStateJump (select) {
                    $(select.parent()).submit();
                }
    return {
           ....
           selectStateJump: selectStateJump
    }

and you'll be able to call just me.selectStateJump()

EDIT:

actually below would be enough

$(document).ready(function () {
    App.site = function () {
        function selectStateJump (select) {
                $(select.parent()).submit();
        }
return {
       method : function(select) {
           selectStateJump(select);
       }
       selectStateJump: selectStateJump
}

you've set me to be a global variable, var me = this is better
@meouw - actually var me = this is what i intended to write, thank you!

Collectives™ on Stack Overflow

Javascript variable scope

3 Answers 3

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Related