Jquery Tabs - return selected tab dynamically

Question

On page load I would like to display selected tab dynamically. This is so validation is displayed for the correct tab. I have the following code:

<script type="text/javascript">
    $(document).ready(function () {
        var selectedTabId= $("#SelectedTab").val();
        alert(selectedTabId);

        $('#tabs').tabs(
        {
            cache: false,
            beforeActivate: function (event, ui) {
                selectedTabId = ui.newPanel.attr('id');
                $("#SelectedTab").val(selectedTabId);
            },
            selected: selectedTabId
        })

    });
</script>

The selected tab is correct which is set in a hidden field

<input type="hidden" value="@Model.SelectedTab" id="SelectedTab" name="SelectedTab" />

I have tried numerous options from links on stackoverflow and can't get the slected tab to display. Stackoverflow:selecting & loading a jquery tab programatically

Stackoverflow: Set Jquery ui active tab on page load/reload

$("#tabs").tabs('select', selectedTabId);

Answer 1

selected was deprecated as of 1.9 and is now replaced by active , try:

As discovered in comments, you need to specify the index of the tab to select NOT the ID :

$('#tabs').tabs(
    {
        cache: false,
        beforeActivate: function (event, ui) {
            selectedTabId = ui.newPanel.index();
            $("#SelectedTab").val(selectedTabId);
        },
        active: selectedTabId
    })

Make sure the selectedTabId is the zero-based index.

Answer 2

I got this to work, not sure if best approach.

$("#tabs").tabs(
{
  active: $("#SelectedTabToFind").val(),
  cache: false
});

I set the value of SelectedTabToFind in the controller.