Fixing Sys.Application.initialize … Again

Download the text version of the changes

In a past post, I highlighted a problem with the method ASP.NET AJAX uses to determine if the DOM is ready to be modified. (Other developers have since commented that they’ve seen this problem in the wild.) I followed that post with another one where I provided code changes to fix the problem. Through comments on that post, talking with other developers, and reading other people’s blogs, I determined that it was a little bit unelegant and didn’t take into account all situations.

So, I wanted to take a few minutes and revisit this topic; hopefully for the last time, and provide a more complete ASP.NET AJAX solution for this problem.

The code I’m about to cover wasn’t designed, developed, or thought up by me. Rather it’s a mis-mash of different developers working on a problem. You could say it’s open source at its best. The code I’m actually going to provide comes from Diego Perini. He has put together a complete solution that works across all browsers. He, in turn, borrows from Dean Edwards and others.

So, I’ve adapted his code to the ASP.NET AJAX environment.

First, here’s the new version of Sys.Application.initialize:

  function Sys$_Application$initialize() {
      if(!this._initialized && !this._initializing) {
          this._initializing = true;
          var u = window.navigator.userAgent.toLowerCase(),
              v = parseFloat(u.match(/.+(?:rv|it|ml|ra|ie)[\/: ]([\d.]+)/)[1]);

          var initializeDelegate = Function.createDelegate(this, this._doInitialize);
          
          if (/WebKit/i.test(u) && v < 525.13) 
          { 
              this._load_timer = window.setInterval(function() 
              {
                  if (/loaded|complete/.test(document.readyState))
                  {
                      initializeDelegate(); 
                  }
              }, 10);
          }
          else if (/msie/.test(u) && !window.opera)
          {
              document.attachEvent('onreadystatechange',
                  function (e) {
                      if (document.readyState == 'complete') {
                          document.detachEvent('on'+e.type, arguments.callee);
                          initializeDelegate();
                      }
                  }
              );
              if (window == top) {
                  (function () {
                      try {
                          document.documentElement.doScroll('left');
                      } catch (e) {
                          setTimeout(arguments.callee, 10);
                          return;
                      }
                      initializeDelegate();
                  })();
              }

          }
          else if (document.addEventListener
              &&  ((/opera\//.test(u) && v > 9) ||
                  (/gecko\//.test(u) && v >= 1.8) ||
                  (/khtml\//.test(u) && v >= 4.0) ||
                  (/webkit\//.test(u) && v >= 525.13))) {
              document.addEventListener("DOMContentLoaded", initializeDelegate, false);
          }
          else
          {
              $addHandler(window, "load", initializeDelegate);
          }   
      }
  }

Here’s the _doInitialize method:

  function Sys$_Application$_doInitialize() {
       if (this._initialized) {
           return;
       }
       Sys._Application.callBaseMethod(this, 'initialize');
       if (this._load_timer !== null)
       {
           clearInterval(this._load_timer);
           this._load_timer = null;
       }
       var handler = this.get_events().getHandler("init");
       if (handler) {
           this.beginCreateComponents();
           handler(this, Sys.EventArgs.Empty);
           this.endCreateComponents();
       }
       if (Sys.WebForms) {
           this._beginRequestHandler = Function.createDelegate(this, this._onPageRequestManagerBeginRequest);
           Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(this._beginRequestHandler);
           this._endRequestHandler = Function.createDelegate(this, this._onPageRequestManagerEndRequest);
           Sys.WebForms.PageRequestManager.getInstance().add_endRequest(this._endRequestHandler);
       }
       
       var loadedEntry = this.get_stateString();
       if (loadedEntry !== this._currentEntry) {
           this._navigate(loadedEntry);
       }

       this.raiseLoad();
       this._initializing = false;
   }

Finally, here’s the Sys.Application._loadHandler method, which hasn’t changed since the first version.

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

Just like last time, the majority of the work takes place in the initalize method.