Nice work! You are missing a closing "div" at the end (for ).
Jesse
· 2 years ago
Yikes! Thanks.
Gautam
· 2 years ago
Hi, nice example I am digging it. But can u suggest , how to get form results output on a particular portion of a page. Say Left column is a form and right coloumn is for search results for which we will use the form. Then how to get search results using Ajax on the right column. Please help me i am new to this. Thanks
Boyan
· 2 years ago
I'm not sure how useful this is but here is a small addition to your TabbedPane function: // If the current tab is set to active, fetch it's content if ($(id).hasClassName('active')) { new Ajax.Updater(pane, tabs[id], $H({ asynchronous: true, method: 'get', evalScript: true }).merge(args)); }
This is useful when you want all tabs to be dynamic without a default content but you want one of them to load as default. Example:
I am trying to integrate a different design to your script, but I need the links to be in . eg. Pane 1 But it doesn't work. Why?
Can anyone help?
Jono
· 2 years ago
This would be more useful if you provided the style. Styling Ajax tabs is a nightmare, and that's the hard part. Making the Ajax call is trivial.
d0m
· 2 years ago
I agree with Jono why no style?
CHXNIK
· 2 years ago
Jono, you have to be kidding, the CSS for this is probably somewhere around 3 classes. If you cant do that then maybe you should work on your CSS instead of working on fancy AJAX.
View source and take it to your hearts content. :)
Richard
· 2 years ago
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.
Greg
· 1 year ago
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
Jesse
· 1 year ago
Greg,
This system requires at least the prototype.js library. Are you loading both prototype and scriptaculous?
Randy
· 1 year ago
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,
Thomsen
· 1 year ago
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?
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!
Darren
· 1 year ago
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.
Darren
· 1 year ago
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...
Jez
· 1 year ago
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?
Jez
· 1 year ago
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.
Jesse
· 1 year ago
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.
Jez
· 1 year ago
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 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.
EdCroft
· 1 year ago
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!
um
· 1 year ago
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.
Marcus
· 1 year ago
Nice! Very simple and a great starter. Thanks for taking the time to write it up, post it on your site and answer questions.
Jesse
· 1 year ago
um,
I'm open to all advice. Do you have any, or are you just complaining miscellaneously?
Dylan MacDonald
· 1 year ago
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...
Darryl
· 1 year ago
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.
Darryl
· 1 year ago
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. :(
Will post a solution if I find one. Feel free to beat me to it. :)
Jesse
· 1 year ago
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>
All Comments
But can u suggest , how to get form results output on a particular portion of a page.
Say Left column is a form and right coloumn is for search results for which we will use the form. Then how to get search results using Ajax on the right column. Please help me i am new to this.
Thanks
// If the current tab is set to active, fetch it's content
if ($(id).hasClassName('active')) {
new Ajax.Updater(pane, tabs[id], $H({
asynchronous: true,
method: 'get',
evalScript: true
}).merge(args));
}
This is useful when you want all tabs to be dynamic without a default content but you want one of them to load as default. Example:
First
Second
Third
Fourth
I am trying to integrate a different design to your script, but I need the links to be in .
eg.
Pane 1
But it doesn't work. Why?
Can anyone help?
View source and take it to your hearts content. :)
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.
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
This system requires at least the prototype.js library. Are you loading both prototype and scriptaculous?
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,
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...
.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%;}
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.
"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
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>
Thanks!
I'm open to all advice. Do you have any, or are you just complaining miscellaneously?
Can't make head or tails of why. Pity, I kinda liked this solution.
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. :(
http://www.prototypejs.org/api/hash/merge
Will post a solution if I find one. Feel free to beat me to it. :)
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>