Maintain Jquery selected tab on postback inside of update panel in asp.net

Question

I have a jquery tab inside an update panel so far this code is what I'm using

Javascript:

var selected_tab = 1;
$(function () {
    var tabs = $("#tabs").tabs({
        select: function (e, i) {
            selected_tab = i.index;
        }
    });
    selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
    tabs.tabs('select', selected_tab);
    $("form").submit(function () {
        $("[id$=selected_tab]").val(selected_tab);
    });
});

ASPX:

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
    Content 1
</div>
<div id="tabs-2">
    Content 2
</div>
<div id="tabs-3">
    Content 3
</div>

cs:

protected void Page_Load(object sender, EventArgs e)
{
    selected_tab.Value = Request.Form[selected_tab.UniqueID];
}

Every time the page refreshes the selected tab returns to tab 1. Please help me thanks in advance.

Answer 1

Try below, write below script at the end of page,

<script type="text/javascript">
    // below will execute after ajax postback
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    function EndRequestHandler(sender, args) {
        MyScript();
    }

    function MyScript() {
        var selected_tab = 1;
        var tabs = $("#tabs").tabs({
            select: function (e, i) {
                selected_tab = i.index;
            }
        });
        selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
        tabs.tabs('select', selected_tab);
        $("form").submit(function () {
            $("[id$=selected_tab]").val(selected_tab);
        });
    }
</script>