Initialize tab contents of remote jQuery on page load

Question

I use the jQuery tab library to create a set of deleted (e.g. ajax loaded) tabs.

However, so that the initial page load is empty until the ajax request completes, I would like to include content for the initial tab with the initial page load.

This usually works for me, providing a div in the bootstrap of the page that matches the tab title, but even though this content appears as soon as I initialize the tabs, it makes an ajax IN ADDITION request, which is wasteful and causes flickering. My main question is: how can I get jQuery tabs so as NOT to execute an ajax request for the initially selected tab, and get this content as part of the page loading, while dynamically loading other tabs.

The complication is that I cannot hardcode the / hrefs identifiers for which the tab is “initial”, since the original tab will change based on the available content.

I'm sure there is some hacker way to do this with javascript rewriting tab urls dynamically before initializing tabs, but I'm looking for a cleaner solution.

Any ideas?

Answer 1

Are you using a specific tab control? It pretty much depends on how your tabs are implemented ...

If you want the data to be included without delayed load, you will have to enable it on the server.

Give me some details and I will see what I can do!

Answer 2

- , . JQuery AJAX.

, , , "":

var initial=true;

:

$('.selector').tabs({
   select: function(event, ui) { if(initial) { initial=false; return false; }
});

ajax.

Answer 3

There is a "spinner" option that contains text, gif animation, or something else.

$( ".selector" ).tabs( { spinner: 'Retrieving data...' } );