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];
            }
        }
    }
}

Answer 1

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