Imbedded Ajax Tabs

[EricVonBar]

1) Script Title: Ajax Tabs Content script

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

3) Describe problem: I have been trying to embed an Ajax tab within another tab. Here is where I am and the problems I have solved. First I used the rev to load a style sheet .css for the loaded page. This allowed the tabs to be displayed.

I attempted to load a .js file for the page, but had no luck. I was able to get the new pages to load in the content area, but I had to put a button on the page to run the script first to initialize the new tab list. After I push the button and run the init script first all of the pages page into the context area.

So I am down to the last stitch. It appears when loading a page scripts inside that page do not run. This sort of makes sense since only data is being loaded with the .innerHTML call. I tried using the onload facility but still the initialization script is not called.

Is there some way to trigger the script to be called after clicking on the tab. I guess I could add a hack to ajaxtabs.js, but there must be a simpler way.

BTW I added a couple of calls to ajaxtabs.js to query the software for the number of tabs in a context, the current tab and to increment a tab by +1 or -1 or I guess any number. It does not wrap but could. This allowed me to implement a page forward and page back facility. I re-wrote the .css file to put the tabs down the side of the page and now I have a page turner.

Let me know if anyone wants me to post these changes.

Thanks Eric

[ddadmin]

Hmm embedding ajax tabs within a content that's dynamically retreived in itself can get messy, mainly because the script wasn't designed for this. It's possible as you've described above, but there are still many problems here and there.


Is there some way to trigger the script to be called after clicking on the tab.

By triggering I gather you mean the function startajaxtabs()? Basically since we're talking about Ajax tabs that are by themselves fetched via Ajax, you can only call the aforementioned function to initalize them after they've been fully retrieved and added to the page. The relevant function within the script is:


function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
//startajaxtabs(tabcontentid)
}


So you can only call this function when the request reaches a readyState of "4" (aka "complete"), and the tabs are now present on the page. Now all this is just theory, but you get the idea. :)

[EricVonBar]

Thanks,

I added your suggested one line change to loadpage and now the embedded tabs work with no problems. There does not seem to be any conflict with the initial or parent tab.

After posting the original question I was able to get it to work by loading a .js file with the tab. This worked fine the first time the tab was accessed, but failed on subsequent tries.

Now I have two more minor issues. I cannot get the tab code to work in Frontpage without publishing the file to the web. In preview mode it gets an access error. This is not uncommon in frontpage with scripts.

The second more troubling issue is making tabs work with Frontpage themes. When a theme is applied to a page the cascading styles are disrupted and the page always loads as a new page. I have not dug into the theme stuff yet, but thought it worth mentioning before someone encounters it or in case someone has a work around.

<meta name="Microsoft Theme" content="boldstri 0111, default">

Thanks much.

Eric