Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Preload JQuery UI tabs in the background

All,

How can I preload all JQuery UI tabs while the first tab is still loading? I have tried the remote:true option, but it didnt work? There should be ajax spinners next to each tab name while the tabs are loading.

Thanks

like image 619
Balu Avatar asked Nov 12 '09 18:11

Balu


1 Answers

Try something like this:

$tabs = $('#tabs').tabs({
    cache: true
});
var total = $tabs.find('.ui-tabs-nav li').length;
var currentLoadingTab = 1;
$tabs.bind('tabsload',function(){
    currentLoadingTab++;
    if (currentLoadingTab < total)
        $tabs.tabs('load',currentLoadingTab);
    else
        $tabs.unbind('tabsload');
}).tabs('load',currentLoadingTab);

It initializes the tabs with the cache option so that tabs aren't reloaded after they have been loaded once. It then finds out the total number of tabs and sets the next tab to load as 1 (tabs are indexed starting with 0 ) Then it binds an event on the load event to start loading the next tab until it has hit all of them. To start it of it then loads the second tab.

like image 178
PetersenDidIt Avatar answered Sep 20 '22 11:09

PetersenDidIt