Monday, May 22nd, 2006

Ajax Tabs Content script

Category: Toolkit, UI

DynamicDrive.com has provided yet another helpful script today in the form of this download – an “Ajax tabs content script”. The script makes it simple to grab content from extern files (in the same domain, of course) and pull them into a simple tabbed interface right there on the page.

We got our inspiration for this script from Yahoo’s new homepage, which employs such a concept to show news in an organized fashion.

As you can see, this Ajax Tabs Content script was designed to be much more than look pretty, but usable. FYI its CSS tabs interface is plucked directly from Shade Image Tabs Menu, which is easily swappable with another CSS menu of your choice. See how it all comes together like that?

They show an example of the script in action and give you complete details on how to implement it, including the download with all of the files (including sample pages and images) that you’ll need. The tutorial portion covers both the use of a single tab and multiple tabs on the page, depending on your needs.



Posted by Chris Cornutt at 7:43 am
38 Comments

+++--
3.9 rating from 522 votes

38 Comments »

Comments feed TrackBack URI

Ajax is greaat web software.

Comment by bedava mp3 — May 22, 2006

Back in the DHTML days one was taught to ignore DynamicDrive like the plague. Looking at the code of this script, it’d seem that is still the case.

Comment by Mark Wubben — May 22, 2006

I don’t get it. Just like delete confirmation buttons, why is this ajax again? If there is no dynamic content to deliver during a given page load, then why not just load all the data once and be done with it? Why a second instance of a trip to the server?

Maybe in this case its just the example, which is all of static tab contents, is misleading. But the example is exactly what I’m talking about: things that are “ajax” when it adds no functionality and even sort of hurts it. When I switch tabs, why should I have to wait for the page to load static content from the same domain? Why couldn’t it just have loaded all that content hidden, to be ready when I switch tabs? Even if the content was generated by a php script from a database, there’ still no point to having it loaded later on rather than the first page load.

Now, if you really were doing something that was more like an application, where you would expect the user to just stay on the page and get updates, that might make a lot more sense. But what I fear is that many many young wed devs just don’t get it, and try to use ajax techniques for EVERYTHING needlessly.

Comment by plunge — May 22, 2006

There’s no need for this to be Ajax-based, this was the entire reason the IFRAME was invented. You can just target the IFRAME with each of your anchor tags in the tabs.

Often we get caught up in using some technique, because it’s the in thing at the moment. Using AJAX for this is overkill.

It one thing if you have some very specific content in each tab that you want to change and you’ll only updating partial pieces of the content, but there’s no reason to load entire content blocks via AJAX.

Comment by Dan G. Switzer, II — May 22, 2006

Yeesh, people. It’s useful if you have dynamic content and don’t want to use iframes. In XHTML 1.x Strict iframes are deprecated.

“Even if the content was generated by a php script from a database, there’ still no point to having it loaded later on rather than the first page load.”

It’s initial load wait versus pay-as-you-go. There’s no right or wrong answer here–it depends on the situation.

Comment by Matthew Ratzloff — May 22, 2006

Of course, but in the case of the example, there is no purpose to the pay-as-you-go approach whatsoever. That’s the point: we really need to be a lot more clear to aspiring programmers what the POINT of some script or technology is. Otherwise, they waste time and resources on fads instead of solving problems.

Although I’m still not sure what your point is. CSS/javascript are a solution to creating tabs: whether the content in them, as with any content anywhere, is static or triggered by some event is irrelevant.

Comment by plunge — May 22, 2006

Regardless of merit or usefulness, this is basically an old idea (ex) recoded in Dynamicdrive’s inimitably terrible style.

The most obvious fault with this implementation is that by clicking a number of tabs in a short time, it is easy to get content which doesn’t match the selected tab link. By pulling and updating the field asynchronously, this script decouples the interface and the display in a potentially confusing way – creating a whole new problem to script for.
Unintended consequences like this are the prime symptom of ajax abuse, I think.

Comment by henrah — May 22, 2006

oh dear. looks very nice, but i agree – functions really badly.

Comment by Dave Ashe — May 23, 2006

[…] Ajaxian » Ajax Tabs Content script […]

Pingback by Deep Codes » AJAX Content Script — May 23, 2006

I agree with Plunge. Why fix something that isn’t broken. It does look clean, but it will only lead problems. I think we need to call the Ajax Abuse Hotline.
___________________________________________________________
Are YOU a Lost Cherry? Find yourself at LostCherry.com. I did: http://www.lostcherry.com/john

Comment by John Slaw — May 23, 2006

I agree with Plunge. Why fix something that isn’t broken. It does look clean, but it will only lead problems. I think we need to call the Ajax Abuse Hotline.
___________________________________________________________
Find me at http://www.lostcherry.com/john

Comment by John Slaw — May 23, 2006

I agree with Plunge. Why fix something that isn’t broken. It does look clean, but it will only lead problems. I think we need to call the Ajax Abuse Hotline.

Find me at lostcherry.com/john

Comment by John Slaw — May 23, 2006

I agree with Plunge. Why fix something that isn’t broken. It does look clean, but it will only lead problems. I think we need to call the Ajax Abuse Hotline.

Comment by John Slaw — May 23, 2006

John Slaw – how about the comment abuse hotline?

Ratzloff has a point with regard to load time and the iFrame being deprecated in XHTML strict.

Comment by Scott — May 23, 2006

This is a nice piece of code. I think customization to using lightbox or thickbox would make it even better. Eyecandy : mmmmmm.

Comment by Servaas — May 24, 2006

I have found an interresting framework to do tabs.
the demo is here (try with firefox or ie6+) : http://sharengo.org/jsria/test/allComponents.html

Comment by fowler — May 31, 2006

[…] Via Ajaxian […]

Pingback by Intenta » Blog Archive » Ajax tab content script — July 8, 2006

Well problem is that … on loading .aspx page in the container …. if the .aspx page has some links the the links dont work …

Comment by Ali Hasnain — August 30, 2006

First off: these scripts WILL make the web more efficient, it just takes time.
2. Iframes are as bad as frames so any GOOD designer would tell you to stay away from them.
3. To load new things as you click around is an easy way of saying: we’ll not let you load any of the stuff before you actually need it.
Eventually some of the scripts that are quite new use more code than the actual data they’ll load but intelligent scripts won’t. This way pages (and sites) will load miniseconds faster. No difference? than why would all critics talk about opera beings milleseconds faster than firefox (and firefox being uhh… minutes faster than IE LOL…)? that’s because time is money, and this world is money-driven.

Another comment no-one will actually read I guess:P

Comment by Luuk Lamers — September 4, 2006

I have tried it but the content -dog-otter etc just works as a link to a different page insted to show the content in the same interface that is the essence of the exercise.

Comment by alex jones — September 10, 2006

I tried the script; but if the writing was in “Arabic” it wouldn’t work perfectly!

Comment by Alaa — September 18, 2006

I have tried the demo, it works well.

But failed when I tried to load a dynamical page, eg. a jsp page with parameters.

BTW. I also want to use it from a jsp page.

Anyone can help? Thanks in advance.

Comment by bwlee — October 1, 2006

good example

Comment by hi — October 9, 2006

its good an example and i use this on my web site.
Thanks

Comment by Hazirsunucu — November 4, 2006

Hi
The only problem that I can found is that the content can be opened without the ajax container.

Comment by marian — January 9, 2007

Hi, Love the script! Good job.

I have come across an issue though. When I try and force a tab open from a child window in IE it works fine, BUT when I try and open a tab from a child in Firefox it just sits on the ‘Requesting Content…’ text.

Below is the output from Firefox:
Error: uncaught exception: [Exception… “Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIXMLHttpRequest.open]” nsresult: “0x80004005 (NS_ERROR_FAILURE)” location: “JS frame :: http://test.com/ajaxtabs/ajaxtabs.js :: ajaxpage :: line 40″ data: no]

Any idea how to resolve this problem?

Comment by Egon — March 5, 2007

Well I need to say good work oso…
But… lol….
I got a problem with loading forms in ajax window.. In IE or Opera or Maxthon or Netscape it opens it perfectly… But in Firefox it just output strings… So if anyone can help me a little bit about this problem… I tryed to fix that, oso I tryed to modify .js script and include it on like 10 different ways but still no changes at all… :S

Comment by GemX — March 20, 2007

i find it so amusing that people ask for support on the DD script in the comments here.

my ’68 vette makes a whining sound in the cold weather. anybody help? THIS IS URGENT!!!! PLEASE!!!!!

Comment by yahoo fanboy — March 27, 2007

Hey ppls…
I used the script and it was all well and good with firefox, camino and safari….but as usual problems with i.e. My problem, as someone mentioned above, is the tabs load on a different page. Ajax it might not be the best way but it the way im learning for now so please any help will do…let moi know if you need to see the code. as i said its beautiful and fast with all others but i.e loads a new page. by the way i think we should boycot i.e…lol

Comment by dboy — March 28, 2007

how can i do because there is a bug with caracters like é è à ç etc…

thanks

Comment by jul — March 29, 2007

Great script and great documentation. It took for me 1 hour to implement my image galleries.
The only thing I would doubt is “all pages are Fully unobtrusive, search engine friendly”.
You can not set meta tags for your external pages.
So I have added direct links to the pages.
Image galleries with Ajax Tabs Content script:
http://www.featurepics.com/Editorial/ajax-tabs-content.aspx

Comment by FeaturePics Images — April 14, 2007

In IE it opens a new page, in ff it works, can’t work it out, please help.

Comment by starp25 — June 8, 2007

I want to use this Ajax tab contens in my Japanese site, but all Japanese characters are garbled. Is there any way to correct it?

Comment by mtajiri — July 5, 2007

Your script is broken if the external URL/Tab menu has signals on it’s files it will not show right on the page.

Example world: são
(You should test it)

Comment by Bud — July 30, 2007

there is a problem when i use more than 5-6 tabs , iam using around 15 tabs at one time . How do i use this script with 15 tab contents , any suggestions

Comment by freelance Seo Expert — September 2, 2007

Reply :mtajiri

You can pass a paramter with a value to the page then you can do the same way as “Select 3rd tab of “maintab”” to get the target tab

Comment by Ctao — October 14, 2007

yeah it doesn’t work in ie.. Help..!!!

Comment by curiousjane — October 16, 2007

Nice collection of tab-based interface here. The tab had given me ideas for upcoming projects.

Comment by cirjegan — November 25, 2009

Leave a comment

You must be logged in to post a comment.