Ajax Tab Script OnLoad

**myst** · 07-16-2008, 12:08 AM

1) Script Title: Ajax Tabs Content Script (v 2.2)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tent/index.htm

3) Describe problem:

Okay here's the deal I've seen the thread that cover this at: http://www.dynamicdrive.com/forums/s...ad.php?t=15004

I've read that and it works great. The only problem I'm having is when you go BACK to the default tab after you've clicked another one, when you come back to the default tab it does not run the BODY ONLOAD again.

Maybe I've missed something in the old thread but I'm just not seeing it. I've tried numerous things and just haven't been able to get it to work.

**ddadmin** · 07-16-2008, 02:31 AM

So to recap, one of the external pages you're fetching via Ajax contains a BODY onLoad event with code you want to run when that page is added to the Ajax Tabs Content area right? If so, in many cases, you can get away with just using the script's "onajaxpageload" event handler to detect when that page has been successfully fetched, and fire the desired code(s) on the main page instead. For example, in the below example, when the user clicks on the 2nd tab, the script fires some JavaScript when the page is fetched:

Code:

<ul id="countrytabs" class="shadetabs">
<li><a href="tab.htm" rel="countrycontainer" class="selected">Tab 1</a></li>
<li><a href="tab2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="tab3.htm" rel="countrycontainer">Tab 3</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("tab2.htm")!=-1){
//run code that normally would be assigned to tab2.htm's body onload event handler
}
}

</script>

**myst** · 07-16-2008, 03:10 AM

Well actually I have it working where it performs the body OnLoad for the external page. But where I'm having trouble is when I click back to the default tab it does not run the OnLoad event again.

Did I explain that okay?

**ddadmin** · 07-16-2008, 07:38 PM

Well, the default tab merely loads inline content wrapped inside a DIV (versus IFRAME or Ajax content). Are you saying you want to run a certain function as soon as that tab is clicked on?

**myst** · 07-16-2008, 07:51 PM

Yes. When someone is on the page they click to another tab then decide to go back to the default tab I need the body ONLOAD run again. Reason being is each tab has a google map on it. And the ONLOAD actually loads that map.

**myst** · 07-22-2008, 02:34 AM

could someone please help me. i need to figure this out bad and i'm lost

**ddadmin** · 07-22-2008, 03:29 AM

Well, to run your own code whenever the default tab is clicked on, inside the .js file, try finding the lines:

Code:

		if (relattrvalue=="#default"){
			document.getElementById(this.contentdivid).innerHTML=this.defaultHTML
                        //custom code here
		}

The code in red is new, and should be replaced by the code you wish to run.

**myst** · 07-22-2008, 04:03 PM

In that area though I cannot call the OnBody Load or a function that's defined in the HTML page, or can I?

**ddadmin** · 07-22-2008, 10:06 PM

Well, if you can isolate the code that gets called BODY onload, you'd simply move that into the .js file. For example, on a page with:

Code:

<body onload="dothis()">

You'd move dothis() into the .js file:

Code:

		if (relattrvalue=="#default"){
			document.getElementById(this.contentdivid).innerHTML=this.defaultHTML
                        dothis()
		}

**myst** · 07-23-2008, 05:55 AM

i tried that with no success. here's the code:

<script src="http://maps.google.com/maps?file=api&v=2&key="type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
function MapLoad() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>

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
MapLoad(); //required
return;
}
else if (load&&!document.getElementById(id))
setTimeout("pollC('"+id+"', 'load')", 60);
}
</script>

<script type="text/javascript" src="/tabs/ajaxtabs.js"></script>

but when I put:

if (relattrvalue=="#default"){
document.getElementById(this.contentdivid).innerHTML=this.defaultHTML
MapLoad()
}

it throws an error.

Thread: Ajax Tab Script OnLoad

Thread Tools

Search Thread

Ajax Tab Script OnLoad

Bookmarks

Bookmarks

Posting Permissions