HiI am using TAB There is 3 tabWhen i click and 2 tab and click submit button It wont say in 2 TAB it will go automatically ine 1 TAB I am using MASTER page in aspnet ltscript type34textjavascript34gt var selectedtab 1 function var tabs 34tabs34tabs select function e i selectedtab iindex selectedtab 34idcontentselectedtab34val 3434 pars

Hi mvadukulPlease refer the below code It is workingHTMLltaspContent ID34Content134 ContentPlaceHolderID34head34 runat34Server34gt ltscript src34httpscodejquerycomjquery1124js34gtltscriptgt ltscript src34httpscodejquerycomui1121jqueryuijs34gtltscriptgtltaspContentgtltaspContent ID34Content234 ContentPlaceHolderID34ContentPlaceHolder134 runat34Server34gt ltstylegt table gt thead gt tr gt th table gt tbody gt tr gt th table gt tfoot gt tr gt th table gt thead gt tr gt td table gt tbody gt tr gt td table gt tfoot gt tr gt td padding 8px lineheight 142857143 verticalalign middle ltstylegt ltlink rel34stylesheet34 href34httpmaxcdnbootstrapcdncombootstrap332cssbootstrapmincss34 gt ltscript type34textj

Maintain active / selected Tab on PostBack using jQuery in ASP.Net

mvadukul

SOLVED CLOSED ACTIVE ANSWERED
User: mvadukul
Posted: on Mar 09, 2017 04:59 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 8794

I am using TAB. There is 3 tab

When i click and 2 tab and click submit button. It won't say in 2 TAB. it will go automatically ine 1 TAB.

I am using MASTER page in asp.net.

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

               <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>
            </div>
 

 <asp:HiddenField ID="selected_tab" runat="server" />

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    selected_tab.Value = Request.Form(selected_tab.UniqueID)
End Sub

Download FREE API for Word, Excel and PDF in ASP.Net

Indresh

0 15

Reply
ANSWER
User: Indresh
Replied: on Mar 10, 2017 08:41 AM
Modified: on Mar 14, 2017 02:16 AM
Report

Hi mvadukul,

Please refer the below code. It is working.

HTML

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <style>
        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td
        {
            padding: 8px;
            line-height: 1.42857143;
            vertical-align: middle;
        }
    </style>
    <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>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <section class="col-lg-12 connectedSortable">
                        <div class="box box-info">
                            <div class="box-header">
                                <i class="fa fa-envelope"></i>
 
                                <h3 class="box-title">Manage Applications</h3>
                                <!-- tools box -->
                                <div class="pull-right box-tools">
                                </div>
                                <div>
                                </div>
                                <div style="height: 500px;">
                                    <div id="Tabs" role="tabpanel" style="padding-top: 10px;">
                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs responsive" role="tablist">
                                            <li class="active"><a href="#tabs-6" aria-controls="personal" role="tab" data-toggle="tab">New Applications<asp:Label ID="lblNewApplicant" runat="server" Text=""></asp:Label></a></li>
                                            <li><a href="#tabs-1" class="tabs" id="tabsys1" runat="server" aria-controls="shortlist" role="tab" data-toggle="tab">Shortlisted Applications<asp:Label ID="lblShortlisted" runat="server" Text=""></asp:Label></a></li>
                                            <li><a href="#tabs-2" class="tabs" aria-controls="UnSuccessful" role="tab" data-toggle="tab">Un-Successful Applications<asp:Label ID="lblunsuccessful" runat="server" Text=""></asp:Label></a></li>
                                            <li><a href="#tabs-3" class="tabs" aria-controls="Reserved" role="tab" data-toggle="tab">Reserved List<asp:Label ID="lblreservedlist" runat="server" Text=""></asp:Label></a></li>
                                        </ul>
                                        <!-- Tab panes -->
                                        <div class="tab-content responsive">
                                            <div role="tabpanel" class="tab-pane active" id="tabs-6">
                                                <div class="box-body" style="height: 400px; overflow-y: auto;">
                                             
   
    <div role="tabpanel" class="tab-pane" id="tabs-1">
        <div class="box-body" style="height: 400px; overflow-y: auto;">
         
        </div>
        <div class="row">
            <div class="col-md-12">
                <asp:Button ID="lnkEditReserved1" runat="server" Text="Add to Reserved" CssClass="btn btn-warning" />
                <asp:Button ID="lnkEditUnSuccessful1" runat="server" Text="Add to Un-Successful"
                    CssClass="btn btn-danger"></asp:Button>
                <asp:Button ID="lnkPrintShortlist" runat="server" Text="Print Multiple Applicant"
                    CssClass="btn btn-info"></asp:Button>
                <%--<asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />--%>
            </div>
        </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="tabs-2">
        <div class="box-body" style="height: 400px; overflow-y: auto;">
        <asp:GridView ID="grdUnsucessful" BorderWidth="0px" runat="server" CssClass="table table-responsive table-hover table-bordered bs-table" AutoGenerateColumns="False"  AllowSorting="True">
                                                        <Columns>
                                                            <asp:TemplateField ItemStyle-Width="40px">
 
                                                                <HeaderTemplate>
                                                                    
                                                                    <asp:CheckBox ID="chkboxSelectAll" runat="server"/>
                                                                </HeaderTemplate>
 
                                                                <ItemTemplate>
                                                                    <asp:CheckBox ID="chkEmp" runat="server"></asp:CheckBox>
                                                                </ItemTemplate>
                                                            </asp:TemplateField>
                                                            <asp:BoundField DataField="Data" HeaderText="JobId" />
                                                           
                                                            <asp:TemplateField ItemStyle-Width="200px">
                                                                <ItemTemplate>
                                                                    <asp:LinkButton ID="btnEdit"  runat="server" Text="View Applicant" CssClass="btn btn-success btn-block"> </asp:LinkButton>
                                                                </ItemTemplate>
                                                            </asp:TemplateField>
                                                            <asp:TemplateField ItemStyle-Width="200px">
                                                                <ItemTemplate>
                                                                    <asp:LinkButton ID="btnEdit1"  runat="server" Text="View PDF" CssClass="btn btn-success btn-block"> </asp:LinkButton>
                                                                </ItemTemplate>
                                                            </asp:TemplateField>
                                                        </Columns>
                                                    </asp:GridView>
        </div>
        <div class="row">
            <div class="col-md-12">
                <asp:Button ID="lnkEditShortList2" runat="server" Text="Add to Shortlisted" CssClass="btn btn-success">
                </asp:Button>
                <asp:Button ID="lnkEditReserved2" runat="server" Text="Add to Reserved" CssClass="btn btn-warning">
                </asp:Button>
                <asp:Button ID="lnkPrintUnSuccessful" runat="server" Text="Print Multiple Applicant"
                    CssClass="btn btn-info"></asp:Button>
                <asp:Button ID="lnkUnSuccessful" Visible="false" runat="server" Text="Notify Un-successful Applicants"
                    CssClass="btn btn-primary"></asp:Button>
            </div>
        </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="tabs-3">
        <div class="box-body" style="height: 400px; overflow-y: auto;">
         
        </div>
        <div class="row">
            <div class="col-md-12">
                <asp:Button ID="lnkEditShortList3" runat="server" Text="Add to Shortlisted" CssClass="btn btn-success">
                </asp:Button>
                <asp:Button ID="lnkEditReserved3" runat="server" Text="Add to Reserved" CssClass="btn btn-warning">
                </asp:Button>
                <asp:Button ID="lnkPrintReserved" runat="server" Text="Print Multiple Applicant"
                    CssClass="btn btn-info"></asp:Button>
                <asp:Button ID="lnkUnSuccessfulReserved" Visible="false" runat="server" Text="Notify Un-successful Reserve List"
                    CssClass="btn btn-primary"></asp:Button>
            </div>
        </div>
    </div>
    <div>
    </div>
    <asp:HiddenField ID="TabName" runat="server" />
    </div> </div> </div> </div> </div> </section>
    <!-- right col -->
    </div>
    <!-- /.row (main row) -->
    </section>
    <script type="text/javascript">
        $(function () {
            var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
            $('#Tabs a[href="#' + tabName + '"]').tab('show');
            $(".tabs").click(function () {
                //  debugger;
                $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
            });
        });
    </script>
</asp:Content>

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

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Maintain active / selected Tab on PostBack using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us