PDA

View Full Version : Nesting Ajax and NOT Ajax Tabs



Miccamale
05-18-2008, 07:16 PM
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񳞞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
05-19-2008, 12:36 AM
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
05-19-2008, 06:54 AM
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
05-19-2008, 08:05 AM
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
05-19-2008, 08:44 AM
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
05-19-2008, 12:44 PM
Nothing :( where I am wrong?

thanks
Andrea

Miccamale
05-19-2008, 02:07 PM
Second experiment.. but nesting task, don't work

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

ddadmin
05-19-2008, 09:01 PM
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
05-20-2008, 07:42 AM
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
05-20-2008, 07:49 PM
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
05-21-2008, 06:48 AM
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
05-21-2008, 09:03 AM
Hello!

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

Thanks
Andrea