How to make a jQuery Horizontal Tab that loads the page once

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 th

Answer 1

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

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

Answer 2

I'm sorry if i got it wrong but;

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

It's enough.

Answer 3

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

Answer 4

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 5

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');
        });
    }
}