How can I get active tab back after Postback Event for Coallapsible tab ie Accordion with using of Update Panel ltdiv class34panelbody34gt ltlink rel34stylesheet34 href34httpmaxcdnbootstrapcdncombootstrap332cssbootstrapmincss34 gt ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery191jqueryminjs34gtltscriptgt ltscript type34textj

Keep Bootstrap Accordion Tab Active after PostBack inside Update Panel in ASP.Net

RitwikSa...

SOLVED CLOSED ACTIVE ANSWERED
User: RitwikSaha
Posted: on Nov 29, 2018 05:30 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 9147

How can I get active tab back after Postback Event for Coallapsible tab i.e. Accordion with using of Update Panel?

            <div class="panel-body">
                <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>
                <div id="accordion" class="panel-group" style="font-size: large; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">
                    <asp:ScriptManager ID="Sc1" runat="server"></asp:ScriptManager>
                    <asp:UpdatePanel ID="Up1" runat="server">
                        <ContentTemplate>
                            <div class="panel panel-red">
                                <div class="panel-heading">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="display: block; color: white; font-weight: bold; text-decoration: underline">#Sponsor Details **</a>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <div class="row" style="text-align: center">
                                            <div class="col-md-4">
                                                <asp:Label ForeColor="Black" ID="Label14" runat="server" Text="Sponsor A/c No."></asp:Label><br />
                                                <div class="input-icon">
                                                    <i class="fa fa-user-plus"></i>
                                                    <asp:TextBox ID="txtSpAcno" AutoPostBack="true" MaxLength="10" ForeColor="#BF4346" Font-Bold="true" Font-Size="Medium" runat="server" CssClass="form-control" OnTextChanged="txtSpAcno_TextChanged"></asp:TextBox>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <asp:Label ForeColor="Black" ID="Label16" runat="server" Text="Sponsor BC No."></asp:Label><br />
                                                <asp:TextBox ID="txtSPBCno" ReadOnly="true" ForeColor="#BF4346" Font-Bold="true" Font-Size="Medium" runat="server" CssClass="form-control"></asp:TextBox>
                                            </div>
                                            <div class="col-md-4">
                                                <asp:Label ForeColor="Black" ID="Label15" runat="server" Text="Sponsor Name"></asp:Label><br />
                                                <div class="input-icon">
                                                    <i class="fa fa-user"></i>
                                                    <asp:TextBox ID="txtSPName" ReadOnly="true" ForeColor="#BF4346" Font-Bold="true" Font-Size="Medium" runat="server" CssClass="form-control"></asp:TextBox>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-blue">
                                <div class="panel-heading">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" style="display: block; color: white; font-weight: bold; text-decoration: underline">#Member Details **</a>
                                </div>
                                <div id="collapseTwo" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <div class="row" style="text-align: center">
                                            
                                            <div class="col-md-4">
                                                <asp:Label ForeColor="Black" ID="Label2" runat="server" Text="Mobile No."></asp:Label><br />
                                                <div class="input-icon">
                                                    <i class="fa fa-mobile"></i>
                                                    <asp:TextBox ID="txtMobile" AutoPostBack="true" MaxLength="10" ForeColor="#2A73D4" Font-Bold="true" Font-Size="Medium" runat="server" CssClass="form-control"></asp:TextBox>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-green">
                                <div class="panel-heading">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" style="display: block; color: white; font-weight: bold; text-decoration: underline">#Account Details</a>
                                </div>
                                <div id="collapseThree" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <div class="row" style="text-align: center">
                                           
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-pink">
                                <div class="panel-heading">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" style="display: block; color: white; font-weight: bold; text-decoration: underline">#Login Details (Check Terms & Conditions) **</a>
                                </div>
                                <div id="collapseFour" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <div class="row" style="text-align: center">
                                          

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="row">
                                <div class="col-md-8">
                                    <h3 class="hs_heading">
                                        <asp:LinkButton ID="LinkError" runat="server" Text="" Font-Bold="true"></asp:LinkButton>
                                    </h3>

                                </div>
                                <div class="col-md-3" style="text-align: center">
                                    <%--<button type="button" data-target="#modal-alert" data-toggle="modal" class="btn btn-blue">View Demo</button>--%>
                                    <button id="btnSubmit" runat="server" onserverclick="btnSubmit_ServerClick" class="btn btn-success">Success &nbsp;<i class="fa fa-rocket"></i></button>
                                </div>
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                    <asp:HiddenField ID="PaneName" runat="server" />
                </div>
                <script type="text/javascript">
                    $(function () {
                        var paneName = $("[id*=PaneName]").val() != "" ? $("[id*=PaneName]").val() : "collapseOne";

                        //Remove the previous selected Pane.
                        $("#accordion .in").removeClass("in");

                        //Set the selected Pane.
                        $("#" + paneName).collapse("show");

                        //When Pane is clicked, save the ID to the Hidden Field.
                        $(".panel-heading a").click(function () {
                            $("[id*=PaneName]").val($(this).attr("href").replace("#", ""));
                        });
                    });
                </script>
            </div>

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

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Nov 29, 2018 05:39 AM
Report

RitwikSaha says:
<script type="text/javascript">

                   $(function () {

                       var paneName = $("[id*=PaneName]").val() != "" ? $("[id*=PaneName]").val() : "collapseOne";

                       //Remove the previous selected Pane.

                       $("#accordion .in").removeClass("in");

                       //Set the selected Pane.

                       $("#" + paneName).collapse("show");

                       //When Pane is clicked, save the ID to the Hidden Field.

                       $(".panel-heading a").click(function () {

                           $("[id*=PaneName]").val($(this).attr("href").replace("#", ""));

                       });

                   });

               </script>

Change the above with the below.

<script type="text/javascript">
    $(function () {
        SetTabs();
    });
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                SetTabs();
            }
        });
    };
    function SetTabs() {
        var paneName = $("[id*=PaneName]").val() != "" ? $("[id*=PaneName]").val() : "collapseOne";
        //Remove the previous selected Pane.
        $("#accordion .in").removeClass("in");
        //Set the selected Pane.
        $("#" + paneName).collapse("show");
        //When Pane is clicked, save the ID to the Hidden Field.
        $(".panel-heading a").click(function () {
            $("[id*=PaneName]").val($(this).attr("href").replace("#", ""));
        });
    }
</script>

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

Keep Bootstrap Accordion Tab Active after PostBack inside Update Panel in ASP.Net

Company

Explore

Follow us

Contact Us