Question

I have these Javascript classes/code:

function PageManager () {
    this.digital_channels = undefined;

    this.loadConfiguration = function () {
        this.digital_channels = new Array ();
        var self = this;

        $.ajax ("path_to_server",
                {
                    type: "post",
                    cache: true,
                    context: self,
                    success: function (data) {
                        var self = $(this);
                        $xmlDoc = $($.parseXML (data));
                        $xmlDoc.find ("channel".each (function () {
                            self.digital_channels.push (new DigitalChannel ($(this)));
                        });
                    }
                });
    }
}

function DigitalChannel ($xmlDoc) {
    // Object: parse XML and construct here
}

Inside of the AJAX success method, var self = $(this); is my attempt to save what I thought would be the class object. self.digital_channels.push (new DigitalChannel ($(this))); is supposed to construct a new DigitalChannel object with $(this) being the current XML DOM object. I want that new object to go into my array. The array is always undefined at this point.

Can somebody explain how I do this?

Answer 1

Your mixing and overcomplicating things here. Try the following:

function PageManager ()
{
  this.digital_channels = undefined;
  this.loadConfiguration = function () {
  this.digital_channels = new Array ();
  //var self = this; // Remove this

    $.ajax ("path_to_server",
            {
                type: "post",
                cache: true,
                context: this, // Change to `this`
                success: function (data) {
                    var that = this; // instance of PageManager
                    $xmlDoc = $($.parseXML(data));
                    $xmlDoc.find ("channel").each (function () {
                        that.digital_channels.push (new DigitalChannel ($(this)));
                    });
                }
            });
   }
}