Update: Fixing Sys.Application.initialize

See this post for the latest solution. This one has a small problem with it.

Yesterday I posted an entry where I wrote about an initialization problem in the AJAX Library portion of ASP.NET AJAX. Today, having a few spare minutes and already having found a few entries on the setTimeout problem which I linked to yesterday, I decided to do a bit more research on the window.onload problem and see how other libraries had gotten around the issue. I started with JQuery because it’s next on my list of AJAX libraries to become familiar with. So I downloaded the library, opened Visual Studio, and took a look around (don’t you love the open source nature of JS?!).

What I found started me down a path of getting kind of annoyed at Microsoft and coming up with a good solution for the Sys.Application.initialize problem.

Here’s the excerpt from JQuery that is responsible for notifying the system that the browser is ready to be modified.

// Mozilla, Opera (see further below for it) and webkit nightlies currently support this event
if ( document.addEventListener && !jQuery.browser.opera)
    // Use the handy event callback
    document.addEventListener( "DOMContentLoaded", jQuery.ready, false );

// If IE is used and is not in a frame
// Continually check to see if the document is ready
if ( jQuery.browser.msie && window == top ) (function(){
    if (jQuery.isReady) return;
    try {
        // If IE is used, use the trick by Diego Perini
        // http://javascript.nwbox.com/IEContentLoaded/
        document.documentElement.doScroll("left");
    } catch( error ) {
        setTimeout( arguments.callee, 0 );
        return;
    }
    // and execute any waiting functions
    jQuery.ready();
})();

Nothing too fancy here, but what got me was two things. First, if the browser supported the DOMContentLoaded event, they respected it. Seems simple enough, why didn’t Microsoft do that? Second, they re-used somebody else’s proven code to handle browsers that don’t support the DOMConentLoaded event (e.g. IE). Because the code had a link it I followed the trail, which brought me to Diego Perini’s site where he listed the original concept and explained how it worked. BUT, from there, he linked to four other people that had written other ways (ok, there’s some repeat among them) of getting around the missing DOMContentLoaded event, some of which were newer and some better than his.

From there, I traveled to other blog entries listing other ways of getting around it with development efforts on going.

So, after I perused the web for 20 minutes I had 3 valid alternatives to using the setTimeout method that Microsoft uses in the AJAX Library.

IMHO, the best total solution has been crafted by the venerable Dean Edwards who pulled concepts from the solution engineered by Matthias Miller. Another possibility is this one, which is Diego Perini’s that is used by JQuery.

Given this information, I figured it’s probably pretty easy to fix Sys.Application.initialize, and also wonder why MSFT decided to come up with their own way. I’m trying to look at the timeline and I guess MSFT had written too much of ASP.NET AJAX before this problem was solved correctly? Plus, they were trying to support as many browser’s as possible and the solution I’ll cover now doesn’t support any legacy browsers such that everything executes when the window’s load event fires. Hopefully, MSFT will adopt something like the following solution for their Sys.Application.initialize problem.

So here’s my solution to Sys.Application’s initialize problem. I’m sure it’s not perfect and may not support all browsers (I’m testing Windows Safari 3.1.1, IE 7, FF 3.0 RC2, FF 2.0, and Opera 9.0), but it’s pretty much re-used directly from Dean’s code and he’s a pretty smart guy. If a browser isn’t supported, I fall back to using window.onload automatically to execute the _doInitialize method when the window loads. I can’t claim (and don’t want any) rights  to this code since I gleaned most of it from Dean’s site so if you want to use this, go right ahead.

Here’s the new body of Sys.Application.initialize.

function Sys$_Application$initialize() {
    if(!this._initialized && !this._initializing) {
        this._initializing = true;
        var loadMethodSet = false;
        var initializeDelegate = Function.createDelegate(this, 
          this._doInitialize);
        if (document.addEventListener) {
            loadMethodSet = true;
            document.addEventListener("DOMContentLoaded",
                     initializeDelegate, false);
        }
        if (/WebKit/i.test(navigator.userAgent))
        {
            loadMethodSet = true;
            this._load_timer = setInterval(function()
            {
                if (/loaded|complete/.test(document.readyState))
                {
                    initializeDelegate();
                }
            }, 10);
        }
        else
        {
            /*@cc_on @*/
            /*@if (@_win32)
            loadMethodSet = true;
            document.write("<script id=__ie_onload defer src=//0>
                            <\/scr"+"ipt>");
            var deferScript = document.getElementById("__ie_onload");
            if (deferScript) {
                deferScript.onreadystatechange = function() {
                    if (this.readyState == "complete") {
                        initializeDelegate();
                    }
                };
            }
            /*@end @*/
        }

        // only if no other method will execute initializeDelegate is
        // it wired to the window's load method.
        if (!loadMethodSet)
        {
            $addHandler(window, "load", initializeDelegate);
        }
    }
}

Another necessary change is clearing the interval created by the Safari creator if it exists. We do this in the _doInitialize method. Doing it inside the if statement caused the initializeDelegate to execute twice. I’m not sure why, but it’s a simple fix.

function Sys$_Application$_doInitialize() {
       if (this._load_timer !== null)
       {
           clearInterval(this._load_timer);
           this._load_timer = null;
       }
       Sys._Application.callBaseMethod(this, 'initialize');

…

Of course, we attach the _load_timer to Sys._Application.

Sys._Application = function Sys$_Application() {
    Sys._Application.initializeBase(this);
    this._load_timer = null;
    this._disposableObjects = [];
  ...

Finally, if the user doesn’t use ScriptManager to register the Sys.Application.initialize method, we need to automatically call _doInitialize rather than initialize as is done currently. So the _loadHandler method goes from

function Sys$_Application$_loadHandler() {
    if(this._loadHandlerDelegate) {
        Sys.UI.DomEvent.removeHandler(window, "load", 
            this._loadHandlerDelegate);
        this._loadHandlerDelegate = null;
    }
    this.initialize();
}

to

function Sys$_Application$_loadHandler() {
    if(this._loadHandlerDelegate) {
        Sys.UI.DomEvent.removeHandler(window, "load", 
          this._loadHandlerDelegate);
        this._loadHandlerDelegate = null;
    }
    this._initializing = true;
    this._doInitialize();
}

That’s about it. I’m going to test this is a large scale application tomorrow and see how it does, but it passes all of my tests at the moment.