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);
}
}
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 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 link that is trying to open a specific modal tab but it always shows the first tab. Here is my code
Link
<a href="{{ url('/app') }}" data-target="#modal-faq" data-toggle="modal" id="footer-b-tab">
TAB B
</a>
Modal
<div class="modal fade modal-faq pr-0" id="modal-faq" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header border-0 pt-0">
<ul class="nav nav-pills w-100 faq-nav-pills border-bottom" id="pills-tab" role="tablist">
<li class="nav-item col-6 border-right px-0 faq-nav-item">
<a class="nav-link active" id="pills-a-tab" data-toggle="pill"
href="#pills-a" role="tab" aria-controls="pills-a" aria-selected="true">
<span class="title text-type-bold text-danger">TAB A</span>
</a>
</li>
<li class="nav-item col-6 px-0 faq-nav-item">
<a class="nav-link text-center" id="pills-b-tab" data-toggle="pill" href="#pills-b" role="tab"
aria-controls="pills-b" aria-selected="false">
<span class="title text-type-bold text-danger">TAB B</span>
</a>
</li>
</ul>
</div>
JQuery
$('#footer-b-tab').on('click', function () {
$('#pills-b-tab').tab('show')})
I am trying to detect when a tab is shown through Vanilla JS and the event isn't working. I have looked through multiple questions about this and none of them seem to help. Here is my current code.
var aTabs = document.querySelectorAll('a[data-toggle="tab"');
console.log(aTabs);
for (let i = 0; i < aTabs.length; i++) {
console.log(aTabs[i].id);
aTabs[i].addEventListener('shown.bs.tab', function(e) {
console.log("Showing content for tab: " + e.target.href);
}, false);
}
<ul class="nav nav-tabs" id="tab-navigation" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="1link" data-toggle="tab" href="#1" role="tab" aria-controls="community" aria-selected="true">1 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="2link" data-toggle="tab" href="#2" role="tab" aria-controls="2" aria-selected="false">2 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="3link" data-toggle="tab" href="#3" role="tab" aria-controls="3" aria-selected="false">3 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="4link" data-toggle="tab" href="#4" role="tab" aria-controls="4" aria-selected="false">4 <span class="badge badge-primary"></span></a>
</li>
</ul>
<div class="tab-content" id="tab-navigation-content">
<div class="tab-pane fade show active" id="1" role="tabpanel" aria-labelledby="tab1"></div>
<div class="tab-pane fade" id="2" role="tabpanel" aria-labelledby="tab2"></div>
<div class="tab-pane fade" id="3" role="tabpanel" aria-labelledby="tab3"></div>
<div class="tab-pane fade" id="4" role="tabpanel" aria-labelledby="tab4"></div>
</div>
I have the console logs to make sure I am getting all the correct values and those are correct however the addEventListener isn't adding the event. When I click through tabs they do not trigger.
All the console logs show the correct elements, just the event isn't fired when switching between tabs.
According to this Stack Overflow post, you cannot use ".addEventListener" for custom jQuery events (e.g. "shown.bs.tab").
I cannot say why the jQuery ".on" version wouldn't work, though.
Your AddEventListener was wrong, as you weren't telling it what event you wanted to listen too. If you wanted to listen to the tab selection you should pass the click event handler.
Here is a JSFiddle as a sample http://jsfiddle.net/97nq823z/
var aTabs = document.querySelectorAll('a[data-toggle="tab"');
console.log(aTabs);
for (let i = 0; i < aTabs.length; i++) {
console.log(aTabs[i].id);
aTabs[i].addEventListener('click', writeToConsole(aTabs[i]));
}
function writeToConsole(tab) {
console.log(tab);
}
<ul class="nav nav-tabs" id="tab-navigation" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="1link" data-toggle="tab" href="#1" role="tab" aria-controls="community" aria-selected="true">1 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="2link" data-toggle="tab" href="#2" role="tab" aria-controls="2" aria-selected="false">2 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="3link" data-toggle="tab" href="#3" role="tab" aria-controls="3" aria-selected="false">3 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="4link" data-toggle="tab" href="#4" role="tab" aria-controls="4" aria-selected="false">4 <span class="badge badge-primary"></span></a>
</li>
</ul>
<div class="tab-content" id="tab-navigation-content">
<div class="tab-pane fade show active" id="1" role="tabpanel" aria-labelledby="tab1"></div>
<div class="tab-pane fade" id="2" role="tabpanel" aria-labelledby="tab2"></div>
<div class="tab-pane fade" id="3" role="tabpanel" aria-labelledby="tab3"></div>
<div class="tab-pane fade" id="4" role="tabpanel" aria-labelledby="tab4"></div>
</div>
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>