View Full Version : Select tab and load other ajax content

02-08-2008, 01:37 PM
1) Script Title: Ajax Tabs Content Script (v 2.0)

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

3) Describe problem:
Is there an easy way to select a specific tab and load a different content than originally specified? I want to load external content from a link (not one of the tabs) but I always want a specific tab to be selected when showing that external content. Say, as an example (using your own examples) you ALWAYS want the Google homepage loaded on the fourth tab.

I realize this can be done with expandit() and then loadajaxpage() but the screen flickers with the original content and it is just a workaround...

Any ideas?

02-09-2008, 05:56 AM
Well, expandit() then loadajaxpage() would be the correct process. Most likely the reason it "flickers" while doing it is because when you call expandit(), it attempts to load the default content associated with that tab, only to be quickly interrupted by loadajaxpage() to load a different content instead. Is specifying a "blank" page to be associated with that tab by default an option for you? For example:

<ul id="countrytabs" class="shadetabs">
<li><a href="external1.htm" rel="countrycontainer" class="selected">Tab 1</a></li>
<li><a href="blank.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="countrycontainer">Tab 4</a></li>

Blank.htm would be an actual external page, but with no real content, to minimize any flickering when switching from it to the actual page you want to load.

02-09-2008, 08:43 AM
Yes, using a blank page could be the solution but then again not really as I then would have to code for that tab every time with loadajaxcontent.
Is there a way to de-select all tabs? Giving the user a visible indication that no tab is actually associated with the current content.
Thanks for everything:)

02-10-2008, 03:52 AM
Sure, deselecting all tabs is possible, by padding in -1 in expandit():


However, this by default will trigger an alert message, which you need to disable inside the .js file:

catch(err){alert("Invalid Tab ID or position entered!")}

Remove the part in gray.

02-10-2008, 02:02 PM
instance.expandit(-1) does not do anything for my script...
Nothing happens.

02-10-2008, 09:00 PM
My bad, I was basing the above instructions on an older version of the script. Use the attached modified ajaxtabs.js file instead. Its only difference is the ability to dynamically deselect all tabs, by calling tabcontentinstance.expandit(-1), identical in that respect to the instruction above.

02-11-2008, 07:14 PM
That did it.
THANK YOU for the support and for a great tool!:D