Dynamically switch tabs in NavTabs from dynamic success event

Wappler General Need Help
9

I used this approach because I wanted a way to set the default tab dynamically - as a user preference, not in relation to the result of a server action as in @Hyperbytes’ request. However, the same method seemed appropriate.

Here’s a very simple example. Obviously you’ll need to add your own server connect action. The default tab is set according the default value of the variable tab_selected. This is changed following the onsuccess event of the server action.

<!doctype html>
<html>

<head>
	<base href="/">
	<meta charset="UTF-8">
	<title>Untitled Document</title>
	<script src="dmxAppConnect/dmxAppConnect.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body is="dmx-app" id="" dmx-class="">
	<dmx-serverconnect id="serverconnect1" url="dmxConnect/api/tests/cars.php" dmx-on:success="tab_selected.setValue('success')" noload="noload"></dmx-serverconnect>
	<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-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" dmx-class:active="tab_selected.value == 'home'" id="navTabs1_1_tab" data-toggle="tab" href="#" data-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="false"
							dmx-on:click="tab_selected.setValue('home')">Home</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" dmx-class:active="tab_selected.value == 'default'" id="navTabs1_2_tab" data-toggle="tab" href="#" data-target="#navTabs1_2" role="tab" aria-controls="navTabs1_2" aria-selected="false"
							dmx-on:click="tab_selected.setValue('default')">Default</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" dmx-class:active="tab_selected.value == 'success'" id="navTabs1_3_tab1" data-toggle="tab" href="#" data-target="#navTabs1_3" role="tab" aria-controls="navTabs1_3" aria-selected="false"
							dmx-on:click="tab_selected.setValue('success')">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">
				<p class="mt-3 text-danger"><button id="btn1" class="btn btn-secondary" wappler-command="editContent" dmx-on:click="serverconnect1.load({})">load SC action</button></p>
			</div>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>
6 Likes