Reset tabs within modal to tab 1

Hello,

I have a modal with a tab group inside it. When a user goes to tab 3, then closes the modal, and opens it again for another record, the modal opens on tab 3.

Is it possible to force the modal to always open on tab 1?

Hi,
Unable to think of a Wappler solution for this.
Here’s a JS solution: You can write JS in the static modal close event to trigger “click” of first tab. So next time it opens, first tab is selected.

You can add the following function to your modal container <div class="modal" id="modal1" is="dmx-bs4-modal" ... :

onshown="$('#navTabs1_1_tab').tab('show')"

where the navTabs1_1_tab is the ID of the first tab <a> element:

1 Like

This is better. I have been using click :sweat_smile:
Did not know about the tab method. :+1:

1 Like

Thanks Teodor for this little snippet, useful for me too.

That’s a standard method available for Bootstrap 4 tabs:

Works perfectly. Thank you.

@Teodor any guidance here for BS5? I’ve tried using this code exactly as it’s written, and also using the Wappler UI for DMX On Shown - but it’s not selecting the first tab (the tab ID is correct).

Little bump - would appreciate any help @Teodor - if not possible with BS5 Tabs - I’ll move forward with a different approach using a variable.

Bootstrap 5 components are not using jquery anymore (as it was in Bootstrap 4). That’s why the code above won’t work, you need to use vanilla javascript.
As per BS5 docs:

Create a function on your page:

    <script>
        function showFirstTab() {
            var someListItemEl = document.querySelector('#navTabs1_1_tab')
            var tab = new bootstrap.Tab(someListItemEl)
            tab.show()
        }
    </script>

Where #navTabs1_1_tab is the ID of the first tab <a> element as explained earlier in this topic.

Then use the show static event for your modal to run this function:

onshown="showFirstTab()"
3 Likes

Ok, thank you @Teodor - getting better with JS, so i’m confident I can get the above working. Appreciate you guidance.