How to lazy load a jQueryUI tab with AJAX only once?

Question

I've found a couple of examples on how to lazy load jQueryUI, but none uses Events/one. That seems perfectly suited to this task as it defines an event handler which only runs once.

I can't quite put it all together though. If I load content via AJAX by putting a link in the tab's <li>, I can't figure out how to only load it once without disabling the entire link.

Has anyone thought this through?

EDIT: This might be important: I want to do this because the content of each tab contains a link to fetch another page of data. If the original AJAX link is hit each time, users will lose the page of data they're currently displaying.

Answer 1

If your server sends the right cache-related headers the first time, the browser should (theoretically) take care of this for you. Subsequent calls to $().load('/url') should be cache hits, no?

Answer 2

You're still not entirely clear on your situation or needs, but if you're finding that once isn't suiting your needs, You could create your own variable per tab (or array that matched the tabs by index) that records when it is loaded

var tab1loaded = false;
var tab2loaded = false;
// etc...

function loadTab1() 
{
    if (tab1loaded)
    {
        // load tab 1 data here...
        tab1loaded = true;
    }    
}

A low-tech solution, but you have complete control over your process.