DISQUS

20bits: Dynamic Ajax Tabs in 20 Lines | 20bits

  • Boyan · 2 years ago
    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:

    First
    Second
    Third
    Fourth
  • Rune · 2 years 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?
  • 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.
  • netmastan · 2 years ago
    is there anyway, you can add some effect like side effect like this http://demo.rockettheme.com/jun07/
  • Jesse · 2 years ago
    Jono,

    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?

    Thanks...
  • 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%;}
  • 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!
  • 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,

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