We Keep Coding

Open a bootstrap modal from a url using tab id as a parameter

I have a page with 6 bootstrap modals, each with a varying amount of tabs. I am unable to get the tab that corresponds with the tab id and url parameter to open. Link for reference. https://www.ryokuyou.co.jp/doujin/manual/printwords.html
As per the code below, I have tried writing a script to check the url parameter and see if it matches a tabs id. This does not work. I also tried opening a specified tab id, which meant the correct modal opened, but not the right tab. I have condensed the code below to minimise things. Also I did not have any luck with the bootstrap suggested $('something').tab('show'); instead I could only get $('#modal_3_tab_2_li_a').trigger('click'); to work.
HTML
<ul class="list-unstyled LTabs6">
<li><a id="modal_6_tab_1_li_a" href="#LModal6" class="tab-link" data-toggle="modal" data-target=".bs-modal-lg6"
rel="noopener noreferrer">tab1</a></li>
<li><a id="modal_6_tab_2_li_a" href="#LModal6" class="tab-link" data-toggle="modal" data-target=".bs-modal-lg6"
rel="noopener noreferrer">tab2</a></li>
</ul>
<ul class="nav nav-tabs hidden-xs">
<li class="active"><a id="m6_tab1" class="tab" href="#tab601" class="tab-link" data-toggle="tab">tab1</a></li>
<li><a id="m6_tab2" class="tab" href="#tab602" class="tab-link" data-toggle="tab">tab2</a></li>
</ul>
<div class="tab-content" id="tabs6"><!-- modal tab content 06 -->
<div class="tab-pane active" id="tab601">
<h3 class="kotoba_answer">tab1</h3>
<div class="right40">
<p>text1</p>
</div>
<div class="clearfix"></div>
<div class="center-div"><a class="btnPrev invisible" style="font-size:34px;">« </a><a class="btnNext"
style="font-size:34px;"> »</a></div>
</div>
<div class="tab-pane" id="tab602">
<h3 class="kotoba_answer">tab2</h3>
<div class="right40">
<p>text2</p>
</div>
<div class="clearfix"></div>
<div class="center-div"><a class="btnPrev" style="font-size:34px;">« </a><a class="btnNext"
style="font-size:34px;"> »</a></div>
</div>
JS
document.addEventListener("DOMContentLoaded", function() {
let tab = GetURLParameter('opentab');
if(tab){
// Get the tab element
let tabElement = document.getElementById(tab);
if(tabElement){
console.log(tab);
// $('#modal_3_tab_2_li_a').tab('show');
$('#modal_3_tab_2_li_a').trigger('click');
//$('tab').trigger('click');
}else{
console.log("no tab info");
}
}else{
console.log("no tab param");
}
});
function GetURLParameter(sParam) {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) { var sParameterName=sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1];
}
}
}
The normal function of modals and tab popups is working fine, my issue is that I need to create a url to share via email. I have had a look at other questions but they pretty much cover using a button or hard coded code to open a tab.

How to open specific Bootstrap tab by clicking on a link

I'm trying to add a Bootstrap tab panel goes like this:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">First Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Second Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Third Panel</a>
</li>
</ul><!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="tabs-1" role="tabpanel">
<p>First Panel</p>
</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">
<p>Second Panel</p>
</div>
<div class="tab-pane" id="tabs-3" role="tabpanel">
<p>Third Panel</p>
</div>
</div>
Now I need to give link to users to see the panes like this:
https://sitename.com/page#tabs-2
But this won't work because the tab-pane with an id of tabs-2 does not have the .active class.
However, if I try loading https://sitename.com/page#tabs-1 The page properly redirects me to tab-pane with an id of tabs-1 (because it has .active class by default)
So how can I redirect users to different tab panes correctly?

You don't really need to check the fragment to switch between those tabs.
1) Import jQuery from here or:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
2) Add this part to your code.
<script>
$(document).ready(function () {
$('.nav-tabs a').click(function () {
$(this).tab('show');
});
});
</script>

I already started answering your old question before you deleted it, but here is it again.
I didn't understood what you were trying to achieve, so I just looked into the code and made my version, its not the best but it works.
This is an onClick event handler, it gets executed on a click in your nav and changes the active classes.
// onClick event handler, gets executed on click
$(".nav-link").on("click", (e) => {
// store clicked element
const listItem = e.target;
// get hash
const hash = e.target.hash;
// remove all active classes
$(".nav-link, .tab-pane").removeClass("active");
// add active class to list item and tab panes
$(listItem).add(hash).addClass("active");
});
This part gets executed when you reload your page. You need to change your HTML for this to work, so remove the active class from nav-link and give every link an additional class (tabs-1, tabs-2 and tabs-3).
// when page is reloaded
$(document).ready(() => {
// get current hash
const hashList = window.location.hash;
const hashItems = hashList.slice(1);
// remove all active classes
$(".nav-link, .tab-pane").removeClass("active");
// add active class to nav-link and pane
$(hashList).add(`.${hashItems}`).addClass("active");
});
Both snippets need to be included in your script tag of course, also you need to import jQuery, if not already happened.

How to send the current form tab in a request.POST via JavaScript

I have a form, in the form I have a series of objects, for each object there is a tab. For example:
object 1: tab1
object 2: tab2
object 3: tab3
Code example:
<ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="evidence-form-1-tab" data-toggle="pill" href="#evidence-form-1" role="tab" aria-controls="evidence-form-1" aria-selected="true">1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="evidence-form-2-tab" data-toggle="pill" href="#evidence-form-2" role="tab" aria-controls="evidence-form-2" aria-selected="false">2</a>
</li>
</ul>
I would like to know the value of the selected tab at the time of submitting the form.
JavaScript part:
function validateRegister() {
event.preventDefault();
$('#evidence-formset').attr('action', "{% url 'interpretation' %}").submit();
}
Is there a way to inject the value of the current tab and then process it in the (request.POST) in the backend?

You can use $(".nav-item.active a").text() to get value of active tab and then put this value inside input tag and append it to your form so that this will also get submitted.
Demo Code :
function validateRegister() {
event.preventDefault();
console.log($(".nav-item.active a").text())
//get class which is active text() and append inside form..
$('#evidence-formset').append("<input type='text' name='obj' value='" + $(".nav-item.active a").text() + "'>")
$('#evidence-formset').attr('action', "{% url 'interpretation' %}").submit();
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
<li class="nav-item active">
<a class="nav-link active" id="evidence-form-1-tab" data-toggle="pill" href="#evidence-form-1" role="tab" aria-controls="evidence-form-1" aria-selected="true">1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="evidence-form-2-tab" data-toggle="pill" href="#evidence-form-2" role="tab" aria-controls="evidence-form-2" aria-selected="false">2</a>
</li>
</ul>
<div class="tab-content">
<div id="evidence-form-1" class="tab-pane fade in active">
<h3>HOME</h3>
</div>
<div id="evidence-form-2" class="tab-pane fade">
<h3>Menu 1</h3>
</div>
</div>
<form id="evidence-formset">
<button type="submit" onclick="validateRegister()">Click me</button>
</form>

I assume you are using Bootstrap navs. If this is correct, you should mention it first (and tag your qeustion as such).
You can add a <input type="hidden" name="activetab" id="activetab"> tag somewhere inside your <form></form>. Then add an event listener that updates the value of this hidden input whenever the user changes the tab:
$('a[data-toggle="pill"]').on('shown.bs.tab', (e) => {
$('#activetab').val(e.target.href.replace(/^#/, ''));
})
For example, if the user clicks on Tab 1, this will set the value of the input to "evidence-form-1". Then, when the user submits the form, the browser will send the value of the hidden input to the server as activetab=evidence-form-1, which can be read from Django.
Note that the input won't have a value until the user switches tabs at least once. This may become a problem if the user does not click on any tabs before submitting the form. I'll leave it to you to figure out how to handle this scenario.

Is it possible to add links to bootstrap 4 nav-pills tab-panel from a different page?

I have a service page that using bootstrap 4's pills .nav-pills navigation (this is not the main navigation navbar), which is working very well. My challenge is that i want to be able to click on a link on the home page that should open the targeted tab-panel on the service page. Haven't been able to find a way for almost a week now. How can i achieve this?
Service.html
<div class="nav flex-column nav-pills col-md-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<ul class="list-group list-unstyled">
<li class="nav-item">
<a class="nav-link list-group-item" id="v-pills-manpower-tab" data-toggle="pill" href="#v-pills-manpower" role="tab" aria-controls="v-pills-manpower" aria-selected="false">Manpower Supply</a>
</li>
</ul>
</div>
<div class="tab-content col-md-8" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-manpower" role="tabpanel" aria-labelledby="v-pills-manpower-tab">
<h5>Man Power Supply</h5>
</div>
Home.html
<a href="services.html#v-pills-manpower" data-toggle="tab" >
My code in home.html doesn't work but that's one of my many attempts.

On the home page, configure data attributes to help. I've added data-tab-name to the anchor and it defines the desired, selected tab for the service page.
When the page loads, it re-configures the onclick of the link so that the tab name can be stored in localStorage before redirecting the user to the service page.
Home.html
<a href="services.html" data-tab-name="v-pills-manpower" data-toggle="tab" >
<script type="text/javascript">
window.onload = function() {
document.querySelectorAll('[data-toggle="tab"]').forEach(function(item, index){
item.addEventListener('click', function(e){
e.preventDefault();
localStorage.selectedTabName = item.getAttribute('data-tab-name');
window.location.href = item.href;
});
});
};
</script>
When the service page loads, the javascript looks for the saved tab name in localStorage, identifies that tab and then makes it the active tab by applying the "active" class to the appropriate element.
Service.html
<script type="text/javascript">
window.onload = function() {
document.querySelectorAll('.nav-link').forEach(function(item, index){
var isActive = (item.className.indexOf('active')>-1);
if (item.id==localStorage.selectedTabName) {
if (!isActive) {
item.className += ' active';
}
item.setAttribute('aria-selected', 'true');
} else {
item.setAttribute('aria-selected', 'false');
if (isActive) {
item.className = item.className.replace('active', '');
}
}
});
};
</script>

update sidebar main-menu and sub-menu class based on url

I've asked this question here but another problem came up so I decided to keep the old one for reference purposes. Old question here.
The old question was just about updating the class of a main-menu based on the url but now things have changed. I will provide the new sidebar below.
Sidebar without any active class yet
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
It would look like this:
Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops
As you can see Scheduling has a sub-menu.
Then how it would look like if I am on the dashboard. The sidebar would look like this
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu [active]"> //without the []
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
So the Dashboard would be highlighted in this scenario
And how it would look like if Im on any of the sub-menu under Scheduling
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu [active]">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
Since I am in the Foreign Languages section. The main header Scheduling and this Foreign Langauges would be active but different class. The active class of Scheduling is sub-menu active while Foreign Languages would just have active only.
And javascript that I've tried no longer applies here since it only handles menus without any dropdown. And it didn't work anyway
Old javascript
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
}
//alert(this.href);
});
});
</script>
The goal here is to put a "active" class to the section of the sidebar based on the url the user is in. I've just include('sidebar.php') this sidebar so I would only change this file rather than put a sidebar in each php page file. But then the main heading and the dropdown menu has different active classes.
Found the solution with the help of gecco. The javascript is below:
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().closest("li").addClass('active'); //added this line to include the parent
$(this).parent().parent().closest("li").addClass('active');
}
});
});
</script>
I was already halfway with using php to do this HAHAHAHA. if current_url = db_page_url then put echo class=active. HAHAHA.

<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().parent().closest("li").addClass('active2');
}
});
});
</script>
The only change I have done here is adding another line to your JS
$(this).parent().parent().closest("li").addClass('active2');
And here is my style sheet
.active2 > a{
color:red; //what ever the styles you want
}
OR
You can do it without a style
jQuery(function($) {
var path = window.location.href;
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$( this ).parent().parent().closest("li").addClass('active2');
$('.active2 a:first').addClass('active'); //add the active class to the parent node
}
});
});