display a table from another webpage inside an AJAX tab

[scottalbin]

1) Script Title: Ajax Tab Content Scipt

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

3) Describe problem:
I have four tables that are on external webpages. The pages are part of a dreamweaver/contribute based site. The tables are edited using Macromedia Contribute. I would like to create a Ajax Tab Content display using the online script at http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

My question is how can I have just the table (with the same .html based format) appear inside of the tabs. So that users can hit the tabs to see the various tables, and editors can edit the orignal page.

I am wondering if there is a way to call just the "tables" in some out of the rest of the .html/code by adjusting the script in someway?

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li>
<li><a href="external.htm" rel="ajaxcontentarea">Bird</a></li>
<li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li>
<li><a href="external3.htm" rel="ajaxcontentarea">Cat</a></li>
<li><a href="external4.htm" rel="ajaxcontentarea" rev="content.css, content.js">Sea Otter</a></li>
</ul>


Thanks for any suggestions.:)
Scott A.

[ddadmin]

So basically you're asking how to have all the ajax tabs fetch the same page, but depending on the tab, display a particular content within it. So really you just need content pagination, not page pagination, so in this case, you're actually better off using the non Ajax version of Tab Content (http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm) Script instead.


<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div class="tabcontentstyle">

<div id="tcontent1" class="tabcontent">
<table>table 1</table>
</div>

<div id="tcontent2" class="tabcontent">
<table>table 2</table>
</div>

<div id="tcontent3" class="tabcontent">
<table>table 3</table>
</div>

</div>

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>

Notice how each of the DIV tag contains the desired table. The idea is to then remove and save the entire portion in red into an external file for ease of editing, such as external.htm. Then, dynamically include that file into the main subcontent DIV tag:


<div class="tabcontentstyle">

<!--#include file="external.htm"-->

</div>

Here I'm assuming your pages support SSI (server side includes). There are equivalents for PHP, ASP pages, and so on.