jquery tabs sometimes not rendered

Question

I have a strange problem in a web-app (using jQuery 1.10.2 and jQuery UI 1.10.3: the tabs (of the Tabs-plugin) are SOMETIMES rendered correctly and SOMETIMES not. "incorrect" means that the divs with the tab-contents are shown one below the other, no

That happens with IE7,8,10 and FF26 and on machines with rigid policies as well as those with more relaxed policy. The browser may show a page incorrectly and then you just press F5 and the reload renders correctly. Has anyone else had similar problems before? I have no idea how to approach this thing, yet the project-mgr wants to see something happening...

(I have validated the HTML/JS using CSE HTMLValidator and it did not report issues, also the JS console does not show any errors, but reports a few warnings (like 'Expected declaration, but found '*' for CSS-declaration like '*cursor: hand;' etc., but nothing related to the stuff I do)

Answer 1

How are you loading the tab content? Is it in the page when it's downloaded, or are they loaded via Ajax?

If already present in the document, you should try hiding (display: none) the content div's - that way you won't see them all if the tab initialization fails (which is likely what is happening intermittently).

This sounds like it could be a timing issue - where are the tabs initialized? Make sure you have them in the document.ready function so you are sure jQuery and jQuery UI are fully loaded first.

After a failure you could try manually initializing the tabs from the console - the result (success or failure) should give some additional insight.

Also use Firebug to examine the content divs to see if they are getting changed by the tab initialization - there should be classes added.