Update Many Raphael Papers

I have this Javascript class (cut down to necessary parts):

function DigitalChannel ($xmlDoc) {
    var self = this;
    // Parse definition from $xmlDoc

    self.firstRender = function (rootElem) {
        var html = "";  // Build HTML string to display object information
        rootElem.html (rootElem.html () + html);  // Make above HTML visible

        self.paper = Raphael ("digDot" + self.numIndex, 54, 38);
        self.svgImage = self.paper.circle (30, 20, 15).attr ({
            "stroke-width": "2",
            "stroke": "#000000",
            "fill": "#00FF00"
        });
    }

    self.updateStatus = function (newState) {
        self.state = newState;
        if (self.state !== self.normalState) {
            self.svgImage.attr ("fill", "#FF0000");
        }
        else {
            self.svgImage.attr ("fill", "#00FF00");
        }
    }
}

Now, please assume that all variables used in my methods were initialized properly from XML data (I have verified that this is the case with Firebug). A digital channel can either have a value of 0 or 1 and it can have a normal value of 0 or 1. If the current value matches the normal value, I want the circle that gets drawn to be green, otherwise red. Then I have this class:

function PageManager () {
    var self = this;
    self.base_url = "http://" + location.hostname + "...";
    self.digital_channels = new Array ();

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

    self.firstRender = function () {
          for (i in self.digital_channels) {
              self.digital_channels[i].firstRender ($("#rootElem"));
          }
    }

    self.updateDigitals = function () {
        var fullPath = self.base_url + "...";
        $.ajax (fullPath,
                {
                    type: "post",
                    cache: true,
                    context: self,
                    success = function (data) {
                        var digital_idx = 0;
                        var mask = 0x0001;
                        $xmlDoc = $($.parseXML (data));
                        $xmlDoc.find ("digital_inputs").each (function () {
                            var bits = parseInt开发者_运维知识库 ($.trim ($(this).text ()));
                            for (i = 0; i < 32; i++) {
                                self.digital_channels[digital_idx].updateState (bits & mask);
                                bits = bits >>> 1;
                                digital_idx += 1;
                            }
                        });
                    }
                });
    }
}

So at this point, I have defined everything I need, and then I do this:

var pageManager = new PageManager ();
pageManager.firstRender ();
pageManager.updateDigitals ();

Again, assume that everything happens in the proper order. The actual classes are more complicated and nothing will get called before the right time. I have used Firebug to step through everything and what I have right now is a page of 64 green dots after pageManager.firstRender ();, which is what I want. When I call pageManager.updateDigitals ();, I should see the first 32 dots stay green and the next 32 dots turn red. I have seen everything code-wise internally go OK, even to the point where DigitalChannel.updateState (newState); actually changes the color of svgImage circle; however, only the very last dot visually changes color. I apologize for such a long question, but does anybody have any idea why?

Could it be because self.normalState is not defined in DigitalChannel?

It turned out that it was a timing issue. Creating the HTML that would hold the Raphael paper and then immediately creating the paper caused something to get messed up, so I added a delay in the creation of the papers and everything is working as expected now.