CODEWITHSUNDEEP
javascriptscope
Ben
Ben

Reputation: 62464

Javascript variable scope

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();
});

Upvotes: 2

Views: 184

Answers (3)

vittore
vittore

Reputation: 17589

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
}

Upvotes: 0

detaylor
detaylor

Reputation: 7280

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();
                }
            }

Upvotes: 0

Sean Adkinson
Sean Adkinson

Reputation: 8615

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();
                }
            }
        }()

Upvotes: 1

Related Questions