Category: Coding tips & tutorials threads
Simplified Ajax Loaded Content w/scripts requiring onload events
Simplified Ajax Loaded Content w/scripts requiring onload events - Principles and Practices:
Definitions:
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.
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 when the page loads, after the page's Content is parsed by (rendered by) the browser. The purpose of the onload event is to initialize and/or execute some dynamic action(s) as regards some or all of the page's 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. No matter how simple or complex it appears in the code, it can be distilled to a single Function Call. In our two above examples this would be:
onloadfunct();
and:
myInitFunction();
respectively.
Principals:
With Ajax Loaded Content, basically what we have is a Top Page that will become the vessel for some Content fetched from another page. Only Content can be fetched. Stylesheets 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 into the Top Page.
Practices:
a.) Determine what style(s) and script(s) we will need to run the dynamic effects for the Ajax Loaded Content we plan to load onto the Top Page. These usually are the style(s) and script(s) required by the Ajax Loaded 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 was:
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 (unless it is needed on the Top Page) remove the Onload Trigger code from the script. Either way, remember its Function Call for later use.
d.) Now we are ready to add an event to your link call for the Ajax Loaded Content. It doesn't matter if your Ajax Loaded Content is added using the:
<a href="javascript:ajaxpage('some.htm' 'someloadarea');">Link Text</a>
method common with many of these scripts or if it is added something like so:
<a href="some.htm" rel="somecontentarea">Link Text</a>
Either way, we are going to add an onmousedown event to the link to tell the browser that we are about to import some Ajax Loaded Content that requires initialization. To do this we need to invent a unique window Object Name (acInit in the below) that will represent the state of this process, like so (these would be on the Top Page):
<a href="javascript:ajaxpage('some.htm' 'someloadarea');" onmousedown="window.acInit=false;">Link Text</a>
or:
<a href="some.htm" rel="somecontentarea" onmousedown="window.acInit=false;">Link Text</a>
e.) Finally, we need to use the Function Call we remembered from step c above and apply it to an element or elements in the Ajax Loaded Content. Let's say it was (as it is in a popular script for use with Ajax Loaded Content, Lightbox) initLightbox(); - A typical lightbox link looks like so:
<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
We would add to each and every one of these in the Ajax Loaded Content an onmouseover event (these would be in the Ajax Loaded Content):
<a href="images/image-1.jpg" rel="lightbox" onmouseover="if(!window.acInit){initLightbox();window.acInit=true;};"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
With other scripts, the Function Call will be different (it will be the one for that script). So will the element or elements that need this onmouseover event - they will be the one(s) that need this initialization Function Call.