Query regarding Bounty:
I am working with Bootstrap-4 tabs and need to load an external page within the active tab. Additionally, I want the page to return to the last active tab when refreshed.
Using Bootstrap navs, my aim was to load an external page inside the active div. I utilized localstorage to store the last active tab so that it can be reactivated.
Furthermore, to address the delay in loading external pages, I implemented a bootstrap spinner. Below is the code snippet:
$(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>To summarize, the elements I aimed to include were:
- Loading an external page within a div
- Returning to the last active tab on refresh using local storage
- Incorporating a bootstrap spinner for better user experience during loading
When initially accessing
index_file.php, only the bootstrap spinner is visible, indicating the absence oflocalstorage.
Seeking guidance on how to resolve this issue?