Basic Ajax for Tabs

I am looking for a way to use the tabs control using AJAX. Any help?

I need a simple explanation of how to implement it or a working example I can use.

And was wondering if the browser back button has ever been enabled with this tabs control?

Thanks!!

Posted July 18th, 2007 at 11:21am by shikana

new Control.Tabs('myElement', {
    afterChange:function(new_el){
        new Ajax.Updater(new_el, {...});
    }
});

Posted July 20th, 2007 at 4:13am by Roland

Thanks Roland!

I am a complete newbie .. could you show me how this is to be added to a page using control.tabs?

Posted July 23rd, 2007 at 8:11am by shikana

<ul id="tabs">
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
<ul>
<div id="one">
    <!-- no content, cause its loaded with AJAX -->
    <img src="indicator.gif" alt="" /> <!-- or leave empty -->
</div>
<div id="two">
    <!-- no content, cause its loaded with AJAX -->
    <img src="indicator.gif" alt="" /> <!-- or leave empty -->
</div>
<script>
    new Control.Tabs('tabs', {
        afterChange:function(new_el){
            new Ajax.Updater(new_el, 'your_page.html', {
                onSuccess:function(){
                    alert('content loaded in tab');
                }
            });
        }
    });
</script>

• Not tested =P

Posted July 24th, 2007 at 4:59am by Roland

If each tab has a different page, you could use the DIV id to make a unique page...

var page = 'page_' + new_el.id + '.html'; // or maybe better
var page = 'pages.html?tabID=' + new_el.id; // returns pages.html?tabID=(one|two)

good luck though.

Posted July 24th, 2007 at 5:02am by Roland

You are a king .. I will let you know how I get on!

Posted July 24th, 2007 at 7:42am by shikana

You are a king .. I will let you know how I get on!

Posted July 24th, 2007 at 7:43am by shikana

You are a king .. I will let you know how I get on!

Posted July 24th, 2007 at 7:44am by shikana

You are a king .. I will let you know how I get on!

Posted July 24th, 2007 at 7:49am by shikana

You are a king .. I will let you know how I get on!

Posted July 24th, 2007 at 7:49am by shikana

<ul id="tabs">
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
<ul>
<div id="one">
    <!-- no content, cause its loaded with AJAX -->
    <img src="images/indicator.gif" alt="" /> <!-- or leave empty -->
</div>
<div id="two">
    <!-- no content, cause its loaded with AJAX -->
    <img src="images/indicator.gif" alt="" /> <!-- or leave empty -->
</div>
<script>

new Control.Tabs('tabs', {
    afterChange:function(new_el){
var page = 'page_' + new_el.id + '.html';
        new Ajax.Updater(new_el, page, {
            onSuccess:function(){
                alert('content loaded in tab');
            }
        });
    }
});

</script>

Works like a freakin charm .. thanks heaps!

Posted July 24th, 2007 at 8:26am by shikana

Unfortunately it doesnt work in IE7 .. any ideas?

Posted July 25th, 2007 at 8:22am by shikana

Another noob question along the same lines!

I am using the code below to update my div, but I would like it to update and load the default content only when the tab is clicked, as I have other (non tab) links which should also be able to load content into the same target area.

new Control.Tabs('tabs_test', {
    afterChange:function(new_el){
        var page = new_el.id + '_default_content.php';
        new Ajax.Updater(new_el, page, {
            onSuccess:function(){
                alert(page + ' content loaded in tab');
            }
        });
    }
});

Also, the previous post says this doesn't work in IE7. I can't test this as I have no IE here at the moment. Is this correct, and if so is there any way around the problem?

Thanks for any help you can give with this.

Posted November 5th, 2007 at 2:18pm by stevie