Nested Ajaxtabs?

[kevinnguyen]

Source: http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm
Multiple ajaxtabs work perfectly but nested ajaxtabs dont
For example:
This works

<ul id="maintab" class="shadetabs">
<li><a href="external.htm" rel="ajaxcontentarea">Bird</a></li>
<li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li>
</ul>

<div id="ajaxcontentarea" class="contentstyle">
<p>Default Content...</p>
</div>

<ul id="newstab" class="shadetabs">
<li><a href="local.htm" rel="ajaxcontentarea">Local</a></li>
<li><a href="world.htm" rel="ajaxcontentarea">World</a></li>
</ul>

<script type="text/javascript">
startajaxtabs("maintab", "newstab")
</script>
But this does not work

<ul id="maintab" class="shadetabs">
<li><a href="external.htm" rel="ajaxcontentarea">Bird</a></li>
<li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li>
</ul>

<div id="ajaxcontentarea" class="contentstyle">
<ul id="newstab" class="shadetabs">
<li><a href="local.htm" rel="ajaxcontentarea">Local</a></li>
<li><a href="world.htm" rel="ajaxcontentarea">World</a></li>
</ul>
</div>

<script type="text/javascript">
startajaxtabs("maintab", "newstab")
</script>
It still works if I only click Bird and Dog but if I click Bird then Local or World the I takes me to the local.htm or world.htm page.

Please help! I know you might not support this kind of question but I really need this for my website so please help me :(
Thanks in advance

[djr33]

I'm not sure how to fix it, but I would guess it's more of an issue with using two scripts on the same page... variables, functions, etc that are the same, more than compatibility of having one inside the other.

you should use two copies of the script, with differently named variables and functions....

We'll see if someone else can figure out the specifics... but also remember that questions about two scripts are realy time intensive to figure out... so not sure how quickly people will figure it out...

[ddadmin]

Hmm there's definitely no easy way to get "nested tabs" to work, since the "contentarea" space is completely overwritten by the script with the contents of the external page. As you already know, this is very different from having multiple Ajax tabs on the same page, which works fine.

[jasinthebasin]

are you looking for your code to do something similar to this?
http://www.re-inventing.com/dev/causeway/test6/example2.html

[federico]

Hello, I'm new in this forum...
I've tried a lot with nested Ajaxtabs, and I've found some interesting things.
1) My proposed solution is to add a nonstandatd "sta" attribute in addition to "href" and "rel". This attribute should contain the ID of the "nested" (i.e. dynamically created at loading of the sub-page) <ul> list, and has to be activated dynamically just after "nested" page loading. See:

function startajaxtabs(){
...
ulistlink.onclick=function(){
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this)

alert("Loaded AJAX "+this.getAttribute("href")) // LOOK HERE

loadobjs(this.getAttribute("rev"))
/* From here */
if(this.getAttribute("sta")) {
startajaxtabs(this.getAttribute("sta"))
}
/* to here */
return false
}
...
}

(startajaxtabs can be re-entrant since it doesn't use global vars)

...and now the BAD news. If you miss the "alert" just after the dynamic page loading, the script DOESN'T run.
After a lot of attempts and debugging I'm sure that this side effect is due to a sort of "browser reset" during the "alert".
In fact, the same effect can be accomplished if you set a debugger break just after the "ajaxpage(...)" call.
If no "alert" or "stop for debugging" is done, script fails since the nested

var ulobj=document.getElementById(arguments[i])

is NOT able to find the "nested" <ul> just created via AJAX.

My impression is that the "innerHTML" implementation is not perfect.

Very oddly, you'll see the SAME problem and solution for both IE6 and FF1.5.

Somehow complex, huh? Waiting for comments.

If someone has found a solution with different scripts, please give me an hint.

[jscheuer1]

Polling is one method to initialize content that is coming but that may or may not be there yet. When you start the call or just after the call for the imported content, you can also start a poll. Generally a poll can check for a unique element at the end of the imported content. Once this element is found, it can run the initialization, until then, the poll may set a timeout that restarts the poll.

This was worked out to allow lightbox (which needs to init its content) to run on content loaded via Dynamic Ajax Content (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm) in this thread:

http://www.dynamicdrive.com/forums/showthread.php?t=11098

[federico]

...and now the BAD news. If you miss the "alert" just after the dynamic page loading, the script DOESN'T run.

Aha, found a solution!
this is the chunk:

ulistlink.onclick=function(){
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this)
loadobjs(this.getAttribute("rev"))
if(this.getAttribute("sta")) {
setTimeout("startajaxtabs('" + this.getAttribute("sta") + "')", 1000)
}
return false
}

It runs perfectly!:D