Ajax Tabs - run scripts inside tabs

[klbollwahn]

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]

Then you need to run:

pollC('unique_1', 'load');

onload of the page.

[klbollwahn]

Perfect!

Thank you.

[klbollwahn]

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]

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:

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