experimenting a loss of scope

Question

I'm doing my own jQuery plugin to show a search screen. I'm testing the code, but I have a problem with my code ...

I execute a secuence of chained events in my code and at a determined point in the code, I'm losing the original scope from where was called (analizing well, the result was expected, but is not what I want)

What can I do to preserve the the original scope of this object

_load_zona: function(e){
            var ev;
            ev = {
                names:{
                    key:    'id_zona',    
                    value:  'zona',       
                },
                elements:{
                    form:       this.o.form_name,
                    select:     'zona' 
                },
                data:{
                    id_gerencia: $(this.o.form_name + ' select[name="gerencia"]').val(),
                    id_zona: this.o.seleccion.id_zona
                },
                events:{
                    success: this._load_depto
                },
                url: this.o.url.zona,
                defaultText: 'Seleccione una zona ...'
            };
            if(this.o.csrf !== undefined){
                ev.names["csrf"] = this.o.csrf.key;
                ev.data[this.o.csrf.key] = this.o.csrf.value;
            }
            this._commonFillSelect(ev);
        },
        _load_gerencia: function(e){
            var ev;
            ev = {
                names:{
                    key:    'id_gerencia',  
                    value:  'gerencia',     
                },
                elements:{
                    form:   this.o.form_name,
                    select: 'gerencia' 
                },
                data:{
                    id_gerencia: this.o.seleccion.id_gerencia
                },
                events:{
                    success: this._load_zona
                },
                url: this.o.url.gerencia,
                defaultText: 'Seleccione una gerencia ...'
            };
            if(this.o.csrf !== undefined){
                ev.names["csrf"] = this.o.csrf.key;
                ev.data[this.o.csrf.key] = this.o.csrf.value;
            }
            this._commonFillSelect(ev);
        },

this._commonFillSelect(ev) its a function that make the process of filling via AJAX the select options, update the component if necesary, when everything is ok take the value from success and execute it.

this code is in a external JavaScript file

in coclusion this is what happens

_load_Gerencia() -------> _commonFillSelect() ----> _load_zona();

When executes _load_zona(); the this Object have changed their scope and it is the original this object that i refered in _load_gerencia().

@michael Thanks for all the corrections. taking note .... – Rafael Nov 23 '15 at 23:28 — Rafael, Nov 23 '15 at 23:28

score 2 · Accepted Answer · edited May 23 '17 at 12:23

2

Before calling _load_zona() you can define another variable, usually "that" as the current scope's "this".

This method is commonly used in JS and widely discussed. Check out more information here: Is var self = this; a bad pattern?

edited May 23 '17 at 12:23

Community

1
1

answered Nov 23 '15 at 15:30

Rob

4,927
4
26
41

1

I guess, a `var that = this` at the beginning of each function (_load_gerencia, _load_zona ...) should be ok, replacing `this` with `that` for each reference – Hacketo Nov 23 '15 at 15:41

experimenting a loss of scope

1 Answers1