jQuery UI Tabs: How to switch to a (ajax) tab with

Question

When the caching remains disabled (i.e. cache: false), how can I prevent the tab from loading the remote content again? Essentially, I would like to select a tab but not load it.

Answer 1

$(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                if (ui.tab.data("loaded")) {
                    event.preventDefault();
                    return;
                }
                ui.ajaxSettings.cache = false,
                ui.panel.html('<img src="images/loader.gif" width="24" height="24" style="vertical-align:middle;"> Loading...'),
                ui.jqXHR.success(function() {
                    ui.tab.data( "loaded", true );
                }),
                ui.jqXHR.error(function () {
                    ui.panel.html(
                    "Couldn't load Data. Plz Reload Page or Try Again Later.");
                });
            }
        });
    });

Answer 2

It turns out that you can control the caching of each tab by setting the 'cache.tabs' data in each tab's anchor element.

I posted the answer in another post: JQuery UI Tabs caching, but I'll just repost the code here.

// disable cache by default
$("#tabs").tabs({
    cache: false,
});

Then after the tab content has been loaded for the first time, you can enable the caching for that tab. I simply put it in the $(document).ready for the page to be cached:

$(document).ready(function () {
    // cache content for the current tab
    var currentTabIndex = $("#tabs").tabs('option', 'selected');
    var currentTabAnchor = $("#tabs").data('tabs').anchors[currentTabIndex];
    $(currentTabAnchor).data('cache.tabs', true)
});

Answer 3

...follow a tab's URL instead of loading its content via ajax

Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a usablity problem (http://www.useit.com/alertbox/tabs.html).

$('#example').tabs({
    select: function(event, ui) {
        var url = $.data(ui.tab, 'load.tabs');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;
    }
});

By: http://jqueryui.com/demos/tabs/#...immediately_select_a_just_added_tab