Nesting Ajax and NOT Ajax Tabs

[Miccamale]

1) Script Title:
Nesting Ajax Tabs
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment2.htm
3) Describe problem:

Hello to all!
I am new! And I have a big problem with this script.
I have 5 Task... 1° are embedded directly in the parent page 2°3°4°5° loaded by ajax.

I must put a second tab, nesting to every task.
the script work good with the page loaded with ajax, but not with the first task (nested tab don't change task when I click) :(

Do you have an example or a suggest to do this?

Sorry for my bad english.
Andrea

PS Thanks


======== HERE MY EXPERIMENT


<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="externalnested.htm" rel="countrycontainer">Tab 3</a></li>
</ul>

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


<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm">Tab Content</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>


</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("externalnested.htm")!=-1){
var provinces=new ddajaxtabs("provincetabs", "provincedivcontainer")
provinces.setpersist(true)
provinces.setselectedClassTarget("link") //"link" or "linkparent"
provinces.init()
}
}
</script>

[ddadmin]

Are you saying inside the first "#default" content, you wish to embed a new instance of Ajax Tabs Content? Something like:


<div id="tcontent1" class="tabcontent">
New Ajax Tabs instance here...
</div>

I don't see such an attempt in the code you posted above though. Please post a link to the page on your site that contains the problematic script so we can check it out.

[Miccamale]

Hello!
Thanks for your reply.

Here my experiment
http://www.ilturista.info/tab/demo.htm

The first embed tab (orage button) don't work

Thanks Andrea

[ddadmin]

Your first tab content includes a Tab Content instance (not Ajax Tabs Content Instance), as evident by the call to:


new ddtabcontent("flowertabs")

However, in the HEAD section of your page, you've only referenced the files for Ajax Tabs Content, and not Tab Content script. You'll need to do the later as well.

[Miccamale]

Thanks again!

I have insert the tabcontent.js :( I am a stupid.

http://www.ilturista.info/tab/demo.htm

But the script don't work yet.

Excuse me for the insistence

Andrea

[Miccamale]

Nothing :( where I am wrong?

thanks
Andrea

[Miccamale]

Second experiment.. but nesting task, don't work

http://www.ilturista.info/tab2/demo.htm

[ddadmin]

Ah I believe I see the problem now. In a nutshell, the "#default" content is dynamically inserted into the document- if this content contains complex JavaScript, it won't be properly interpreted, similar to if the content was inserted using Ajax.

A quick solution is to change the 1st tab to IFRAME based instead, and serve the Tab Content as an external page:


<li><a href="tabcontent.htm" rel="#iframe" class="selected">Tab 1</a></li>

[Miccamale]

Thanks again,
my problem it is than the content must be see from search engines.. with iframe are not possible...

do you have any ideas?

Really THANKS!
andrea :confused:

[Miccamale]

Hello ddadmin,
but in your opinion is it possibile put the second tab in the first task or not?

I must find a solution .... absolutely...

thanks for your help

Andrea

[ddadmin]

Thanks again,
my problem it is than the content must be see from search engines.. with iframe are not possible...

do you have any ideas?

Really THANKS!
andrea :confused:

That's not true actually. The URL to the IFRAME page is specified as a regular list link on the page:


<li><a href="tabcontent.htm" rel="#iframe" class="selected">Tab 1</a></li>

So search engines definitely won't have trouble finding and indexing the target page as well.

[Miccamale]

Hello!

It is true, but after the visitor will go directly to tabcontent.htm and not in my parent page... :(

Thanks
Andrea