Are there any onAvailable or onContentReady events for DOM elements?

Hello,

I am wondering if the client side classes provide a way to check when an element is available and/or when an element is complete (has all content). I know that this type of functionality is present in the Yahoo UI library and would like to have it in the MS Ajax library.

Thanks!

I was looking for this as well, so I figured others might be too. This is what I came up with.

It utilizes the Dean Edwards solution.http://dean.edwards.name/weblog/2006/06/again/

<script type="text/javascript" language="javascript">function Sys$_Application$add_ready(handler) { var e = Function._validateParams(arguments, [{name: "handler", type: Function}]); if (e) throw e; /*********************************************** * Borrowed from Dean Edwards solution: http://dean.edwards.name/weblog/2006/06/again/ * - slight modifications that include Atlas features. ***********************************************/ var init = function() { // quit if this function has already been called if (arguments.callee.done) return; // flag this function so we don't do the same thing twice arguments.callee.done = true; // kill the timer if (_timer) clearInterval(_timer); handler(); }; /* for Mozilla/Opera9 */ if(Sys.Browser.agent == Sys.Browser.Opera || Sys.Browser.agent == Sys.Browser.Firefox) { document.addEventListener("DOMContentLoaded", init, false); } /* for Internet Explorer */ else if(Sys.Browser.agent == Sys.Browser.InternetExplorer) { document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>"); var script = document.getElementById("__ie_onload"); script.onreadystatechange = function() { if (this.readyState == "complete") { init(); } }; } /* for Safari */ else if(Sys.Browser.agent == Sys.Browser.Safari) { var _timer = setInterval(function() { if (/loaded|complete/.test(document.readyState)) { init(); } }, 10); } else { this.get_events().addHandler("load", init); }} Sys._Application.prototype.add_ready = Sys$_Application$add_ready</script>

I might be missing something, but what I think the first guy was asking for was a way to tell if a particular element on the page (e.g. a given <span> tag) has been rendered and has content, where your solution seems to just replicate what agax exposes through the pageLoad() function... am I wrong?
I might be missing something, but what I think the first guy was asking for was a way to tell if a particular element on the page (e.g. a given <span> tag) has been rendered and has content, where your solution seems to just replicate what asp.net ajax exposes through the pageLoad() function... am I wrong?
Here's a link to what she was asking for. It's slightly different than the onload event.

http://developer.yahoo.com/yui/event/#onavailable
Ok, so what she was askign for is what I thought she was asking for; what I'm not understanding is how your example script does it. It looks like it notifies when the app loads, not when a given element loads. That's the part I'm not following.

The event is triggered when the DOM is actually available, which happens before the onload event. If you go to http://dean.edwards.name/weblog/2006/06/again/ it will make much more sense. This is essentially what YUI, jQuery, and other javascript libraries are doing for the onContentReady event. As far as the onAvailable event, that's a different story.

I was looking at my original code and made some modifications. Most specifically you can know have multiple add_ready events.

<script language="javascript" type="text/javascript">function Sys$_Application$add_ready(f) { var e = Function._validateParams(arguments, [{name: "handler", type: Function}]); if (e) throw e; /*********************************************** * Borrowed from Dean Edwards solution: http://dean.edwards.name/weblog/2006/06/again/ * - slight modifications to include Atlas features. ***********************************************/ var init = function() { // quit if this function has already been called if (arguments.callee.done) return; // flag this function so we don't do the same thing twice arguments.callee.done = true; // kill the timer if (_timer) clearInterval(_timer); f(); }; readyList = this.get_events(); /* for Mozilla/Opera9 */ if(Sys.Browser.agent == Sys.Browser.Opera || Sys.Browser.agent == Sys.Browser.Firefox) { document.addEventListener("DOMContentLoaded", init, false); } /* for Internet Explorer */ else if(Sys.Browser.agent == Sys.Browser.InternetExplorer) { document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>"); readyList.addHandler("readystatechange", init); $get("__ie_onload").onreadystatechange = function() { if (this.readyState == "complete") { readyList.getHandler("readystatechange")(this, Sys.EventArgs.Empty); } } } /* for Safari */ else if(Sys.Browser.agent == Sys.Browser.Safari) { readyList.addHandler("readystatechange", init); var _timer = setInterval(function() { if (/loaded|complete/.test(document.readyState)) { readyList.getHandler("readystatechange")(this, Sys.EventArgs.Empty); } }, 10); } /* for All others */ else { this.get_events().addHandler("load", init); }} Sys._Application.prototype.add_ready = Sys$_Application$add_ready;</script>