Poll - A function which repeatedly checks a condition, the best ones (like the one we will use) only start just prior to the likelihood of that condition being fulfilled and exit with a desired action when the condition is fulfilled.
Top Page - For the purposes of Ajax loaded content, this will be the page with the Ajax script on or linked to it. It is the page whose address appears in the browser's address bar. It is the page that other content is loaded onto via Ajax.
Id - The id attribute of an element which, unknown to some, must be unique to only one element on a page. The main reason some folks don't know this is that most browsers do not enforce this rule as regards style declarations, only when it comes to using id's in scripts via a getElementById() or document.all[] method.
Content - Any bit of HTML code that is meant to be rendered in some fashion by the browser for the user to see.
Onload Event - A function which is meant to be run after a particular bit of content is loaded into (rendered by) the browser to initialize and/or execute some dynamic action(s) as regards said content.
Onload Trigger - A bit of javascript or HTML code that starts the onload event. It can be as simple as (red):
<body onload="onloadfunct();">
added to the body tag, or as complex as a multifaceted conditional like so:
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", myInitFunction, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", myInitFunction );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
myInitFunction();
};
}
else
window.onload = myInitFunction;
}
that tests to see what methods may be available in a given browser to arrange for the event to run onload - or, anything in between.
Principals:
With Ajax loaded content, basically what you have is a top page that will become the vessel for some content fetched from another page. Only content can be fetched. Style and scripts cannot but, they can be appended to the top page in other ways or be hard coded on the top page, just waiting to be used. However a script gets onto or linked to the top page, if it requires an onload event to initialize some Ajax loaded content, this event needs to run after said content is actually loaded to the top page.
That's where our poll comes in. What we want to do is to poll for the existence of a particular content that we want to initialize. A good time to do that is right after the process for loading that content has begun. A good way to do it is to check for an element with a unique id located at the end of the content being loaded. With Ajax, it is possible to load the very same content over an already loaded and initialized version. Due to this fact, we must also have a way to remove the unique id from the polled for element if it already exists, just prior to loading it the next time.
Practices:
a.) Determine what style(s) and script(s) you will need to run the dynamic effects for the content you plan to load onto the top page. These usually are the style(s) and script(s) required by the content for its dynamic effects if it were to be a stand-alone page.
b.) Find a way for these to be present on the top page when needed. This can be done one of three ways:
1.) Hard code them onto the top page.
2.) Hard code tags that link them to the top page onto the top page.
3.) Use a function like loadobjs() to load them onto the top page.
This last method is the least reliable for scripts that need to initialize, owing to possible lag time in loading, especially if they aren't loaded until the 'last possible moment'.
c.) Find and remove the trigger code from the script. It will be useless, at best. In this new setting it may even cause errors or worse problems if retained.
d.) Place a poll function on or linked to the top page, here is a good one that also can take care of the matter of removing the id, as mentioned earlier, when and if that becomes necessary:
<script type="text/javascript">
function pollC(id, load){
if (!load&&document.getElementById(id)){
document.getElementById(id).id='';
return;
}
else if (load&&document.getElementById(id)){
if (id=='unique_1') //optional
onloadfunct(); //required
return;
}
else if (load&&!document.getElementById(id))
setTimeout("pollC('"+id+"', 'load')", 60);
}
</script>
The green and red section in the above is a conditional/command pair that tests for a particular id followed by a particular onload function that should be run if this is the id polled for and found by the pollC() function. If you have several types of dynamic content that may get loaded, each requiring a different action, you can add as many of these pairs as you need to cover all eventualities. If you are just starting out though, you probably can have only one pair that should cover things or, you could even skip the conditional (green), and just use the command (red), if the same command needs to be run regardless of the particular id polled for. In any case replace the command (red) with the onload event called for in the trigger that you removed from the script. Make sure it has the trailing (); when inserted in the pollC() function, even if it didn't have it in its trigger code.
e.) Find or add an element with a unique id at the end of the content page. If one is already present, may as well use it. Otherwise add one, like so:
<span id="unique_1"></span>
The above will be invisible and not affect spacing on the added content but, it will be available for the pollC() function to detect.
f.) Now you are ready to add some events to your link call for the content page. It doesn't matter if your content is added using the:
Either way, you are going to add two events to the link - a onmousedown and a onmouseup. Down will check for and remove the unique id if already present before loading the content and Up will check for the newly loaded unique id and, when found execute the desired command from pollC():
Wow there's a chalk full of useful observations here pertaining to using Ajax to load content when that further involves external js/ css files. How you find time to write something like this I have no idea. :)
I think I'll sticky this thread for a while.
Update. I'm closing this thread, it's information - though workable - is more convoluted than need be.
All AJAX routines have an onreadystatechange function that fires. It's usually used to determine when they are successful, if so and it is, they generally write the responseText to an element. It's in this function, after the content gets written to the page that other scripts that require that content may be executed.
If using jQuery or other javascript libraries that include AJAX routines, there's almost always a callback function that performs the same duties. See the documentation on your script library's AJAX routine for more information, and/or post a question about it in the javascript forum.