How to make a jQuery Horizontal Tab that loads the

Question

I want a jQuery horizontal tab pane (screenshot below) where clicking on a tab loads an external page in the div but where clicking on it after it is loaded does not load the page again.

There are 7 tabs Wall, Latest, Discussion, Poll, Club Message, Create.

A demo can be seen here http://www.web-shine.in/tabs/

I want the TAB to load the page once, and next time the user clicks on it, it should show the page from browser cache, not from the server.

What is the best way to code this?

Answer 1

All you need to do is put this sample inside an AJAX call:

http://jqueryui.com/demos/tabs/#manipulation

Answer 2

Try making your AJAX call in the "show" event of the tabs. This should only fire, when a tab is shown (i.e. when the selected tab changes).

http://docs.jquery.com/UI/Tabs#event-show

Answer 3

Try something like this:

var cache = {};

function loadTab(tabObj) {
    if(!tabObj || !tabObj.length){ return; }
    $(containerId).fadeOut(100);

    var target = tabObj.attr('href');

    if (cache[target] !== undefined) {
        $(containerId).html(cache[target]);
        $(containerId).slideDown('medium');
        $(containerId).fadeIn('slow');
    } else {
        $(containerId).load(tabObj.attr('href'), function()
        {
            cache[target] = $(containerId).html();
            $(containerId).slideDown('medium');
            $(containerId).fadeIn('slow');
        });
    }
}

Answer 4

I'm sorry if i got it wrong but;

$('#tabs').tabs({cache: true});

It's enough.

Answer 5

Use the one() function.

Ex:

$("#foo").one("click", function() {
  alert("click can only be done once.");
});

UPDATE

If you are trying to cache the Ajax response so that subsequent Ajax requests that match the original Ajax options will return the cached response instead of making a new call then i highly recommend using this excellent jQuery plugin http://plugins.jquery.com/project/ajax-cache-response