无法使用本地存储在活动内部加载外部页面以在刷新时返回上次活动

Question

Post bounty update:

With Bootstrap-4 tab, I want to load external page inside active tab. And, if page is refreshed it should return to last active tab.

With Bootstrap navs , I was trying to load external page inside active div. And, if page is refreshed it should return to the last active tab. So, I stored last active tab in localstorage and with that the active tab can be activated.

In the mean time, if load a eternal page take a while so i added bootstrap spinner and here is the code,

 $(document).ready(function() { $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { localStorage.setItem('activeTab', $(e.target).attr('href')); var $this = $(this), loadurl = $this.attr('href'), targ = $this.attr('data-target'); $.get(loadurl, function(data) { $(targ).html(data); }); $this.tab('show'); $("#tabsp").hide(); return false; }); var activeTab = localStorage.getItem('activeTab'); if (activeTab) { $('.nav-tabs a[href="' + activeTab + '"]').tab('show'); var $this = $(this), loadurl = $this.attr('href'), targ = $this.attr('data-target'); $.get(loadurl, function(data) { $(targ).html(data); }); $this.tab('show'); $("#tabsp").hide(); return false; } });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a href="/dashboard/proinfo.php" data-target="#home" class="nav-link active" id="contacts_tab" data-toggle="tab"> Info </a> </li> <li class="nav-item"> <a href="/dashboard/ads.php" data-target="#ads" class="nav-link" id="ads-tab" data-toggle="tab"> Ads </a> </li> <li class="nav-item"> <a href="/dashboard/favor.php" data-target="#fav" class="nav-link" id="fav-tab" data-toggle="tab"> Favorites </a> </li> <li class="nav-item"> <a href="/dashboard/sold.php" data-target="#sol" class="nav-link" id="sol-tab" data-toggle="tab"> Sold </a> </li> </ul> <div class="tab-content profile-tab" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="contacts_tab"> </div> <div class="tab-pane fade" id="ads" role="tabpanel" aria-labelledby="ads-tab"> </div> <div class="tab-pane fade" id="fav" role="tabpanel" aria-labelledby="fav-tab"> </div> <div class="tab-pane fade" id="sol" role="tabpanel" aria-labelledby="sol-tab"> </div> <div class="text-center" id="tabsp"> <div class="spinner-border text-primary" role="status"> <span class="sr-only">Loading...</span> </div> </div> </div>

I was trying to add the following,

• load eternal page inside div
• return to last active on refresh with localstorage
• and a bootstrap spinner while loading

While visiting index_file.php for the first time, I can view only the bootstrap spinner, which means IF there is no localstorage

How do I solve this problem?

Answer 1

This should solve your problems, but I can't fully test it.

 var defaultTab = 'contacts_tab'; $(document).ready(function() { $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { var tabEl = $(e.target); saveIntoLocalStorage(tabEl.attr('id')); loadPage(tabEl); }); var tabToActivate = loadFromLocalStorage(); loadPage(tabToActivate); }); function loadFromLocalStorage() { var activeTab = localStorage.getItem('activeTab'); if (activeTab) { return $("#" + activeTab); } else { saveIntoLocalStorage(defaultTab); return $("#" + defaultTab); } } function saveIntoLocalStorage(id) { localStorage.setItem('activeTab', id); } function loadPage(tabEl) { debugger; var $this = $(this), loadurl = tabEl.attr('href'), targ = tabEl.attr('data-target'); $.get(loadurl, function(data) { $(targ).html(data); }); $this.tab('show'); $("#tabsp").hide(); return false; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a href="/dashboard/proinfo.php" data-target="#home" class="nav-link active" id="contacts_tab" data-toggle="tab"> Info </a> </li> <li class="nav-item"> <a href="/dashboard/ads.php" data-target="#ads" class="nav-link" id="ads-tab" data-toggle="tab"> Ads </a> </li> <li class="nav-item"> <a href="/dashboard/favor.php" data-target="#fav" class="nav-link" id="fav-tab" data-toggle="tab"> Favorites </a> </li> <li class="nav-item"> <a href="/dashboard/sold.php" data-target="#sol" class="nav-link" id="sol-tab" data-toggle="tab"> Sold </a> </li> </ul> <div class="tab-content profile-tab" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="contacts_tab"> </div> <div class="tab-pane fade" id="ads" role="tabpanel" aria-labelledby="ads-tab"> </div> <div class="tab-pane fade" id="fav" role="tabpanel" aria-labelledby="fav-tab"> </div> <div class="tab-pane fade" id="sol" role="tabpanel" aria-labelledby="sol-tab"> </div> <div class="text-center" id="tabsp"> <div class="spinner-border text-primary" role="status"> <span class="sr-only">Loading...</span> </div> </div> </div>