Initialize content of a jQuery remote tab on initial page load

Posted by Carl on Stack Overflow See other posts from Stack Overflow or by Carl
Published on 2009-08-08T00:27:52Z Indexed on 2010/03/29 9:33 UTC
Read the original article Hit count: 408

Filed under:
|

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?

© Stack Overflow or respective owner

Related posts about jquery-ui

Related posts about jquery-ui-tabs