Tabs jQuery UI: how to switch to a tab (ajax) without reloading it?

Question

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

Answer 1

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

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

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

Then, after the contents of the tab have been loaded for the first time, you can enable caching for this tab. I just put it in $(document).ready to cache the page:

 $(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 2

 $(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 3

... follow the bookmark url instead of loading its contents via ajax

Note that opening a tab in a new window is unexpected, for example. inconsistent behavior revealing 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