20bits - Latest Comments in Dynamic Ajax Tabs in 20 Lines | 20bits

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Jesse — Mon, 31 Mar 2008 14:58:37 -0000

Hey everyone,

The problem is that in Prototype 1.6 the hash object is no longer API-compatible with an Object. That means you can't pass in a Prototype Hash where an Object was expected. To remedy this there is no a toObject() method.

I'll post a fix with documentation and the like, but for now you can fix it by adding ".toObject()" after ".merge(args)".

The call to Ajax.Updater should now be <pre>
new Ajax.Updater(pane, tabs[Event.element(e).id], $H({
asynchronous: true,
method: 'get'
}).merge(args).toObject());</pre>

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Darryl — Mon, 31 Mar 2008 14:06:55 -0000

I think this is the problem for those using Prototype 1.6+:
http://www.prototypejs.org/api/hash/merge

Will post a solution if I find one. Feel free to beat me to it. :)

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Darryl — Mon, 31 Mar 2008 13:44:23 -0000

Ok, fixed my problem. I think it should be stressed that it's very important where you declare your TabbedPane's. It must be *after* the tab section has been laid out, otherwise the Prototype model will complain because the elements being passed in don't exist yet.

I moved my TabbedPane block to the end of the page just before the tag and it worked fine. Now that I think about it, it makes perfect sense. :)

Now that that's fixed, I'm also experiencing the problem with the overlap pane not being hidden. :(

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Darryl — Mon, 31 Mar 2008 11:19:16 -0000

Same problem as Dylan MacDonald for me. Doesn't work for Prototype 1.6. Firebug tells me: "element has no properties [Break on this error] if (element._eventID) return element._eventID;"

Can't make head or tails of why. Pity, I kinda liked this solution.

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Dylan MacDonald — Fri, 28 Mar 2008 17:13:40 -0000

Yeah if you could get this working for the current version of prototype, that would be helpful. All I get now is the loading message...

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Jesse — Wed, 26 Mar 2008 14:18:13 -0000

um,

I'm open to all advice. Do you have any, or are you just complaining miscellaneously?

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Marcus — Wed, 26 Mar 2008 14:14:00 -0000

Nice! Very simple and a great starter. Thanks for taking the time to write it up, post it on your site and answer questions.

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

um — Tue, 25 Mar 2008 16:23:00 -0000

Please Jesse, this is some neat code but you need to do a better job presenting it for download and use. Take some pointers from other sites and try to make your website more usable.

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

EdCroft — Tue, 11 Mar 2008 15:41:45 -0000

Jesse... really great tabs...for some reason the onSuccess hide won't work for the loading icon. It never goes away. I noticed someone had to revert to an old version of Prototype for this to work... do you know of any fixes for the current version?
Thanks!

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Jez — Fri, 29 Feb 2008 14:51:48 -0000

Thanks for taking the time to help us out Jesse - I'm sure that is what I had done, but obviously I hadn't - it works fine now.

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Jesse — Fri, 29 Feb 2008 00:42:11 -0000

Jez,

Like so:
<pre>new TabbedPane('MyPane',
{
'pane1': '/downloads/pane1.html',
'pane2': '/downloads/pane2.html'
},
{
onClick: function(e) {
$('MyPane_overlay').show();
},
onSuccess: function(e) {
$('MyPane_overlay').hide();
},
evalScripts: true
});</pre>

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Jez — Thu, 28 Feb 2008 05:25:01 -0000

Hi Jesse.

"You can just set the appropriate fields in the args parameter" - I'm new to this and can't do this successfully, whereas including it the script just works.

Thanks,

Jez

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Jesse — Wed, 27 Feb 2008 18:48:30 -0000

Jez,

You shouldn't need to muck with the script itself. You can just set the appropriate fields in the <tt>args</tt> parameter — it's passed through to the Updater.

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Jez — Wed, 27 Feb 2008 18:02:23 -0000

OK, after a bit of digging I found out I had to include evalScript:true in the Ajax.Updater, and it's now working a treat. Thanks again for making this available Jesse.

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Jez — Tue, 26 Feb 2008 19:46:11 -0000

Thanks for this Jesse. I just have a quick question though - I am trying to include Flash content within the panes using SWFObject, but this is not working - as far as I understand this is due to Prototype not rendering JavaScript. Can anyone tell me if this is correct or not, and if so, if there is any work around?

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Darren — Thu, 21 Feb 2008 15:36:01 -0000

Solved it. I was using the newest version of prototype. So after I reverted it worked fine. I suppose if I had the time I could make it work with the new version. But...

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Darren — Thu, 21 Feb 2008 15:06:38 -0000

I am having trouble with the onSuccess event as well -- just not getting called. I am including the js files prototype and effects. I have tested on Win and Linux, as well as multiple browsers. Any help would be greatly appreciated.

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

James Kent — Sun, 10 Feb 2008 11:28:19 -0000

hi, this is pretty cool! I was inspired by this to make one of my own - here i used scriptaculous for mine though, to give me cool effects!

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Rakesh — Fri, 08 Feb 2008 00:45:48 -0000

this is the style used here

.tabbed-pane * {margin: 0;padding: 0;}
.tabbed-pane {width: 500px;}
.tabbed-pane .tabs {list-style: none;clear: both;float: left;margin-bottom: -1px;}
.tabbed-pane .tabs .active {background: white;border-bottom: 1px solid white;}
.tabbed-pane .tabs li {float: left;margin: 0 3px 0 0;}
.tabbed-pane .tabs li a {color: #336699;display: block;padding: 5px;background: #f0f0f0;border-color: #333;border-style: solid;border-width: 1px;}
.tabbed-pane .pane {border: 1px solid #333;padding: 5px;clear: both;height: 100%;}
.tabbed-container {position: relative;clear: both;min-height: 10em;}
.tabbed-container .overlay {position: absolute;clear: both;border: 1px solid #333;padding: 5px;width: 488px;top: 0;left: 0;background: white url(/include/images/spinner.gif) center center no-repeat;text-align: center;z-index: 100;height: 100%;}

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Thomsen — Fri, 25 Jan 2008 15:49:21 -0000

Hi,

Nice work Jesse!

I'm trying to load some php code into one of the tabs, but it seems like it doesn't support using code in the external file? Can anyone help?

Thanks...

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Randy — Sun, 13 Jan 2008 23:41:07 -0000

Hi,

This looks very nice, however I seem to have a problem loading a page when I click a tab link .
the path is correct, and it links to a standard html page, however when I click the tab, it just tries to load but it never does.
So I went to the "activities" window in Safari, to see what has been loaded and it shows that it is trying to load the page. But right next to the file name it says "method not allowed".

Any idea what is causing this?

im just running a test page at the moment, so there is no special scripting or html or anything in the page.

Thanks,

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Jesse — Fri, 28 Dec 2007 13:30:57 -0000

Greg,

This system requires at least the prototype.js library. Are you loading both prototype and scriptaculous?

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Greg — Tue, 25 Dec 2007 21:24:18 -0000

I'm having a little trouble making this tab system work. I am currently just running it from a local Apache installation that I use for testing. Obviously I tried to make a lot of adjustments up front, but when it appeared that the onSuccess call was never firing, I back-tracked.

I copied the necessary styles from the external style sheet. I copied the code in TabbedPane.js to an empty JS file I was using for testing. I copied the source code from to it's closing div tag. And I downloaded pane1.html and pane2.html.

Everything appears to load correctly. But when I click on a tab, the activity indicator, "MyPane_overlay", is not hidden. I placed an alert before the hide function is called, but the alert is never executed. Any ideas why this might fail? Thanks

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Richard — Tue, 18 Dec 2007 10:15:44 -0000

Jesse, thanks for a great tutorial. Very helpful. I've previously used jQuery, but think Prototype is best for this.

One question I did have was is it possible to use a Rollover behaviour on the tabs? I want to make the pages load when someone rolls over a tab rather than click.

Re: Dynamic Ajax Tabs in 20 Lines | 20bits

Jesse — Mon, 29 Oct 2007 17:09:22 -0000

Jono,

View source and take it to your hearts content. :)