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