Dynamic add of tab


Topic: Dynamic add of tab

morgan497 pro premium priority asked 2 weeks ago

Expected behavior I would like to add a new tab to an existing nav-tabs clicking on a button. It would show a popup to ask for the name of the tab and then create the tab.

Actual behavior

Resources (screenshots, code snippets etc.)


MDB doesn't have such a feature. You have to go full custom, here's a snippet I prepared. You can use it as a reference:

https://mdbootstrap.com/snippets/standard/m-duszak/3345572#js-tab-view


morgan497 pro premium priority answered 6 days ago

Hi Michal,
Thanks a lot for your help.
I made more or less the same code than you but cloned a hidden tab instead of addind a raw html string as inner html and the result is quite the same.
Thank you for that part.

Then I tried to add an event listener for the 'shown' event but it doesn't work.

Here are part of code lines to add my new tab :
...
tabBarUl.insertBefore(clonedTabLi, addNode); // addNode is a button at the end of tabs
const tabTrigger = new mdb.Tab(clonedTabLi);
clonedTabA.addEventListener('shown.mdb.tab', tabChanged);

clonedTabA is inside clonedTabLi but that does not trigger the event 'shown.mdb.tab'. I also tried to reverse the last two lines but with no success.


Michał Duszak commented 4 days ago

Could you reproduce it in a snippet? I see you are creating an instance on an element of clonetTabLi, and you are trying to listen on a clonedTabA. That might be the case.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No