Question

I’m using the tabs in jQuery UI : http://jqueryui.com/demos/tabs/

I’ve actually a lot of data in those tabs, so when the page is loading the data are completely messed up before the tabs are fully processed/rendered.

So i’m looking for a way to detect when the tabs are finished rendering probably with a callback function will be my guess. Like this i will be able to show a waiting message before the tabs are fully rendered.

Thanks !

Answer 1

We had the same problem at work, to be honest it can be an evident problem in most JQuery if you have loads of it on the page. To ensure that it’s only shown when it’s actually ready we initially hide the parent tab container like so:

<div id="tabs" style="display: none;">

then in the document.ready function after we’ve called .tabs, we then make it visible, like so:

$(function () {
    $("#tabs").tabs();

    $("#tabs").css("display", "block");
});