PDA

View Full Version : 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/dynamicindex17/ajaxtabscontent/index.htm

3) Describe problem:

Okay here's the deal I've seen the thread that cover this at: http://www.dynamicdrive.com/forums/showthread.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 (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment2.htm) 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:


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


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:


<body onload="dothis()">

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


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&amp;v=2&amp;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.

ddadmin
07-23-2008, 06:09 AM
I have no idea what MapLoad() does just based on the above. But is that the function you're currently calling when the page loads that works, and that you need to also call as well whenever the user clicks on the default tab? If so then that's what you theoretically would do, yes.

myst
07-25-2008, 03:46 AM
yes MapLoad() works right now. MapLoad() is just a routine from google that brings up their map. but like i said i ran that code that i posted below and it gives me an error.

ddadmin
07-25-2008, 08:58 AM
Try adding a delay before MapLoad() gets called when the default tab is clicked on. Inside the .js file, you'd have something like:


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

This causes the function to be invoked 1.5 seconds after the tab is clicked on. Play with this number if needed.

myst
07-25-2008, 03:22 PM
okay after thinking about this for a while i remembered hey i'm using some code that if i alter it will already do this for me...so i added the unique tag at the bottom of the main page and added a bit in the code here and it works like a charm. reason i have to use 2 different maploads is because each page has a different map on it.

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

myst
07-25-2008, 03:44 PM
I do have ONE other question though. When a user selects a tab and is taken to that page, is there a reason that when they click an image, lightbox does not work?

myst
07-25-2008, 03:52 PM
oops did a quick search after i spoke and found this: http://www.dynamicdrive.com/forums/showthread.php?t=25868 that solves it. thanks for all your help.