Initialize content of a jQuery remote tab on initial page load

Question

I'm using the jQuery tabs library to create a set of remote (i.e., ajax loaded) tabs.

However, to avoid the initial page load being empty until the ajax request finishes, I'd like to include the content for the initial tab with the initial page download.

I've got this generally working by providing a div in the initial page load that matches the title of the tab, but even though this content appears immediately, as soon as I initialize the tabs it does the ajax request IN ADDITION which is both wasteful and causes a flicker. My basic question is how can I get jQuery tabs to NOT do an ajax request for the initially selected tab, and get this content as part of the initial page load, while still loading the other tabs dynamically.

The complication is that I can't hard code the ids/hrefs for which tab is the "initial" one since the initial tab will change based on available content.

I'm sure there is some kind of hacky way to do this with javascript rewriting the URLs of tabs dynamically before I initialize the tabs but I'm looking for a cleaner solution.

Any ideas?

Answer 1

Are you using a specific tab control to do this? It's pretty dependent on how your tabs are implemented...

If you want the data to be included without a delayed load, you will have to include it server side.

Give me some more details and I'll see what I can do!

Answer 2

The best way to do it is using server side implementation to add the starting text. In the JQuery documentation the default text it is not loaded through AJAX.

I'm not sure exactly what you are doing but if that is not your case, then a simple boolean "hack" could be used like this:

var initial=true;

Then, in your tabs code:

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

This will prevent to execute the ajax call the very first time.

Answer 3

There's an option called "spinner" which holds the text, gif-animation or whatever to be displayed.

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