I have tabs with navigation inside the ContentPage.
How can I save the currently active tab and switch to it after refreshing the page.
That is, what parameter can I save in Querymanager and on which element should it be assigned after a reboot?
Thank you very much!
It seems like I did everything according to the example, only instead of a variable I use a parameter in the QueryManager, the tab itself is saved, but its contents are not automatically updated
<a class="nav-link" id="navTabs1_2_tab" href="#" data-bs-target="#navTabs1_2" role="tab" aria-controls="navTabs1_2" aria-selected="false" dmx-on:click="month_util_data.load({period: distr_period.value.toISODate().formatDate('MM-yyyy'), utility: select_utility.selectedValue, offset: query1.data.offset},true);query1.set('tab_select','distribution')" dmx-class:active="query1.data.tab_select=='distribution'" data-bs-toggle="tab">Distribution</a>
<div class="tab-pane fade text-center" id="navTabs1_2" role="tabpanel" aria-labelledby="navTabs1_2_tab" dmx-class:active="query1.data.tab_select=='distribution'" dmx-show="query1.data.tab_select=='distribution'">``
Запись экрана 2024-03-15 в 14.55.20
The example was created quite a while ago - using Bootstrap 4. If you’re using Bootstrap 5, you probably need to make a few changes - eg changing data-toggle to data-bs-toggle etc.
I didn’t understand where to check this, in this case I didn’t write the code manually, but simply set the conditions in the standard interface and the click event
I’m not sure if you mean the problem is resolved or not. In any case, I switched to Bootstrap 5 and accepted Wappler’s conversion suggestions - and it worked fine, apart from some minor text styling issues.
I originally had Bootstrap5 - the contents of the selected tab are not displayed yet - this is the problem
I found the reason why the tab was not displayed, but I don’t understand - this is a bug or a feature of using classes. The reason is that the standard ‘Show’ property does not set the ‘show’ class and can only be set via Class Toogle - then it works
2 Likes
I’m glad you got it working. I don’t think I used dmx-show in my example. I used dmx-class:show, which, as you mention, works.
1 Like
Hello Guys,
I am unable to refresh the active nav tab & land on the same tab. I tried following @vv-a2007 solution, however, upon refresh the first nav tab opens always.
I followed @TomD 's article for setting up the nav tab & managing them using a variable.
The variable value, tab_selected.value= about
<dmx-value id="tab_selected" dmx-bind:value="'about'"></dmx-value>
Code for Nav Links:
<div class="container mt-3">
<div class="row">
<div class="col">
<p class="float-right ">var_tab_selected: {{tab_selected.value}}</p>
<ul class="nav nav-tabs" id="navTabs1_tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" dmx-class:active="tab_selected.value == 'about'" id="navTabs1_1_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="false" dmx-on:click="tab_selected.setValue('about')">About</a>
</li>
<li class="nav-item">
<a class="nav-link" dmx-class:active="tab_selected.value == 'address'" id="navTabs1_2_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_2" role="tab" aria-controls="navTabs1_2" aria-selected="false" dmx-on:click="tab_selected.setValue('address')" dmx-class:show="tab_selected.value == 'address'">Address</a>
</li>
Code for Nav Tabs:
<div class="tab-content" id="navTabs1_content">
<div class="tab-pane fade" dmx-class:show="tab_selected.value == 'about'" dmx-class:active="tab_selected.value == 'about'" id="navTabs1_1" role="tabpanel">
<div class="tab-pane fade" dmx-class:show="tab_selected.value == 'address'" dmx-class:active="tab_selected.value == 'address'" id="navTabs1_2" role="tabpanel">
Here’s a slightly modified version of the example I gave in the thread linked to above. This version uses Bootstrap 5. If you simply copy/paste this into a new file, it should work and hopefully help you find a solution.
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
</head>
<body is="dmx-app" id="" dmx-class="">
<dmx-value id="tab_selected" dmx-bind:value="'default'"></dmx-value>
<div class="container">
<div class="row mt-5">
<div class="col">
<p class="float-end">var (tab_selected): {{tab_selected.value}}</p>
<ul class="nav nav-tabs" id="navTabs1_tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" dmx-class:active="tab_selected.value == 'home'" id="navTabs1_1_tab" href="#" role="tab" aria-controls="navTabs1_1" aria-selected="false" dmx-on:click="tab_selected.setValue('home')" data-bs-toggle="tab" data-bs-target="#navTabs1_1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" dmx-class:active="tab_selected.value == 'default'" id="navTabs1_2_tab" href="#" role="tab" aria-controls="navTabs1_2" aria-selected="false" dmx-on:click="tab_selected.setValue('default')" data-bs-toggle="tab" data-bs-target="#navTabs1_2">Default</a>
</li>
<li class="nav-item">
<a class="nav-link" dmx-class:active="tab_selected.value == 'success'" id="navTabs1_3_tab1" href="#" role="tab" aria-controls="navTabs1_3" aria-selected="false" dmx-on:click="tab_selected.setValue('success')" data-bs-toggle="tab" data-bs-target="#navTabs1_3">Success</a>
</li>
</ul>
<div class="tab-content" id="navTabs1_content">
<div class="tab-pane fade" dmx-class:show="tab_selected.value == 'home'" dmx-class:active="tab_selected.value == 'home'" id="navTabs1_1" role="tabpanel">
<p>HOME<br>Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. </p>
</div>
<div class="tab-pane fade" dmx-class:show="tab_selected.value == 'default'" dmx-class:active="tab_selected.value == 'default'" id="navTabs1_2" role="tabpanel">
<p>DEFAULT<br>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex.</p>
</div>
<div class="tab-pane fade" dmx-class:show="tab_selected.value == 'success'" dmx-class:active="tab_selected.value == 'success'" id="navTabs1_3" role="tabpanel">
<p>SUCCESS<br>Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. </p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="btn-group" role="group" aria-label="Button Group"><button id="btn1" class="btn btn-secondary" dmx-on:click="tab_selected.setValue('home')">Home</button>
<button id="btn2" class="btn btn-secondary" dmx-on:click="tab_selected.setValue('default')">Default</button>
<button id="btn3" class="btn btn-secondary" dmx-on:click="tab_selected.setValue('success')">Success</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>