Javascript OOP inheritance not working

Question

So I am writing something using augment for inheritance and for some reason I can run this.setButtons(type) and console.log(this.buttons) in that method, but when I run my this.getButtons() it comes back as undefined, even though getButtons just returns this.buttons. Any help would be greately appreciated. I will post up all the code I have so far, because maybe I'm not inheriting properly. Thank you in advance.

var ContextMixin = function () {};
ContextMixin.prototype = {
    createElements: function (el, mode, type) {
        var m;
        if (mode == 'exact') {
            $("#" + el).append("<ul id='contextmenu'>");
        } else {
            $(el).each(function () {
                m = $(this).append("<ul id='contextmenu'>");
            });
            $('body').append(m);
        }
        $("#contextmenu").css({
            'position': 'absolute',
            top: 13,
            left: 13
        });
        var new_buttons = this.getButtons();
        $.each(this.buttons['buttons'], function () {
            m.append("<li id='" + this + "'>" + this + "</li>");
        });
    },
    attachEvents: function () {
        functions = this.getFunctions(type);
        buttons = this.getButtons();
        for (index in buttons['buttons']) {
            addEvent(buttons['buttons'][index], this.functions[index][0], this.functions[index][1]);
        };
    },
    setFunctions: function (type) {
        var callback = {
            success: function (msg) {
                this.functions = msg;
            },
            failure: function () {
                alert('Error getting functions')
            }
        };
        $.ajax({
            type: 'GET',
            url: 'function_list.php?type=' + type,
            success: function (msg) {
                this.functions = msg;
            }
        });
    },
    getFunctions: function () {
        return this.functions;
    },
    setType: function (value) {
        this.type = value;
    },
    getType: function () {
        return this.type;
    },
    setButtons: function (type) {
        $.ajax({
            type: 'GET',
            url: 'button_list.php?type=' + type,
            success: function (reply) {
                this.buttons = reply;
            }
        });
    },
    getButtons: function () {
        return this.buttons;
    }
}

function createMenu(el, type, mode) {
    this.setButtons(type);
    this.setFunctions(type);
    this.createElements(el, mode, type);
}

augment(createMenu, ContextMixin);

function augment(receivingClass, givingClass) {
    if (arguments[2]) { //Only give certain methods.
        for (var i = 2, len = arguments.length; i < len; i++) {
            receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
        }
    } else { //Give all methods
        for (methodName in givingClass.prototype) {
            if (!receivingClass.prototype[methodName]) {
                receivingClass.prototype[methodName] = givingClass.prototype[methodName];
            }
        }
    }
}

user1106925 · Accepted Answer · 2012-01-24 20:22:52Z

2

Because this in the callback to the AJAX request is not your object.

Here's a common fix...

setButtons: function(type) {
    var self = this;  // keep a reference to this
    $.ajax({
        type: 'GET', 
        url: 'button_list.php?type=' + type,
        success: function(reply) {
            self.buttons = reply; // use the reference here
        }
    });
},

...but a better fix is to use the context: property of the $.ajax request...

setButtons: function(type) {
    $.ajax({
        type: 'GET', 
        context: this,  // set the context of the callback functions
        url: 'button_list.php?type=' + type,
        success: function(reply) {
            this.buttons = reply;
        }
    });
},

answered Jan 24, 2012 at 20:22

user1106925

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

5 Comments

Adam Rackis Over a year ago

I had no idea there was a context property on the ajax calls. That's cool. I wish I could +1 again. Odd you haven't gotten more for this answer. I guess the community is sick of "this isn't what it should be" questions :)

user1106925 Over a year ago

@AdamRackis: Yes, the context is a nice clean way to do it, assuming you don't need access to the jqXHR object.

Rob Over a year ago

If I do that and set self = this or use the context in the ajax call and in my main function do this...function createMenu(el, type, mode) { this.setButtons(type); console.log(this.buttons); this.setFunctions(type); this.createElements(el, mode, type); } it logs undefined

user1106925 Over a year ago

@Rob: That's because your $.ajax request is asynchronous, so the console.log runs before the request is complete. In other words, code that comes after your this.setButtons(type); code will run immediately instead of waiting for the response. Any code that relies on the response must be called from within your success: callback to the request.

Rob Over a year ago

figured it out. when doing the inheritance with augment the prototype methods can't use the other methods in the prototype at instantiation. you have to var method = new class(opts); method.setButtons(type); var buttons = method.getButtons();

Mike Thomsen · Accepted Answer · 2012-01-24 20:23:09Z

0

If you change

ContextMixin.prototype = {
createElements

to

ContextMixin.prototype.createElements

it should work.

answered Jan 24, 2012 at 20:23

Mike Thomsen

37.7k11 gold badges63 silver badges86 bronze badges

1 Comment

user1106925 Over a year ago

OP is replacing the entire prototype object. That's allowed.

Adam Rackis · Accepted Answer · 2012-01-24 20:41:22Z

0

this is not what you think it is in your ajax callback—instead of being your current object, it's actually ~~the global object~~ the XHR object. All your callback is doing is putting a buttons property onto the xhr object.

You need to save this before your function runs:

setButtons: function(type) {
    var self = this;
    $.ajax({
        type: 'GET', 
        url: 'button_list.php?type=' + type,
        success: function(reply) {
            alert(reply);
            self.buttons = reply;
        }
    });
},

edited Jan 24, 2012 at 20:41

answered Jan 24, 2012 at 20:20

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

1 Comment

user1106925 Over a year ago

The default this value in the callback the jqXHR object.

Collectives™ on Stack Overflow

Javascript OOP inheritance not working

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related