Develop Reference

Call Javascript function on click of dynamic tab

I am new to MVC and I have not written a lot of jQuery/JavaScript. I am trying to call a JavaScript function on click of a nav-tab. The nav-tabs are added to the page dynamically. I know the "name" of the specific tab which I need to call the function when clicked, but for the life of me, I cannot figure out where or how to add it. Below is the code that dynamically adds the tabs to the page:
<ul class="nav nav-tabs nav-tabs-line" role="tablist">
#{
for (var i = 0; i < Model.Tabs.Tabs.Count(); i++)
{
var n = Model.Tabs.Tabs[i];
<li class="nav-item" style="#(n.isHidden == true ? "display:none;" : "")">
<a class="nav-link #(activeAdded == false && n.isHidden == false ? "active" : "")" data-toggle="tab" href="##n.href" role="tab" aria-selected="true" id="#n.aId" style="#(n.isHidden == true ? "display:none;" : "")">
#n.name
</a>
</li>
if (activeAdded == false && n.isHidden == false)
{
activeAdded = true;
tabstr += "$('#" + #n.href + "').addClass('active');$('#" + #n.aId + "').click();";
}
if (n.isHidden == true)
{
tabstr += "$('#" + #n.href + "').css('display','none');";
}
}
}
</ul>
I need to call the function loadRequests() when the tab named "Support" is clicked. Any assistance is greatly appreciated.

You can use event delegation on the parent <ul>.
$('ul.nav').on('click', '.nav-item:contains("Support")', function(e){
loadRequests();
//do something else
});
$('ul.nav').on('click', '.nav-item:contains("Support")', function(e) {
console.log('clicked');
//do something else
});
$('button').click(function(e) {
$('ul.nav').append(`<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="##n.href" role="tab" aria-selected="true" id="#n.aId">
${Math.random() < 0.5 ? 'something else' : 'Support'}
</a>
</li>`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs nav-tabs-line" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="##n.href" role="tab" aria-selected="true" id="#n.aId">
Support
</a>
</li>
</ul>
<button>Add Tab</button>

How can I open a bootstrap 3 tab from external link?

I want to create a link that will target a specific tab, in another page of my site.
I have tried to create link like this: www.example.com/test.html#tab2, but it always targets the first tab (I guess the tab with show class).
index.html
link for catalog
text.html
<ul class="nav nav-tabs">
<li id="homeTab" class="active"><a data-toggle="tab" href="#home" aria-expanded="true">menu 1</a></li>
<li id="menu1Tab"><a data-toggle="tab" href="#menu1">menu 2</a></li>
<li id="menu2Tab"><a data-toggle="tab" href="#menu-catalog">menu 3</a></li>
<li id="menu3Tab"><a data-toggle="tab" href="#menu3">menu 4</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
...
</div>
<div id="menu1" class="tab-pane fade">
....
</div>
<div id="menu-catalog" class="tab-pane fade">
...
</div>
<div id="menu3" class="tab-pane fade">
...
</div>
</div>
When I click the link from index.html to target and open the tab with the right ID.

If you're using the bootstrap + jquery setup, you can get this behavior pretty easily with the following:
$(() => {
const {
hash
} = document.location;
if (!hash) return false;
$(`.nav.nav-tabs [href="${hash}"]`).tab('show');
});

Try this
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});

How to select 2nd bootstrap tab on load of page?

EDIT: So i ditched the whole thing and resorted to javascript with these new codes #Udara Kasun's code worked and it was close but not what I was trying to achieve. tried these codes for a while and i think i almost got it.
<script>
function myFunction1()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(1) a').tab('show')
});
}
function myFunction2()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(2) a').tab('show')
});
}
function myFunction3()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(3) a').tab('show')
});
}
</script>
<li role="presentation" class="active" id="tabMenu1" onclick="myFunction1()">
<a href="#tabZone" data-toggle="tab" role="tab" aria-controls="tab1">
Zones
</a>
</li>
<li role="presentation" id="tabMenu2" onclick="myFunction2()">
<a href="#tabChapels" data-toggle="tab" role="tab" aria-controls="tab2">
Chapels
</a>
</li>
<li role="presentation" id="tabMenu3" onclick="myFunction3()">
<a href="#tabUnits" data-toggle="tab" role="tab" aria-controls="tab3">
Units
</a>
</li>

Did you try to do like this?
$(document).ready(function(){
$('.nav-tabs a:last').tab('show') ;
var lastselectedtab = localStorage.getItem("ActiveTab");
$('.nav-tabs a[href="'+(lastselectedtab==''?"#tabChapels":lastselectedtab)+'"]').tab('show');
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
localStorage.setItem("ActiveTab", target);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
Zones
</li>
<li role="presentation">
Chapels
</li>
</ul>
<div id="tabContent1" class="tab-content" style="font-family:Arial Unicode MS;">
<div role="tabpanel" class="tab-pane fade" id="tabZone">
Content 1
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tabChapels">
Content 2
</div>
</div>
</div>
Code pen Link
https://codepen.io/udarakasun/pen/YdyRRy

Nobody seemed to care anymore haha anyways for those of you who are wanting to achieve the same thing that I wanted to, I've created a stupid and ingenious way but it works.
<script language="javascript">
<?php
if(isset($_GET['tabName']))
{
if($_GET['tabName']=="TAB1")
{
echo "var tabNo=1;";
$_SESSION['tabNo']=1;
}
elseif($_GET['tabName']=="TAB2")
{
echo "var tabNo=2;";
$_SESSION['tabNo']=2;
}
}
?>
function loadscript()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child('+<?php echo $_SESSION['tabNo'];?>+') a').tab('show')
});
}
function myFunction1()
{
var tabName="TAB1";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
function myFunction2()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(2) a').tab('show')
});
var tabName="TAB2";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
function myFunction3()
{
var tabName="TAB3";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
and for the body, you have to declare onload="loadscript()"
After that you'll need to add bootstrap components to your page. This can be done easier through ADOBE DREAMWEAVER.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active" onClick="myFunction1()">
<a href="#home1" data-toggle="tab" role="tab" aria-controls="tab1">
Zones
</a>
</li>
<li role="presentation" onClick="myFunction2()">
<a href="#paneTwo1" data-toggle="tab" role="tab" aria-controls="tab2">
Chapels
</a>
</li>

Is there any "onchange" on navs?

I have nav-tabs like this :
<ul class="nav nav-tabs">
<li role="foo" class="active"><a data-toggle="tab" href="#navFoo">Foo</a></li>
<li role="bar"><a data-toggle="tab" href="#navBar">Bar</a></li>
</ul>
Today I use this :
$("a[data-toggle=tab]").on("click", function (e) {
var whichTab = $(this).attr("href").replace("#", ""));
//Do something
});
Is there any on ("navchange") or something that fires when active nav changes ? And any way to get the new active nav?
Thanks

Try This
$('body').on('click', 'li[class=active] a[data-toggle=tab]', function() {
// do something
});

Check if Bootstrap tab-content is scrolled to end

I have created bootstrap tab and their corresponding tab-content as per http://getbootstrap.com/javascript/#tabs
The html snippet is given below.
<ul class="nav nav-tabs nav-justified">
<li class="active" role="presentation">
<a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab">
</li>
<li>
<a href="#tab2" data-toggle="tab" aria-controls="tab2" role="tab">
</li>
</ul>
<div class="tab-content">
<ul class="list-group media-list media-list-stream tab-pane active" id="tab1" role="tabpanel">
</ul>
<ul class="list-group media-list media-list-stream tab-pane" id="tab2" role="tabpanel">
</ul>
</div>
How to check if the tab-content has been scrolled to it's bottom.
The usual solution as mentioned in https://www.sitepoint.com/jquery-check-div-scrolled/ doesn't seem to work.
$(document).ready(function(){
$(tab1).bind('scroll',chk_scroll);
});
function chk_scroll(e)
{
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
{
console.log("bottom");
}
}

I have two solution for your answer.
Check the example code here CODEPEN.
1. If you do not fix the height of tab-content div then try this code(don't include CSS):
JS:
$(window).scroll(function() {
if (isScrollBottom()) {
alert('scroll end');
}
});
function isScrollBottom() {
var documentHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
return (documentHeight == scrollPosition);
}
2. If you fix the height of tab-content, the try this code:
JS:
$("#myTabContent").scroll(function (e) {
e.preventDefault();
var elem = $(this);
if (elem.scrollTop() > 0 &&
(elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())) {
alert("At the bottom");
}
});
CSS:
.tab-content {
height:150px;/*set height here*/
overflow:auto;
}
I hope this resolves your issue.
Enjoy :)