locked
JavaScript-Tab Panel-keep selected tab panel on page refresh RRS feed

  • Question

  • Hi 

    i have  3 tab panel in single page of web application, i created panel using jquery java script. now i have an issue that when i click login button from a panel , panel gets disappear if the credential fails. i need to get back the current tab panel which is active . ie, reverting to  requested tab panel with class active after refresh or button post back 

    please kindly advice me on this.

    i have attached codes and images here . 

    Thanks in advance .

    used codes are follows,

     $(document).ready(function () {
                console.log("ready!");
            var currentTab = 2;
            $("#MainContent_lisdefault3").addClass('active');
            $("#tab_default_3").show();
            $("#tab_default_1").hide();
            $("#tab_default_2").hide();
            });
            function selectTab(tab) {
                currentTab = tab;
                $("#MainContent_lidefault_1").removeClass('active')
                $("#MainContent_lisdefault_2").removeClass('active')
                $("#MainContent_lisdefault3").removeClass('active')
                if (tab == 0) {
                    $("#MainContent_lidefault_1").addClass('active');
                    $("#tab_default_1").show();
                    $("#tab_default_2").hide();
                    $("#tab_default_3").hide();
                }
                else if (tab == 1) {
                    $("#MainContent_lisdefault_2").addClass('active');
                    $("#tab_default_2").show();
                    $("#tab_default_1").hide();
                    $("#tab_default_3").hide();
                }
                else if (tab == 2) {
                    $("#MainContent_lisdefault3").addClass('active');
                    $("#tab_default_3").show();
                    $("#tab_default_1").hide();
                    $("#tab_default_2").hide();
                }

            }

    Wednesday, September 18, 2019 10:05 AM

All replies

  • Can you share the code of login button? I think it needs to be handled inside the failure callback of the event that you have attached to login button. 

    K Mohit

    Wednesday, September 18, 2019 12:42 PM
  • thanks for your reply,

    in login button i have used a server side button click event its written in c# code just validating credentials and redirect to home page if it satisfy.

    Wednesday, September 18, 2019 1:21 PM
  • Hi,

    What your doing when your credentials are not valid? Are you redirecting to the same page?

    Ideally below peice of code should be called and the 3rd tab should be selected.

     $(document).ready(function () {
                console.log("ready!");
            var currentTab = 2;
            $("#MainContent_lisdefault3").addClass('active');
            $("#tab_default_3").show();
            $("#tab_default_1").hide();
            $("#tab_default_2").hide();
            });
    Can you try to debug it using developer tool and check if there are any errors in console.


    K Mohit

    Wednesday, September 18, 2019 1:54 PM
  • thanks for your kind reply ,


    Thursday, September 19, 2019 10:04 AM
  • i have solved this issue by using localstorage.

     if (localStorage.getItem("currentTab")) {
                    currentTab = localStorage.getItem("currentTab");
                }else{
                    currentTab = 2;
                    localStorage.setItem("currentTab", currentTab);
                }

    thank u for who all are tried to help my query..

    Thursday, September 19, 2019 10:05 AM