Jquery Tab Set Hiddenfield Value

Question

Your assistance is greatly appreciated --
I have spent a few hours reading a variety of answers here and via Google and must be overlooking something.

I am using JQuery Tabs (JQuery 1.9.1 / JQuery UI 1.10.3) with Asp.Net and want to maintain the selected tab on postback.
The tabs are within an UpdatePanel.
The active: <%= hdnSelectedTab.Value %> portion is working because I can manually set the value for the hiddenfield and that tab is selected on postback.
However, I am unable to change the value of the hiddenfield.

My JavaScript is:

    <script type="text/javascript">
        $(function () {
            $("#tabs").tabs({
                show: function() {
                    var sel = $('#tabs').tabs('option', 'active');
                    $("#<%= hdnSelectedTab.ClientID %>").val(sel);
                },
                active: <%= hdnSelectedTab.Value %>
                });
        })
    </script>

My tab structure is:

<asp:ScriptManager ID="scriptmanager" runat="server" />
    <asp:UpdatePanel runat="server" ID="tabpnl">
    <ContentTemplate>
        <tr>
            <td colspan="4">
            <br />
            <div id="tabs">
                <ul>
                    <li><a href="#tab-1" runat="server" id="tab1id">Tab1</a></li>
                    <li><a href="#tab-2" runat="server" id="tab2id">Tab2</a></li>
                    <li><a href="#tab-3" runat="server" id="tab3id">Tab3</a></li>
                    <li><a href="#tab-4" runat="server" id="tab4id">Tab4</a></li>
                </ul>
                <asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
                    <div id="tab-1">
                        <table id="transaction2">
                            <tr>
                                <td id="tdpmt1" runat="server">
                                    <asp:Label ID="lblpmt1" runat="server" Text="Payment 1" CssClass="header" /></td>
                            </tr>
                            ....more code....

Edit in response to Aristos

I dropped in your code but no luck. The postback still resets the selected tab to the first tab. The trigger for the postback I am using for testing is a dropdownlist with an OnSelectedIndexChanged event that changes the text of a label. Both the dropdownlist and the label are within the UpdatePanel. Here is that code:

<asp:DropDownList ID="invoicestatusddl" runat="server" CssClass="dropdown" AutoPostBack="true" OnSelectedIndexChanged="invoicestatusddl_SelectedIndexChanged">
    <asp:ListItem Text="Invoiced" Value="1" Selected="True" />
    <asp:ListItem Text="Future" Value="0" />
</asp:DropDownList>

and

protected void invoicestatusddl_SelectedIndexChanged(object sender, EventArgs e)
{
    if (invoicestatusddl.SelectedValue == "0")
    {
        lblinvdate.Text = "Future Invoice Date:";
    }
    else
    {
        lblinvdate.Text = "Date Invoiced:";
    }
}

Answer 1

I ended up writing separate functions for each tab link. As follows:

<script>
    function changeHidden0(){
        document.getElementById("hdnSelectedTab").value = 0;
    }
    function changeHidden1(){
        document.getElementById("hdnSelectedTab").value = 1;
    }
    function changeHidden2(){
        document.getElementById("hdnSelectedTab").value = 2;
    }
    function changeHidden3(){
        document.getElementById("hdnSelectedTab").value = 3;
    }
</script>

Thanks Aristos for your help, you gave me some additional wording for my Google searches that helped me figure this out.

Answer 2

The javascript part is run only when you first load your page, and there you set the selected tab once.

Now on every Update using the Ajax of the UpdatePanel the same script is not run. To make it run you need to use the UpdatePanel javascript functions that exist for this reasons.

The most simple is the pageLoad, use it to initialize your code, and it will be work

function pageLoad()
{
    $("#tabs").tabs({
        show: function() {
            var sel = $('#tabs').tabs('option', 'active');
            $("#<%= hdnSelectedTab.ClientID %>").val(sel);
        },
        active: <%= hdnSelectedTab.Value %>
    });
}

reference : http://msdn.microsoft.com/en-us/library/bb386417(v=vs.100).aspx