Jquery tab selection on asp.net postback

Question

I have an asp.net page with some JQuery tabs. Everything works ok. I added a dropdownlist in one of the tabs, that causes a postback. After the postback I want the same tab to be selected.

I initialize the tabs as:

<script type="text/javascript">
    $(document).ready(function() {
     var $myTabs = $(".tabsDiv").tabs();
</script>

Then, on the PageLoad event, I inject a script to select the tab:

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "TabSelect", "$myTabs.tabs('select', 1);", true);

For some reason this doesn't work. The script is running but the tabs are not selected. Is it because the RegisterClientScriptBlock places the script in the bottom of the page and, for some reason, it runs too late?

Any help is appreciated. Thx in advance

Answer 1

Calling $myTabs.tabs('select', 1); I think results in an error. $myTabs is not a global variable. It's scope is only in $(document).ready(function() { ... }); Can you try with $(".tabsDiv").tabs('select', 1); and see if it works?

Regards...

Answer 2

It might run too early... bottom of the page is good, try this instead:

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "TabSelect", 
    "$(document).ready(function() { $myTabs.tabs('select', 1); });", true);

Basically, it also runs this code at the ready event.