Question

I’m using jQuery UI’s Tabs plugin with a asp.net (webform) application.

As there are some postbacks in the page, I’d like to persist the current tab. I’m trying with this following markup code, but this does not works :

<input type="hidden" name="selectedTab" id="selectedTab" value="<%= Page.Request.Form["selectedTab"] %>" />

<script type="text/javascript">
    $(function () {
        $("#ActionTabs")
            .tabs()
            .bind("tabsselect", function (event, ui) {
                $("#selectedTab").val(ui.index);
            })
            .tabs("select", $("#selectedTab").val());

    });
</script>

<div id="ActionTabs">
    <ul>
         <li><a href="#tab1">Tab1</a></li>
         <li><a href="#tab2">Tab2</a></li>
    </ul>
    <div id="tab1">
    </div>
    <div id="tab2">
    </div> 
</div> 

Using developer tools, I can see my hidden selectedTab is correctly set when selecting a tab, and correctly set after a postback, but the first tab is always selected after the page load.

What is wrong in my code ?

Answer 1

Ok, I found another way of declaring my tabs :

<script type="text/javascript">
    $(function () {
        $("#ActionTabs")
            .tabs({
                selected : $("#selectedTab").val(),
                select: function (event, ui) {
                    $("#selectedTab").val(ui.index);
                }
            });

    });
</script>

This time, it’s working as expected. Not sure to understand why the first version was not working.