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

mukesh1
 
on Jul 07, 2018 04:12 AM
Sample_515557.zip
5218 Views

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>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 09, 2018 04:52 AM
on Jul 09, 2018 05:27 AM

Hi mukesh1,

Refer the below example.

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
            localStorage.setItem('activeTab', $(e.target).attr('href'));
        });
        var activeTab = localStorage.getItem('activeTab');
        if (activeTab) {
            $('a[href="' + activeTab + '"]').tab('show');
        }
    });
</script>
<div class="tab-container">
    <ul class="nav nav-tabs">
        <li><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 class="active"><a href="#under" data-toggle="tab">Under Interview proces</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in" id="interview">
            data of interview come here
        </div>
        <div class="tab-pane fade in" id="selection">
            data of Selected come here
        </div>
        <div class="tab-pane fade in" id="rejection">
            data of rejected come here
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CssClass="table table-bordered">
                <Columns>
                    <asp:BoundField DataField="Id" HeaderText="Id"></asp:BoundField>
                    <asp:BoundField DataField="Name" HeaderText="Name"></asp:BoundField>
                    <asp:BoundField DataField="Country" HeaderText="Country"></asp:BoundField>
                    <asp:TemplateField HeaderText="Action">
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkUpdate" Text="Update" runat="server" CommandName="Update"
                                OnClick="Update" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
        <div class="tab-pane fade in" id="resume">
            data of Resume uploaded come here
        </div>
        <div class="tab-pane fade in active" id="under">
            data of Under Interview proces come here
        </div>
    </div>
</div>

Code

C#

 

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        BindGrid();
    }
}

private void BindGrid()
{
    System.Data.DataTable dt = new System.Data.DataTable();
    dt.Columns.AddRange(new System.Data.DataColumn[3] { 
                        new System.Data.DataColumn("Id", typeof(int)),
                        new System.Data.DataColumn("Name", typeof(string)),
                        new System.Data.DataColumn("Country",typeof(string)) });
    dt.Rows.Add(1, "John Hammond", "United States");
    dt.Rows.Add(2, "Mudassar Khan", "India");
    dt.Rows.Add(3, "Suzanne Mathews", "France");
    dt.Rows.Add(4, "Robert Schidner", "Russia");
    GridView1.DataSource = dt;
    GridView1.DataBind();
}
protected void Update(object sender, EventArgs e)
{
    string commandName = (sender as LinkButton).CommandName;
    if (commandName.ToUpper() == "UPDATE")
    {
        // Do your Task.
    }
    BindGrid();
}

Screenshot

mukesh1
 
on Jul 10, 2018 04:42 AM

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>