Set current tab active after file upload in jquery

user_1216804 0
Viewed 219

I have 3 tabs, for which in second tab there is a file upload option. Currently what happening is after file upload completes the page refreshes and it goes to the first tab. But I want to stay in the current tab where the file was uploaded successfully.

HTML

<ul class="navTabs" role="tablist">
    <li role="presentation" class="active"><a href="#c_vendorData" rel="#c_vendorData" aria-controls="vendor data" role="tab"><i class="fa fa-info-circle" aria-hidden="true"></i>Vendor Data</a></li>
    <li role="presentation"><a href="#c_upload" rel="#c_upload" aria-controls="upload" role="tab"><i class="fa fa-download" aria-hidden="true"></i>Upload</a></li>
    <li role="presentation"><a href="#c_config" rel="#c_config" aria-controls="configuration" role="tab"><i class="fa fa-cog" aria-hidden="true"></i>Configuration</a></li>
    <span class="active-marker"></span>
</ul>

File upload HTML code

<div class="col-md-4">
            <div class="form-group">
                <asp:FileUpload ID="IPFEEBtn" class="form-control" runat="server" name="IPFEEBtn" />
            </div>
        </div>
        <div class="col-md-6 filterButton">
            <div class="form-group">


                <asp:Button ID="UploadBtn" runat="server" Text="Upload" OnClick="UploadBtn_Click" CssClass="btn button" />
                <asp:Button ID="IPFEEDownloadbtn" runat="server" Text="Download Format" OnClick="IPFEEDownloadbtn_Click" CssClass="btn button white" />

            </div>
    </div>
</div>
<!--end config-->

How to make it active in second tab after file upload?

UPDATE

 <!--upload-->
                <div id="c_upload" role="tabpanel" class="tabPane upload">
                    <div class="panelContent">
                        <div class="filter">
                            <div class="fLeft">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <asp:FileUpload ID="IPFEEBtn" class="form-control" runat="server" name="IPFEEBtn" />
                                        </div>
                                    </div>
                                    <div class="col-md-6 filterButton">
                                        <div class="form-group">


                                            <asp:Button ID="UploadBtn" runat="server" Text="Upload" OnClick="UploadBtn_Click" CssClass="btn button" />
                                            <asp:Button ID="IPFEEDownloadbtn" runat="server" Text="Download Format" OnClick="IPFEEDownloadbtn_Click" CssClass="btn button white" />

                                        </div>
                                </div>
                            </div>
                            </div>
                            <div class="fRight"></div>
                        </div>

                        <div class="datatableGrid">
                            <div class="dt_content">
                                <div class="dt_tables">
                                    <div class="iptable table-responsive">
                                        
                                        <asp:UpdatePanel ID="upNeInvReportGridView" runat="server">
                                            <ContentTemplate>
                                                <asp:GridView ID="grdStructId" EditRowStyle-Wrap="true" AutoGenerateColumns="false" AllowPaging="true" PageSize="5" CssClass="table dataTable dtTable table-bordered nowrap pageResize" runat="server"
                                                    >
                                                    <Columns>
                                                        <%--<asp:TemplateField HeaderText="ID">
                                                        <ItemTemplate>
                                                            <asp:Label ID="IPFEEId" Text='<%# Bind("ID") %>' runat="server"></asp:Label>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>--%>
                                                        <asp:TemplateField HeaderText="SAP_ID">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEESAPID" Text='<%# Bind("SAP_ID") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="CITY">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEECITY" Text='<%# Bind("CITY") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="FINAL_SR_DATE">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEFINALSRDATE" Text='<%# Bind("FINAL_SR_DATE") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="FINAL_SO_DATE">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEFINALSODATE" Text='<%# Bind("FINAL_SO_DATE") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="INVOICE_DATE">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEINVOICEDATE" Text='<%# Bind("INVOICE_DATE") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="IP_ID">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEIPID" Text='<%# Bind("IP_ID") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="APPLICABLE_MSA">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEAPPLICABLEMSA" Text='<%# Bind("APPLICABLE_MSA") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="SITE_CATEOGRY">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEESITECATEOGRY" Text='<%# Bind("SITE_CATEOGRY") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <%--<asp:TemplateField HeaderText="ID_OD">
                                                        <ItemTemplate>
                                                            <asp:Label ID="IPFEEIDOD" Text='<%# Bind("ID_OD") %>' runat="server"></asp:Label>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>--%>
                                                        <asp:TemplateField HeaderText="ID_OD">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEIDOD" Text='<%# Bind("ID_OD") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="RFI_DATE">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEERFIDATE" Text='<%# Bind("RFI_DATE") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="BILL_START_DATE">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEBILLSTARTDATE" Text='<%# Bind("BILL_START_DATE") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="BILL_END_DATE">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEBILLENDDATE" Text='<%# Bind("BILL_END_DATE") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="NO_OF_OPCO">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEENOOFOPCO" Text='<%# Bind("NO_OF_OPCO") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="ACTUAL_RENT_AMT">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEACTUALRENTAMT" Text='<%# Bind("ACTUAL_RENT_AMT") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="TENURE">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEETENURE" Text='<%# Bind("TENURE") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="GSM_ANTENNA_EXC_SAIL">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEGSMANTENNAEXCSAIL" Text='<%# Bind("GSM_ANTENNA_EXC_SAIL") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="GSM_ANTENNA_NOTEXC_SAIL">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEGSMANTENNANOTEXCSAIL" Text='<%# Bind("GSM_ANTENNA_NOTEXC_SAIL") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="REV_TOT_CNT_GSM_ANTENNA">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEREVTOTCNTGSMANTENNA" Text='<%# Bind("REV_TOT_CNT_GSM_ANTENNA") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="MW_ANTENNA_OF_UPTO06_DIA">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEMWANTENNAOFUPTO06DIA" Text='<%# Bind("MW_ANTENNA_OF_UPTO06_DIA") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="MW_ANTENNA_OF_12DIA">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEMWANTENNAOF12DIA" Text='<%# Bind("MW_ANTENNA_OF_12DIA") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="MW_ANTENNA_OF_GREATER12_DIA">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEMWANTENNAOFGREATER12DIA" Text='<%# Bind("MW_ANTENNA_OF_GREATER12_DIA") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="HEIGHT_OF_HEIGHEST_ANTENNA">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEHEIGHTOFHEIGHESTANTENNA" Text='<%# Bind("HEIGHT_OF_HEIGHEST_ANTENNA") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="WEIGHT_OF_TOWER_TOP_BTS">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEWEIGHTOFTOWERTOPBTS" Text='<%# Bind("WEIGHT_OF_TOWER_TOP_BTS") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="WIND_SPEED">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEWINDSPEED" Text='<%# Bind("WIND_SPEED") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="POWER_RATING_OF_BTS">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEPOWERRATINGOFBTS" Text='<%# Bind("POWER_RATING_OF_BTS") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="FLOOR_SPACE_INDOOR">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEFLOORSPACEINDOOR" Text='<%# Bind("FLOOR_SPACE_INDOOR") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="FLOOR_SPACE_OUTDOOR">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEFLOORSPACEOUTDOOR" Text='<%# Bind("FLOOR_SPACE_OUTDOOR") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="EB_STATUS_VALUE">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEEBSTATUSVALUE" Text='<%# Bind("EB_STATUS_VALUE") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="NO_OF_US">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEENOOFUS" Text='<%# Bind("NO_OF_US") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="HIGHER_RENT">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEHIGHERRENT" Text='<%# Bind("HIGHER_RENT") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="RRH_COUNT">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFERRHCOUNT" Text='<%# Bind("RRH_COUNT") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="VOLUME_DISCOUNT">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEVOLUMEDISCOUNT" Text='<%# Bind("VOLUME_DISCOUNT") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="VENDOR_NAME">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEVENDORNAME" Text='<%# Bind("VENDOR_NAME") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="CIRCLE">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEECIRCLE" Text='<%# Bind("CIRCLE") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="APPLICABLE_SITE_RENT">
                                                            <ItemTemplate>
                                                                <asp:Label ID="IPFEEAPPLICABLESITERENT" Text='<%# Bind("APPLICABLE_SITE_RENT") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                        <%--<asp:TemplateField HeaderText="LAST_UPDATED_DATE">
                                                        <ItemTemplate>
                                                            <asp:Label ID="IPFEELASTUPDATEDDATE" Text='<%# Bind("LAST_UPDATED_DATE") %>' runat="server"></asp:Label>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>--%>
                                                    </Columns>

                                                    <PagerStyle HorizontalAlign="right" CssClass="GridPager" />
                                                    <EditRowStyle Wrap="True" />
                                                    <EmptyDataTemplate>
                                                        No Record Found
                                                    </EmptyDataTemplate>
                                                </asp:GridView>
                                            </ContentTemplate>

                                            <Triggers>
                                                <%--   <asp:AsyncPostBackTrigger ControlID="bSearch" EventName="Click" />--%>
                                                <asp:PostBackTrigger ControlID="bExportToExcel" />
                                                <asp:PostBackTrigger ControlID="UploadBtn" />

                                            </Triggers>
                                        </asp:UpdatePanel>
                                    </div>
                                </div>
                                <div class="dt_footer">
                                    <asp:Button ID="bExportToExcel" runat="server" Text="Export To Excel" OnClick="bExportToExcel_Click" CssClass="btn button" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end upload-->

asp.net html jquery javascript
1 Answers

Based on the provided HTML and code, you can achieve this by JavaScript. Try the below code:

<script>
        $(function () {
            var elementObject = localStorage.getItem('active');

            if (elementObject) {
                var element = JSON.parse(elementObject);
                $('.navTabs').children().removeClass("active");
                $('.navTabs').children().eq(parseInt(element.index)).addClass('active');
                window.location.hash = element.id;
            }
        });

        $(document).on('click', '.navTabs li', function () {
            debugger;
            $('.navTabs li').removeClass("active");
            $(this).addClass("active");
            var obj = { index: $(this).index(), id: $(this).children()[0].rel };
            localStorage.setItem('active', JSON.stringify(obj));
        });

 </script>

Explanation: On clicking the ul item we're saving the clicked one li element to an object with its id and on page load, we're retrieving it and setting it again to the previous/saved state.

user_61363560
Related