Javascript for when AjaxControlToolkit TabContainer is ready?

Question

I have a page with a TabContainer control (from the Ajax Control Toolkit), and I toggle the visibility of some elements on the page depending on the currently-selected tab. I'd been doing this in an event handler for OnClientActiveTabChanged (which works fine), but I discovered that it leaves the page in the wrong state after a postback. I tried adding some code to the document.ready event handler to get the index, but when I do the following:

$(document).ready(function () {
    var index = $('#<%= TabContainer1.ClientID %>').[0].control.get_activeTabIndex();
    // Do some stuff with the index
});

...I get a null reference exception on the .control property. Is there a way to hook a client-side "ready" event for the TabContainer?

I’m not familiar with the event lifecycle with normal DOM elements (it seems like there ought to be a general onload event, but I don’t see one). If there isn’t an event that can be easily handled, it seemed like it might work to add an UpdatePanel with UpdateMode=Conditional and an AsyncPostBackTrigger that pointed to a hidden button with an onclick event handler that would get the active tab index – but that seems like a lot of moving pieces for something that I’d expect the DOM to expose already.

Answer 1

Too late to be helpful, but I've had the same issue and found a workaround. Change you code

$(document).ready(function () {
    var index = $('#<%= TabContainer1.ClientID %>').[0].control.get_activeTabIndex();
    // Do some stuff with the index
});

to

function pageLoad() {
    var index = $('#<%= TabContainer1.ClientID %>').[0].control.get_activeTabIndex();
    // Do some stuff with the index
};

Explanation here: http://encosia.com/document-ready-and-pageload-are-not-the-same/

Basically, jQuery's ready event is "a bit early" and the TabContainer is not initialized yet, whereas the client side ASP.Net's pageLoad is late enough and the TabContainer has been initialized by then.

Answer 2

Check this post to save tab selection during postbacks. It works for normal post backs by saving the active tab index in hidden variable. Though its written for a JQuery plugin in the posted link, concept should be the same i.e., persisting the index of the selected tab.