Javascript scope problem

Question

I'm having some trouble with scoping in javascript. I'm using a jquery plugin to write a class that is a wrapper for our dropdown controls.

the problem is in the loadJsonList function, the call to this.addOption(s.itemValue, s.itemText); does not work as the method doesn't exist. I know JS has odd scoping but I've no idea how i can run that function in that scope??

jQuery.Class.extend("DDL",
{
    id: '',
    isTelerik: false
},
{
    init: function (newid) {
        this.Class.id = newid;

    },
    getValue: function () {
        return $('#' + this.Class.id).val();
    },
    getText: function () {
        return $('#' + this.Class.id + ' :selected').text();
    },
    setValue: function (newValue) {
        try {
            $('#' + this.Class.id).val(newValue);
        } catch (err) {
            alert(err);
        }
    },
    setText: function (newText) {
        try {
            $('#' + this.Class.id + ' :selected').text(newText);
        } catch (err) {
            alert(err);
        }
    },
    loadJsonList: function (list, param1, param2, param3) {
        this.clearItems();

        //init the service
        var j = new JsonRPC();

        // get the cut down data table
        var dt = j.getDropDownData(list, param1, param2, param3);

        // parse the datatable and load it into the telerik combo box
        jQuery.each(dt, function (i, s) {
            this.addOption(s.itemValue, s.itemText);
        });
    },
    addOption: function (value, text) {
        $('#' + this.Class.id).append('<option value="' + value + '">' + text + '</option>');
    },
    removeOption: function (value) {
        $('#' + this.Class.id + ' option[value="' + value + '"]').remove();
    },
    clearItems: function () {
        $('#' + this.Class.id + ' option').remove();
    }
});

To be slightly pedantic, when talking about this you're not talking about scoping but binding. — slebetman
– slebetman, Commented Nov 18, 2010 at 3:03

gnarf · Accepted Answer · 2010-11-18 02:59:59Z

3

Simple one. JavaScript uses function level scoping, so you save a reference to the this variable under some other name:

loadJsonList: function (list, param1, param2, param3) {
        // save a reference for use in the each function later
        var self = this; 
        this.clearItems();

        //init the service
        var j = new JsonRPC();

        // get the cut down data table
        var dt = j.getDropDownData(list, param1, param2, param3);

        // parse the datatable and load it into the telerik combo box
        jQuery.each(dt, function (i, s) {
            // use self instead of this!
            self.addOption(s.itemValue, s.itemText);
        });
    },

answered Nov 18, 2010 at 2:59

gnarf

107k26 gold badges129 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jacob Relkin · Accepted Answer · 2010-11-18 03:00:50Z

2

this in that function's scope is not equal to the same this of your object, you need to assign an alias variable to it in the surrounding scope in order to access it inside the inner function:

var self = this;     
jQuery.each(dt, function (i, s) {
     self.addOption(s.itemValue, s.itemText);
});

answered Nov 18, 2010 at 3:00

Jacob Relkin

163k34 gold badges352 silver badges321 bronze badges

Comments

Hady · Accepted Answer · 2011-06-06 11:53:51Z

0

What you are looking for is jQuery's proxy method (http://api.jquery.com/jQuery.proxy):

// Description: Takes a function and returns a new one that will always have a particular context.
jQuery.proxy( function, context )

So in your above example you'd use it as follows:

loadJsonList: function (list, param1, param2, param3) {

   // ...

   jQuery.each(dt, jQuery.proxy(function (i, s) {
       this.addOption(s.itemValue, s.itemText);
   }, this));
},

answered Jun 6, 2011 at 11:53

Hady

2,6942 gold badges31 silver badges36 bronze badges

Collectives™ on Stack Overflow

Javascript scope problem

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related