Develop Reference

How to let current bootstrap tab to remain active?

May I know how to maintain currect bootstrap tab (id="liProcessin") active after reload?
I am unable to do it via:
$('.btn-save-all').click(function () {
$("input[name*='txtid']").each(function () {
let id = $(this).attr('name');
id = id.replace('txtid', '');
let dat = $(this).val();
SaveExpectedBookDate(id, dat);
});
alert("Success");
window.location.reload();
/* $('#profile-tab').attr('class', 'active in');*/
$('#liProcess-in').addClass('active in');
});
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li role="presentation" class="active in">All My Requests
</li>
<li role="presentation" class="" id="liProcessin">In-Process
</li>
</ul>

$(document).ready(function(){
$('#liProcess-in').addClass('active in');
});
maybe you can add in your js like that

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>

jQuery adding active class to navbar doesnt work

So instead of adding an active class to the navbar using HTML I instead wanted to add it through jQuery but my code doesn't seem to work.
$('.navbar-nav li a[href="' + location.pathname + '"]').addClass('active');
<nav>
<ul class="navbar-nav">
<li class="nav-item" >
<a class="nav-link active" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Wat is het?</a>
</li>
</ul>
</nav>
Can anybody help me out?

I think what do you need is window.location.href.
Something like this:
var pathname = window.location.href;
$('.navbar-nav li a').attr('href',pathname).addClass('active');
Check this example: https://jsfiddle.net/tbx56gtL/7/

Maybe you can do it like this:
$(function() {
var currentLoc = window.location.href;
if(/PageYouWant/.test(currentLoc) {
$('.navbar-nav li a').addClass('active');
}
});

If you want to set active in anchor tag you can do one of the following options.
Asign ids to every a tag
Asign a data attrib and add a class toggleClassX
Use $(this).addClass("active")
The following are the examples of each recomendation :
1 html:
<nav>
<ul class="navbar-nav">
<li class="nav-item" >
<a class="nav-link active" id="myId1" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="myId2" href="">Wat is het?</a>
</li>
</ul>
</nav>
2 html:
<nav>
<ul class="navbar-nav">
<li class="nav-item" >
<a class="nav-link toggleClass1 active" data-tclass="1" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link toggleClass2" data-tclass="2" href="">Wat is het?</a>
</li>
</ul>
</nav>
3 html: your structure is ok for the last example
1 js:
$("element").click(function(){
$("#myId1").addClass("active")
});
2 js:
$(".nav-link").click(function(){
var tclass = $(this).data("tclass)
$(".toggleClass"+tclass).addClass("active")
});
3 js:
$(".nav-link").click(function(){
$(this).addClass("active")
});
Hope the above answer your question.

jquery click event on bootstrap 3 tabs

I have this code:
<ul>
<li class="active"><a data-toggle="tab" id="one">Tab One</a></li>
<li><a data-toggle="tab" id="two">Tab Two</a></li>
<li><a data-toggle="tab" id="three">Tab Three</a></li>
</ul>
I want to capture the any tab click event and alert the id of the tab being activated by the click. How is this done?

$('a[data-toggle=tab]').click(function(){
alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="active"><a data-toggle="tab" id="one">Tab One</a></li>
<li><a data-toggle="tab" id="two">Tab Two</a></li>
<li><a data-toggle="tab" id="three">Tab Three</a></li>
</ul>

I would use the bootstrap events API instead of adding additional click handlers
$('.yourTabsClass a').on('show.bs.tab', function(e){
alert('ID clicked = ' + e.target.id)
});
Reference: bootstrap tabs docs
DEMO

$("a[data-toggle='tab']").click(function() {
alert($(this).attr("id"))
});
Here is jsfiddle

Clear and Add new class?

I have list like:
<ul id="portfolio-filter">
<li><a class=".tab1" data-filter=".Design" dir="ltr" href="#">Design</a></li>
<li><a class=".tab2" data-filter=".Tech" dir="ltr" href="#">Technology</a></li>
</ul>
<ul id="portfolio-list">
<li style='opacity:1'>Content</li>
<li style='opacity:1'>Content</li>
<li style='opacity:1'>Content</li>
<li style='opacity:1'>Content</li>
<li style='opacity:0'>Content</li>
<li style='opacity:0'>Content</li>
<li style='opacity:0'>Content</li>
</ul>
I use Jquery to add class (MYCLASS) where li has opacity = 1 like (run on page load):
//Add class if opacity
$('#portfolio-list li').map(function() {
if($(this).css('opacity') != '0')
$(this).addClass("MYCLASS");
});
But when I use click function (It will change opacity of each in another order) like:
<ul id="portfolio-list">
<li style='opacity:0'>Content</li>
<li style='opacity:0'>Content</li>
<li style='opacity:1'>Content</li>
<li style='opacity:1'>Content</li>
<li style='opacity:1'>Content</li>
<li style='opacity:3'>Content</li>
<li style='opacity:1'>Content</li>
</ul>
And I want i re-add class onclick, I used :
$filter.find('a').click(function (e) {
//Run filter
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
//Add class
$('#portfolio-list li').map(function() {
if($(this).css('opacity') != '0') {
$(this).addClass("MYCLASS");
} else {
$(this).removeClass("MYCLASS");
}
);
}
But It doesn't run correctly.
Everyone can help me? Thank you.

i tried my hand on your code and it appears it is working for me. i used each() to loop through all li tags within #portfolio-list li and apply some css class as i understood the question.
$(function(){
$('#portfolio-list li').each(function(){
if($(this).css('opacity') == 1){
$(this).addClass("MYCLASS");
}
});
});
here is working Demo.
you were using map() which seems identical in working but there is difference, See Here.

Try to change that "map" fucntion to an each function
$('#portfolio-list li').each(function() {