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

Answer 1

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

Answer 2

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

Answer 3

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
}

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