Unable to load external page inside active with local storage to return to last active on refresh

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?

Does this answer your question? [Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink](https://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload-or-hyperlink) — Codebreaker007, Apr 07 '20 at 08:06
@Codebreaker007 but i implemented https://stackoverflow.com/a/50423867/3836908 for localstorange and with my above code i was stucked. — sanoj lawrence, Apr 07 '20 at 08:10
1) Your spinner is already working, as seen in code snippet. 2) I've tried your code locally (not on localhost, but as a simple html file), and it seems returning to last active tab works nicely (I checked localStorage, and there a property was present). 3) For the external page part, I get a CORS error! — vrintle, Apr 14 '20 at 15:34
Are you getting error: `Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ...`? Any getting any other error(s)? Are you using localhost, or simply running an html file? Where are those linked `.php` files? — vrintle, Apr 14 '20 at 18:25

score 0 · Accepted Answer · answered Apr 21 '20 at 09:50

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>

Unable to load external page inside active with local storage to return to last active on refresh

1 Answers1