34 comments

• 

  Boyan

  2 years ago

  Nice work! You are missing a closing "div" at the end (for ).
  reply
• 

  Jesse

  2 years ago

  Yikes! Thanks.
  reply
• 

  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
  reply
• 

  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:
  
  First
  Second
  Third
  Fourth
  reply
• 

  Rune

  1 year ago

  Hi, Great tabs.
  
  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?
  reply
• 

  Jono

  1 year 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.
  reply
• 

  d0m

  1 year ago

  I agree with Jono why no style?
  reply
• 

  CHXNIK

  1 year 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.
  reply
• 

  netmastan

  1 year ago

  is there anyway, you can add some effect like side effect like this http://demo.rockettheme.com/jun07/
  reply
• 

  Jesse

  1 year ago

  Jono,
  
  View source and take it to your hearts content. :)
  reply
• 

  Richard

  1 year 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.
  reply
• 

  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
  reply
• 

  Jesse

  1 year ago

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

  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,
  reply
• 

  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?
  
  Thanks...
  reply
• 

  Rakesh

  1 year ago

  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%;}
  reply
• 

  James Kent

  1 year ago

  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!
  reply
• 

  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.
  reply
• 

  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...
  reply
• 

  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?
  reply
• 

  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.
  reply
• 

  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.
  reply
• 

  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,
  
  Jez
  reply
• 

  Jesse

  1 year ago

  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>
  reply
• 

  Jez

  1 year ago

  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.
  reply
• 

  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!
  reply
• 

  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.
  reply
• 

  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.
  reply
• 

  Jesse

  1 year ago

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

  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...
  reply
• 

  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.
  reply
• 

  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. :(
  reply
• 

  Darryl

  1 year ago

  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. :)
  reply
• 

  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>
  reply