Topic: How activate individual tabs via JavaScript

soiware priority asked 1 week ago


If I try your code here: MDB Tabs API doc I get an null object trying to get the tab instance for the tabs except the first. So I cannot invoke che show() method.

My html code is:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Material Design for Bootstrap</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
  <!-- Google Fonts Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
  <!-- Regular MDB theme -->
  <link rel="stylesheet" href="css/mdb.min.css" />
</head>

<body data-mdb-theme="light">
  <!-- Start your project here-->
  <div class="container my-5">
    <button class="btn btn-primary mb-3" id="bTest">Test for tab object retrival</button>

    <!-- Tabs navs -->
    <ul class="nav nav-tabs mb-3" id="ex1" role="tablist">
      <li class="nav-item" role="presentation">
        <a data-mdb-tab-init class="nav-link active" id="ex1-tab-1" href="#ex1-tabs-1" role="tab"
          aria-controls="ex1-tabs-1" aria-selected="true">Tab 1</a>
      </li>
      <li class="nav-item" role="presentation">
        <a data-mdb-tab-init class="nav-link" id="ex1-tab-2" href="#ex1-tabs-2" role="tab" aria-controls="ex1-tabs-2"
          aria-selected="false">Tab 2</a>
      </li>
      <li class="nav-item" role="presentation">
        <a data-mdb-tab-init class="nav-link" id="ex1-tab-3" href="#ex1-tabs-3" role="tab" aria-controls="ex1-tabs-3"
          aria-selected="false">Tab 3</a>
      </li>
    </ul>
    <!-- Tabs navs -->

    <!-- Tabs content -->
    <div class="tab-content" id="ex1-content">
      <div class="tab-pane fade show active" id="ex1-tabs-1" role="tabpanel" aria-labelledby="ex1-tab-1">
        Tab 1 content
      </div>
      <div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
        Tab 2 content
      </div>
      <div class="tab-pane fade" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">
        Tab 3 content
      </div>
    </div>
    <!-- Tabs content -->
  </div>

  <!-- End your project here-->

  <!-- MDB -->
  <script type="text/javascript" src="js/mdb.umd.min.js"></script>
  <!-- Custom scripts -->
  <script type="text/javascript" src="js/clkLib.js"></script>
</body>

</html>

My JS script is:

function selectTabTest() {
  console.log("Begin test");
  const tabLinksContainer = document.getElementById("ex1");
  const tabLinks = tabLinksContainer.querySelectorAll("a");
  tabLinks.forEach  ((tabLink, index) => {
      console.log(tabLink.innerHTML);
      console.log("Object: "+mdb.Tab.getInstance(tabLink));
  });


}


window.onload = function() {

  document.getElementById("bTest").onclick = selectTabTest;

};

The console result is:

clkLib.js:6 Tab 1
clkLib.js:7 Object: [object Object]
clkLib.js:6 Tab 2
clkLib.js:7 Object: null
clkLib.js:6 Tab 3
clkLib.js:7 Object: null

Why cannot get tab2 and tab3 instance?


soiware priority answered 1 week ago


Ok I created a snippet for better testing, and found this solution: you need to create on-the-fly the missing object in order to programmatically select a tab on page loaded (i.e. restoring from localStorage a previous status). So the javascript is:

function selectTabTest() {
  console.log("Begin test");
  const tabLinksContainer = document.getElementById("ex1");
  const tabLinks = tabLinksContainer.querySelectorAll("a");
  tabLinks.forEach  ((tabLink, index) => {
      console.log(tabLink.innerHTML);
      var oTab=mdb.Tab.getInstance(tabLink);
      if (!oTab) {
        oTab = new mdb.Tab(tabLink);
        console.log("tab created");
      }
      console.log("Object: "+mdb.Tab.getInstance(tabLink));
      if (index==2) {
        mdb.Tab.getInstance(tabLink).show();
      }
  });


}


window.onload = function() {

  document.getElementById("bTest").onclick = selectTabTest;

};

Kamila Pieńkowska staff commented 1 week ago

Do you need additional help?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 8.0.0
  • Device: PC
  • Browser: Edge
  • OS: Windows11
  • Provided sample code: No
  • Provided link: Yes