How do I refresh tab content using Bootstrap 4 / bootstrap-native-v4

Question

I want to present Tabs using Bootstrap 4 with bootstrap-native-v4 within an Angular 2 application. (I am including bootstrap-native-v4 via the angular.json file 'scripts' value "./node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js" - note I can see bootstrap-native-v4 included within the source [scripts.js file] when viewed thru the Chrome Developer Tools)

I am using localhost:4200/myfolder to run my application locally however for the code below, when I hover-over/click the tabs the URL defaults to localhost:4200/#home (instead of localhost:4200/myfolder#home), localhost:4200/#profile (instead of localhost:4200/myfolder#profile), etc.

So what happens is that the page does a post back to a none existent URL

I've tried setting the BaseURL in the head, however although this fixes the URL issue the page doesn't refresh the content when I click on the tabs. I've also tried to set the href of each anchor to myfolder#home, myfolder#profile, etc however again although this fixes the URL issue (no postback), the tab content doesn't refresh

I really want to avoid using JQuery (hence the use of bootstrap-native-v4) - most/all of the examples seem to use JQuery - I am trying to go via Data API (JS within the bootstrap-native-v4 scope is OK tho)

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist" data-tabs="tabs">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">a...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">b...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">c...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">d...</div>
</div>

I am wanting the code to not postback to the server and to simply switch between tabs showing the corresponding tab's content

Can anyone help ?

thednp thednp · Accepted Answer · 2019-01-14T11:43:48

BSN developer here. I want to say this: I'm no Angular expert, but I can tell my library goes away from traditional jQuery methods, events and plugin structure, you need to think Native JavaScript FIRST.

Supposing you're working with fully dynamic content, where content is added/changed/removed later into/from the DOM, you can try to work with it following the documentation:

init each of your newly added tabs with var myTab[N] = new Tab(element,options); (myTab[N]/myTab1 is the initialization object to work with)
interact with your object via method, EG myTab[N].show();
dispose the object via myTab[N] = null; then remove its respective tab+tabContent from the DOM
the Tab component (as well as all others in the library) does NOT handle #myTab URL navigation

Check the documentation and wiki for more info, you might find some guides to help you hopefully.

How do I refresh tab content using Bootstrap 4 / bootstrap-native-v4

1 Answers