Bootstrap Tab/List Action Toggle in buttons doesn't work

Wappler General Bugs
#1

Wappler 6 Beta 16 | Windows 11 Pro | NodeJS | Stable Channel

Hi,
This steps:
Copy this tabs example from bootstrap 5.1 website (https://getbootstrap.com/docs/5.1/components/navs-tabs/):

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Now add a simple button configuring the Action Toggle to “Tab” or “List” with Target to nav-contact:

image
image488×518 7.27 KB

<button id="btn2" class="btn btn-primary" data-bs-toggle="tab" data-bs-target="#nav-contact">Button</button>

This is the complete code:

    <button id="btn2" class="btn btn-primary" data-bs-toggle="tab" data-bs-target="#nav-contact">Button</button>
    <nav>
      <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
        <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
        <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
      </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">1...</div>
      <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">2...</div>
      <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">3..</div>
    </div>

This generate the next error:
bootstrap.bundle.min.js:6 Uncaught TypeError: Cannot read properties of null (reading 'children')
image

#2

You see this error because tabs i.e. elements using data-bs-toggle="tab" should be contained inside a nav nav-tabs.

#3

I understand.
I tought that was possible to call outside the scope of tabs to show tabs, because I want to show a tab from a modal using Clic Event, how to do that?
For example, from this new modal:
image

How to show/open the tab “#nav-contact” when clic on “Save Changes”.

#4

You can do this as explained here:

#5

Sorry, have you tested?
Because I already tested and I get almost the same error.

This is my javascript:

function showTab(tabId) {
    var tabElement = document.querySelector(tabId);
    if (tabElement) {
      var tab = new bootstrap.Tab(tabElement);
      tab.show();
    } else {
      console.error("Element with ID " + tabId + " not found.");
    }
  }

This is my Page Flow:

<script is="dmx-flow" id="flow_openTab" type="text/dmx-flow">[
  {
    wait: {delay: 150}
  },
  {
    runJS: {
      function: "showTab",
      args: ["#nav-contact"],
      outputType: "text"
    }
  }
]</script>

Of course the “Save changes” button have a Dynamic Clic Event to run the Page Flow, and this is the error:
image

#6

Create a function on your page:

    <script>
        function showTab() {
            var tabElelement = document.querySelector('#nav-contact-tab')
            var tab = new bootstrap.Tab(tabElelement)
            tab.show()
        }
    </script>

Then use the onclick static event for your button to run this function:

onclick="showTab()"
2 Likes
#7

And what is the difference in using Page Flow and direct onclick function?
I use Page Flow because using onclick static event break CSP rules thats why I use Page Flow.

#8

There is no difference, i just don’t see a point of using a flow for just calling a function, which you can call on click.

#9

Well this is the reason.

So, the error remains the same, please can you replicate and verified the error.

#10

So what exactly are you calling with your flow? Paste the code here.

I just created a flow that calls the function:

<script is="dmx-flow" id="flow1" type="text/dmx-flow">{
  runJS: {function: "showTab", outputType: "text"}
}</script>

and call it like:

<button id="btn2" class="btn btn-primary" dmx-on:click="flow1.run()">Button</button>

all is fine.

#11

Yes, your are right @Teodor, thanks, I realize that all this time Im was calling the wrong ID.

Based on this tab I was trying to calling the tab-pane id=nav-contact, and should be the nav-contact-tab from nav-link.

I realize that with your example:

Thanks,
Mind Note: I will stop sending wrong reports past midnight :wink:

1 Like