Using jQuery tabs inside the update panel in asp.net

Using jQuery tabs, accordion or any other widget inside an update panel is always being tricky. Tabs, Accordion and any other jQuery widget loses the style every time partial post back occurs which is quite annoying. People tried different approach to overcome this issue. Here is the javascript code to set jQuery Tab –

<script type="text/javascript">

        $(function () {

            $("#tabs").tabs();

        });
    </script>

And HTML code for the tab set like below –

<div id="tabs">
	<ul id="none">
		<li><a href="#tabs-1">Asset details</a></li>
		<li><a href="#tabs-2">Structure details</a></li>
		<li><a href="#tabs-4">Audit Info</a></li>
	</ul>

<div id="tabs-1">Some Content for tab 1</div>
<div id="tabs-2">Some Content for tab 2</div>
<div id="tabs-3">Some Content for tab 3</div>
</div>

Now it works fine with normal html pages and there is nothing wrong with that. I found another annoying thing is every time a page post back or partial post back occurs the tab loses the selected tab index and it goes to the first one. So In the aspx page I have created an hidden item and set the value for the selected tab index and set it back after page post back occurs. It works fine so far. Here is the modified code –

<script type="text/javascript">
$(function () {

function pageLoad(sender, args) {

            if (args.get_isPartialLoad()) {

                //  fix up the tab style
              $("#tabs").tabs({
                show: function () {
                    var sel = $('#tabs').tabs('option', 'selected');
                    $("#<%= hidLastTab.ClientID %>").val(sel);
                },
                selected: '<%= hidLastTab.Value %>'
            });
              }

        } 

    </script>

<asp:UpdatePanel runat="server">
<ContentTemplate>

<div id="msg" runat="server" ></div>
  <asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
        <img src="images/uploading.gif" alt="Loading..." />
    </ProgressTemplate>
    </asp:UpdateProgress>

my form view code goes here
<asp:HiddenField runat="server" ID="hidLastTab" Value="0" />
    </ContentTemplate>
    </asp:UpdatePanel>

        });
    </script>

Bear in mind you can use $(document).ready(function(){ //your code }); or the short version $(function(){ //your code });. And the hidden item like this –

<asp:HiddenField runat="server" ID="hidLastTab" Value="0" />

Now it works fine and when updating record, it come back to the active tab, like the image below –

So far so good, no I did not implement any updatePanel yet and it works fine. I have included an updatePanel and now it losing tab style every time partial post back happen for record update. I had success with couple of approaches, one is setting jQuery tab after a partial postback occurs. Like this –

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

    };