Ajax Loaded Content w/scripts requiring onload events - Principles and Practices

jscheuer1 · #1 09-10-2006, 07:26 AM

Ajax Loaded Content w/scripts requiring onload events - Principles and Practices:

Definitions:

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):

Code:

<body onload="onloadfunct();">

added to the body tag, or as complex as a multifaceted conditional like so:

Code:

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:

Code:

<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:

HTML Code:

<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:

HTML Code:

<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:

HTML Code:

<a href="some.htm" rel="somecontentarea">Link Text</a>

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():

HTML Code:

<a href="javascript:ajaxpage('some.htm' 'someloadarea');" onmousedown="pollC('unique_1')" onmouseup="pollC('unique_1', 'load')">Link Text</a>

or:

HTML Code:

<a href="some.htm" rel="somecontentarea" onmousedown="pollC('unique_1')" onmouseup="pollC('unique_1', 'load')">Link Text</a>

ddadmin · #2 09-13-2006, 06:42 AM

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.

klbollwahn · #3 09-26-2006, 01:44 PM

This is great info! It get's me 99.9% to where I need to get for the project I'm currently working. I'm trying to set this up with the ajaxtabscontent script at:

http://www.dynamicdrive.com/dynamici...axtabscontent/

My last .1% is that my default tab is a content file that needs to run the onload script. see below:

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="external.htm" rel="ajaxcontentarea" onmousedown="pollC('unique_1')" onmouseup="pollC('unique_1', 'load')">Intro</a></li>
<li><a href="external.htm" rel="ajaxcontentarea" onmousedown="pollC('unique_1')" onmouseup="pollC('unique_1', 'load')">Bird</a></li>
<li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li>
<li><a href="external3.htm" rel="ajaxcontentarea">Cat</a></li>
<li><a href="external4.htm" rel="ajaxcontentarea">Sea Otter</a></li>
</ul>

How can I get the default tab content to load without the onmousedown / onmouseup commands?

Once I select another tab everything works great.

Thanks

jscheuer1 · #4 09-26-2006, 04:11 PM

Then you need to run:

Code:

pollC('unique_1', 'load');

onload of the page.

klbollwahn · #5 09-26-2006, 04:28 PM

Perfect!

Thank you.

klbollwahn · #6 10-02-2006, 06:13 PM

So far these scripts have been working great. I now have a new challenge. I'm using image map links to populate four div's with ajax content that need the same onload javascript. See below:

<div>
<map name="map" id="map">
<area shape="circle" coords="58,28,30" alt="one"
href="javascript:ajaxpage('../topics/DisplayCustomer_scrn.html', 'screenprint');
javascript:ajaxpage('../topics/DisplayCustomer_step.html', 'steps');
javascript:ajaxpage('../topics/DisplayCustomer_tip.html', 'tips');
javascript:ajaxpage('../topics/DisplayCustomer_faq.html', 'faq')"
onmousedown="pollC('unique_1')"
onmouseup="pollC('unique_1', 'load')">

<area shape="circle" coords="185,28,30" alt="two"
href="javascript:ajaxpage('../topics/CustomerInformation_scrn.html', 'screenprint');
javascript:ajaxpage('../topics/CustomerInformation_step.html', 'steps');
javascript:ajaxpage('../topics/CustomerInformation_tip.html', 'tips');
javascript:ajaxpage('../topics/CustomerInformation_faq.html', 'faq')"
onmousedown="pollC('unique_1')"
onmouseup="pollC('unique_1', 'load')">
</map>
</div>

The when a link is selected the first time, all of the content pages load perfectly with the javascript functioning. When the next link is selected, the content pages load but "onload" javascript doesn't work until the link is double clicked.

Can you point me in the right direction?

Thanks

jscheuer1 · #7 10-02-2006, 07:53 PM

Image maps are tricky but, at the very least, because you are loading multiple contents, I would think you should be checking for the the id of the content that would take the longest to load. Better still, check for four id's. You shouldn't need so many javascript: thingers either:

HTML Code:

<area shape="circle" coords="58,28,30" alt="one"
href="javascript:ajaxpage('../topics/DisplayCustomer_scrn.html', 'screenprint');
ajaxpage('../topics/DisplayCustomer_step.html', 'steps');
ajaxpage('../topics/DisplayCustomer_tip.html', 'tips');
ajaxpage('../topics/DisplayCustomer_faq.html', 'faq')"
onmousedown="pollC('unique_1');pollC('unique_2');pollC('unique_3');pollC('unique_4');"
onmouseup="pollC('unique_1', 'load');pollC('unique_2', 'load');pollC('unique_3', 'load');pollC('unique_4', 'load');">

You would need one span each with one of those unique_# id's, one unique span on each of the four external pages being loaded.

You may have to customize pollC to these id's, if different scripts are needed for each external content page.

Unique means unique. If it works in some cases only ever using unique_1, that is a quirk.

ProudDaddy41 · #8 10-04-2006, 09:38 PM

I've seen great examples for Ajax tabbed content...and a new javascript for sliding featured content automatically (although it doesn't slide) found at http://www.dynamicdrive.com/dynamici...tentslider.htm

What I need though is to pull in content from 3 other pages using the ajax tabs and make those three elements rotate automatically....UNLESS someone places the mouse over the content area or clicks on one of the 3 tabs.

We've got all the right scripts in here to do the stuff, but none of it's together in one script. I am trying to pick apart pieces from one script and get them to play nice with the other scripts, but it's just not working well for me.

Someone please help!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search