Retain (Maintain) active HTML tab selected on PostBack using jQuery in ASP.Net

Last Reply 2 months ago By mukesh1

Posted 2 months ago

i have 5 tabs in my webform. i perform different-different action on each tab,if i perform any action of other then first tab , then always goes to tab1, if my page load or reload always show ist tab active, but i want that if i perform any action on tab 3 , then it remains on tab 3 ,not go to tab1.

<div class="tab-container">
    <ul class="tabs">
        <li class="active"><a href="#interview" data-toggle="tab">Interview </a></li>
        <li><a href="#selection" data-toggle="tab">Selected </a></li>
        <li><a href="#rejection" data-toggle="tab">rejected </a></li>
        <li><a href="#resume" data-toggle="tab">Resume uploaded </a></li>
        <li><a href="#under" data-toggle="tab">Under Interviw proces</a> </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="Div1">
            data of interview come here
        </div>
        <div class="tab-pane fade in" id="Div2">
            data of Selected come here
        </div>
        <div class="tab-pane fade in" id="Div3">
            data of rejected come here
        </div>
    </div>

here is my gridview with linkbutton with command update,.when i click on that link then griw row updation event occure,on that time tab automatically goes tot tab first.

<script type="text/javascript">

    $(function () {
        if (location.hash) {
            $('a[href=\'' + location.hash + '\']').tab('show');
        }
        var activeTab = localStorage.getItem('activeTab');
        if (activeTab) {
            $('a[href="' + activeTab + '"]').tab('show');
        }
        else if (activeTab) {
            $('a[href="' + activeTab + '"]').tab('show');
        }

        $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
            localStorage.setItem('activeTab', $(e.target).attr('href'));
        });
        $('body').on('click', 'a[data-toggle=\'tab\']', function (e) {
            debugger;
            e.preventDefault()
            var tab_name = this.getAttribute('href')
            if (history.pushState) {
                history.pushState(null, null, tab_name)
            }
            else {
                location.hash = tab_name
            }
            localStorage.setItem('activeTab', tab_name)

            $(this).tab('show');
            //alert('"' + activeTab + '" ');
            return false;
        });
        $(window).on('popstate', function () {
            var anchor = location.hash ||
                $('a[data-toggle=\'tab\']').first().attr('href');
            $('a[href=\'' + anchor + '\']').tab('show');
        });

        $("tr").filter(function () {
            return $('td', this).length && !$('table', this).length
        }).click(function () {
            //$('a[href="' + activeTab + '"]').tab('show');
            var anchor = location.hash ||
                $('a[data-toggle=\'tab\']').first().attr('href');
            alert(anchor);
            $('a[href=\'' + anchor + '\']').tab('show');
            //return false;
        });
    });
</script>

 

<div class="tab-pane fade in" id="accepted">
    <asp:GridView ID="grdinterview" runat="server" AutoGenerateColumns="False" Width="100%"
        GridLines="None" OnRowUpdating="grdinterview_RowUpdating">
        <columns>                 
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton5" runat="server" Font-Size="Medium" Text='<%# Eval("name") %>' >LinkButton</asp:LinkButton>
                <asp:LinkButton ID="LinkButton4" runat="server" Text='<%# Eval("company") %>' Font-Size="Medium">LinkButton</asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
        </columns>
    </asp:GridView>

 

You are viewing reply posted by: mukesh1 2 months ago.
Posted 2 months ago

now i m finding last active tab with help of textbox value.

var lastactivetab = document.getElementById("<%=txtlastactivetab.ClientID%>").value;
if (lastactivetab == "") {
    var activeTab = "";
    activeTab = localStorage.getItem('activeTab');
    document.getElementById("<%=txtlastactivetab.ClientID%>").value = activeTab;
    var s = document.getElementById("<%=txtlastactivetab.ClientID%>").value;
    alert(s);
    if (activeTab) {
        $('a[href="' + activeTab + '"]').tab('show');
    }
    else if (activeTab) {
        $('a[href="' + activeTab + '"]').tab('show');
    }
}
else {
    debugger;
    activetab = "";
    activeTab = document.getElementById("<%=txtlastactivetab.ClientID%>").value;
    var d = activetab;
    alert("else" + activeTab);
    if (activeTab) {
        $('a[href="' + activeTab + '"]').tab('show');
    }
    else if (activeTab) {
        $('a[href="' + activeTab + '"]').tab('show');
    }
}

$('body').on('click', 'a[data-toggle=\'tab\']', function (e) {
    debugger;
    e.preventDefault()
    var tab_name = this.getAttribute('href')
    if (history.pushState) {
        history.pushState(null, null, tab_name)
    }
    else {
        location.hash = tab_name
    }
    localStorage.setItem('activeTab', tab_name)


    $(this).tab('show');

    document.getElementById("<%=txtlastactivetab.ClientID%>").value = tab_name;
    //alert('"' + activeTab + '" ');
    return false;
});

$(window).on('popstate', function () {
    var anchor = location.hash ||
            $('a[data-toggle=\'tab\']').first().attr('href');
    $('a[href=\'' + anchor + '\']').tab('show');
    document.getElementById("<%=txtlastactivetab.ClientID%>").value = anchor;
});

 

if (!IsPostBack)
{

}
else
{
    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openLastActiveTAb('" + txtlastactivetab.Text + "');", true);
    txtlastactivetab.Text = "";
}

 

<script type="text/javascript">
    function openLastActiveTAb(lastactivetab) {
        var LastActiveTab = lastactivetab.replace(',', '');
        $('a[href="' + LastActiveTab + '"]').tab('show');
        //alert("text " + LastActiveTab);
    }
</script>