i am using tabs in bootstrap modal bootstrap tab get data from database
when i use onclick="javascript:$('#myModal').modal('show');" here () i get id from database and show content against that id but i am facing issue that first model with tabs working fine but when open second model their tabs not switching.
sample code is bellow...
<button class="btn btn-default" onclick="javascript:$('#myModal<?php echo $cid;?>').modal('show');">Click Me</button>
<div id="myModal<?php echo $cid;?>" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Messages</div>
<div role="tabpanel" class="tab-pane" id="settings">Settings</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Remove tabindex="-1" from modal. Then it will work.
In bootstrap 4.5, the css classes "nav nav-tabs" need to add for ul like this:
<ul class="nav nav-tabs">
<li>.........
</ul>
Related
I need to get the id of the active tab-pane every time that I change from tab to tab in my page and, depending on which tab-pane it is(tab-pane1,tab-pane2,tab-pane3), store(tab-pane1 = 1 and so on) in a variable and display it in the console.
Using vanilla JS or jQuery, both are fine.
my code looks like this
<ul class="nav nav-tabs nav-success" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-pane1" role="tab" aria-selected="true">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane2" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane3" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-icon">
</div>
<div class="tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content py-3">
<div class="tab-pane fade active show" id="tab-pane1" role="tabpanel">
<!-- content tab-pane1 -->
</div>
<div class="tab-pane fade" id="tab-pane2" role="tabpanel">
<!-- content tab-pane2 -->
</div>
<div class="tab-pane fade" id="tab-pane3" role="tabpanel">
<!-- content tab-pane3 -->
</div>
My jQuery looks like this.
console.log($(".tab-pane.active").attr("id"));
You can use class shown.bs.tab to get active tab number. Get active tab href attribute and slice to get desire result.
Example:
console.log($("a.active").attr("href").slice(-1)); // Get value when page load if needed
$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
var result = $(e.target).attr("href").slice(-1); // get activ tab number
console.log(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs nav-success" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-pane1" role="tab" aria-selected="true">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane2" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane3" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-icon">
</div>
<div class="tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content py-3">
<div class="tab-pane fade active show" id="tab-pane1" role="tabpanel">
<!-- content tab-pane1 -->
</div>
<div class="tab-pane fade" id="tab-pane2" role="tabpanel">
<!-- content tab-pane2 -->
</div>
<div class="tab-pane fade" id="tab-pane3" role="tabpanel">
<!-- content tab-pane3 -->
</div>
Note: there is not attribute id on anchor tag so why I catch href attribute and slice.
I am writing a javascript code to automate simple actions on my organization's admin console page (code is going to work in the dev tools console so I can only use pure javascript).
Actions are simple, I click on "details" (number 1 on image) and then click on "statistics" (number 3 on image).
The problem is that sectors 2 and 3 (see the image please) do not exist before I click sector 1.
After I click sector 1 with the javascript click() command sectors 2,3 are created but I can not find them with javascript.
I tried getting them with id and with class, but none of them works.
I have tried searching for answers but I only get answers for the situation where people can find dynamically created elements but can not use functions on it, my case is different, I can not find them at all.
This are the elements that are dynamically created:
<tr id="__BVID__54__details_0_" role="row" class="b-table-details">
<td colspan="16" role="cell">
<div class="tabs promotions-menu-tabs row" id="__BVID__350">
<!---->
<div class="col-auto">
<ul role="tablist" class="nav nav-pills flex-column" id="__BVID__350__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="7" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__351___BV_tab_button__">Properties</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="7" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__354___BV_tab_button__">Prizes</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="7" aria-posinset="3" target="_self" href="#" class="nav-link" id="__BVID__356___BV_tab_button__">Stats</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="7" aria-posinset="4" target="_self" href="#" class="nav-link" id="__BVID__358___BV_tab_button__">Balance</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="7" aria-posinset="5" target="_self" href="#" class="nav-link" id="__BVID__360___BV_tab_button__">Balance journal</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="7" aria-posinset="6" target="_self" href="#" class="nav-link" id="__BVID__362___BV_tab_button__">Journal</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="7" aria-posinset="7" target="_self" href="#" class="nav-link" id="__BVID__364___BV_tab_button__">Statistics</a></li>
</ul>
</div>
<div class="tab-content col" id="__BVID__350__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active" tabindex="-1" id="__BVID__351" aria-labelledby="__BVID__351___BV_tab_button__" style="">
<div data-v-75a75998="" class="promotions-properties">
<div data-v-75a75998="">
<div class="prompt_content mb-4 break-all">
<!---->
<div class="mb-4">
<h4>Leaderboard properties</h4>
<div class="mb-1"><b>Places in list:</b> range to 1000000
</div>
<div class="mb-1"><b>Points limits:</b> values 1
</div>
<div class="mb-1"><b>Amount factor:</b> values >0:20
</div>
</div>
<div class="mb-4">
<h4>Customer filters</h4>
<div class="mb-1"><b>Segment:</b> test promotions segment
</div>
<div class="mb-1"><b>Customer verification status:</b> ACCEPTED
</div>
</div>
</div>
<!---->
</div>
</div>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__354" aria-labelledby="__BVID__354___BV_tab_button__" style="display: none;"></div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__356" aria-labelledby="__BVID__356___BV_tab_button__" style="display: none;"></div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__358" aria-labelledby="__BVID__358___BV_tab_button__" style="display: none;"></div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__360" aria-labelledby="__BVID__360___BV_tab_button__" style="display: none;"></div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__362" aria-labelledby="__BVID__362___BV_tab_button__" style="display: none;"></div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__364" aria-labelledby="__BVID__364___BV_tab_button__" style="display: none;"></div>
<!---->
</div>
</div>
</td>
</tr>
Any help is appreciated.
This is my javascript code:
let promoIdsToCheck = [230];
let promoTable = document.getElementsByClassName("table b-table table-sm border b-table-stacked-md")[0];
let promoTableBody = promoTable.tBodies[0];
let promoTableBodyRows = promoTableBody.rows;
console.log(promoTableBodyRows.length)
for(let i = 1; i < promoTableBodyRows.length; i++){
if(promoIdsToCheck.includes(parseInt(promoTableBodyRows[i].firstChild.textContent))){
let detailsDiv = promoTableBodyRows[i].lastChild;
let detailsButton = detailsDiv.children[0].children[0].children[0];
detailsButton.click();
let smt = document.getElementsByClassName("col-auto")[0]; // this is undefined
console.log(smt);
}
}
I am using Vue with bootstrap for my project:
<template>
<section>
<div v-if="isLoading">
<base-spinner></base-spinner>
</div>
<div v-else>
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
</section>
</template>
The output of the code above is as below:
The tab-content is showing below the navigation bar. How can I fix it so that the tab-content shows on the right side of the navigation bar?
Okay fixed it. Firstly, would need to wrap them in container class and create two divs with col-sm class.
Secondly, place all the <a> tags with nav-link class into the first col-sm div.
Thirdly, place all the tab contents into the second col-sm div.
Sample code as below. Thanks!
<template>
<section>
<div v-if="isLoading">
<base-spinner></base-spinner>
</div>
<div v-else style="background-color:pink;">
<div class="container">
<div class="row">
<div class="col-sm">
<div
class="nav flex-column nav-pills"
id="v-pills-tab"
role="tablist"
aria-orientation="vertical"
>
<a
class="nav-link active"
id="v-pills-home-tab"
data-toggle="pill"
href="#v-pills-home"
role="tab"
aria-controls="v-pills-home"
aria-selected="true"
>Home</a
>
<a
class="nav-link"
id="v-pills-profile-tab"
data-toggle="pill"
href="#v-pills-profile"
role="tab"
aria-controls="v-pills-profile"
aria-selected="false"
>Profile</a
>
<a
class="nav-link"
id="v-pills-messages-tab"
data-toggle="pill"
href="#v-pills-messages"
role="tab"
aria-controls="v-pills-messages"
aria-selected="false"
>Messages</a
>
<a
class="nav-link"
id="v-pills-settings-tab"
data-toggle="pill"
href="#v-pills-settings"
role="tab"
aria-controls="v-pills-settings"
aria-selected="false"
>Settings</a
>
</div>
</div>
<div class="col-sm">
<div class="tab-content" id="v-pills-tabContent">
<div
class="tab-pane fade show active"
id="v-pills-home"
role="tabpanel"
aria-labelledby="v-pills-home-tab"
>
...
</div>
<div
class="tab-pane fade"
id="v-pills-profile"
role="tabpanel"
aria-labelledby="v-pills-profile-tab"
>
...
</div>
<div
class="tab-pane fade"
id="v-pills-messages"
role="tabpanel"
aria-labelledby="v-pills-messages-tab"
>
...
</div>
<div
class="tab-pane fade"
id="v-pills-settings"
role="tabpanel"
aria-labelledby="v-pills-settings-tab"
>
...
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
I have a problem with nav-tab and tab-pane.
I have successfully implemented nav-tab but tab pane is not working correctly.
when I click on a second nav-tab then the respective content does not appear. Well, I am new to bootstrap learning good ways to style the content. Please answer I am stuck there and not finding any solution.
Here is the code:
<div class="row row-content">
<div class="col-12">
<h2>Corporate Leadership</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#peter" role="tab" data-toggle="tab">Peter Pan, CEO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#danny" role="tab" data-toggle="tab">Dhanasekaran Witherspoon, CFO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#agumbe" role="tab" data-toggle="tab">Agumbe Tang, CTO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#alberto" role="tab" data-toggle="tab">Alberto Somayya, EC</a>
</li>
</ul>
//from here my tab pane content started
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="peter">
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the pioneering cross-cultural culinary connections.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="danny">
<h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
<p class="d-none d-sm-block">Our CFO, Danny, as he is
<em>Everything that runs, wins, and everything that stays, pays!
</em></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="agumbe">
<h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
<p class="d-none d-sm-block">Blessed with the most discerning gustatory.
<em>You click only if you survive my lick.</em></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="alberto">
<h3>Alberto Somayya <small>Executive Chef</small></h3>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with you get a winning hit! Amma Mia!</em>
</p>
</div>
</div>
</div>
</div>
You should include Bootstrap JS and Jquery to make it work. See demo below
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row row-content">
<div class="col-12">
<h2>Corporate Leadership</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#peter" role="tab" data-toggle="tab">Peter Pan, CEO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#danny" role="tab" data-toggle="tab">Dhanasekaran Witherspoon, CFO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#agumbe" role="tab" data-toggle="tab">Agumbe Tang, CTO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#alberto" role="tab" data-toggle="tab">Alberto Somayya, EC</a>
</li>
</ul>
//from here my tab pane content started
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="peter">
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the pioneering cross-cultural culinary connections.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="danny">
<h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
<p class="d-none d-sm-block">Our CFO, Danny, as he is
<em>Everything that runs, wins, and everything that stays, pays!
</em></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="agumbe">
<h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
<p class="d-none d-sm-block">Blessed with the most discerning gustatory.
<em>You click only if you survive my lick.</em></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="alberto">
<h3>Alberto Somayya <small>Executive Chef</small></h3>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with you get a winning hit! Amma Mia!</em>
</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
hi guys i want to make a vertical nav-tab with nested sub nav-tab i used a sample code from stackoverflow here is jsfiddle but i need somthing more complex i try but did not get what i want below is the scree shot what i exactly want if any one have idea on it please provide me some suggestion it should be on bootstrap 2.3
below is code
<div class="row">
<div class="span4">
<div class="side-nav-container affix-top">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a data-toggle="tab" href="#Tab2">Tab2</a>
</li>
<li><a data-toggle="tab" href="#Tab3">Tab3</a>
</li>
<li><a data-toggle="tab" href="#Tab4">Tab4</a>
</li>
<li> <a data-toggle="collapse" href="#Tab1">Tab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse" id="Tab1">
<li><a class="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse" id="Tab1">
<li><a class="supersub" data-toggle="tab" href="#Subtab1">My Super Sub</a></li>
</ul>
</li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab2">Subtab2</a>
</li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab3">Subtab3</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="span8">
<div class="tab-content">
<div class="tab-pane fade active" id="Tab2">Content 2</div>
<div class="tab-pane fade" id="Tab3">Content 3</div>
<div class="tab-pane fade" id="Tab4">Content 4</div>
<div class="tab-pane fade" id="Subtab1">Content 1a</div>
<div class="tab-pane fade" id="Subtab2">Content 1b</div>
<div class="tab-pane fade" id="Subtab3">Content 1c</div>
</div>
</div>
</div>
You can do something like this:
.nav-tabs > li li {
margin-left: 60px;
}
That'll do the trick.
http://jsfiddle.net/gqfhZ/