CODEWITHSUNDEEP
jqueryjquery-tabs
Sourav
Sourav

Reputation: 17530

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

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.

https://i.sstatic.net/Y2tTx.jpg

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?

Upvotes: 1

Views: 1127

Answers (5)

littlealien
littlealien

Reputation: 429

I'm sorry if i got it wrong but;

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

It's enough.

Upvotes: 1

Hussein
Hussein

Reputation: 42818

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

Upvotes: 2

user688461
user688461

Reputation:

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

Upvotes: 1

Chris
Chris

Reputation: 7184

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

Upvotes: 1

Mike Thomsen
Mike Thomsen

Reputation: 37526

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

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

Upvotes: 1

Related Questions