Call Javascript function on click of dynamic tab - javascript

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>

Related

Laravel: Click event on tab pane

I have tables called: 1) purchase_requisitions; 2) liquidations. Assuming that I have 100 data for both purchase requisitions and liquidations.
In our application, we have all the lists of users and when the client clicked a certain user, there will be a modal that will pop-up.
In this modal you can see all the records for that user and also there's 2 tab. 1) Purchase Requisition tab; 2) Liquidations tab.
Purchase Requisition is the active tab once the client clicked the certain user and this is where I'm fetching the data of purchase requisitions.
Now what I want is, I dont want to load the 100 data of purchase requisitions and liquidations at the same time.
I want to load the liquidations, for example when I clicked the liquidations tab.
Question: Why does my click event is not working?
Tab pane
<ul class="nav nav-pills">
<li class="nav-item" style="width: 10%">
<a class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
</li>
<li class="nav-item" style="width: 10%">
<a class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
</li>
Javascript
<script type="text/javascript">
function getPurchasesPayments(vendor_id,start_date,end_date){
// .... code
}
$(document).ready(function(){
var vendor_id = "<?= $vendor->id; ?>";
var start_date = "<?= $start_date;?>";
var end_date = "<?= $end_date;?>";
if ($('.purchases-payments').length > 0) {
$('div').click('.purchases-payments',function(e){
// $('.purchases-payments').click(function(e){
$('.purchases-payments-details').html('');
getPurchasesPayments(vendor_id,start_date,end_date);
e.preventDefault();
return false;
})
}
if ($('.liquidations').length > 0) {
$('div').click('.liquidations',function(e){
// $('.liquidations').click(function(e){
alert('test');
e.preventDefault();
return false;
})
}
// if ($('.liquidations').hasClass('active')) {
// alert('liquidations active');
// }
})
You're targeting "div" in your jQuery click code, but you want to target your a elements, you should also add classes or ids to this elements which you will be targeting.
Add ids to your a elements
<ul class="nav nav-pills">
<li class="nav-item" style="width: 10%">
<a id="purchases" class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
</li>
<li id="liquidations" class="nav-item" style="width: 10%">
<a class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
</li>
</ul>
and in your javascript:
$(document).ready(function(){
$('#purchases').click(function(e){
// your code
});
$('#liquidations').click(function(e){
// your code
});
})

How to active the 'nav-link disabled' using jquery?

- List item
<ul class="nav nav-tabs-outline">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#shot-Title">Title</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#shot-Description" id="disco">Description</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#shot-Details">Details</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#shot-Skills">Exprtise and Skills</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#shot-Budget">Budget</a>
</li>
</ul>
JavaScript
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#jobpostname').keyup(function () {
if ($(this).val() == '') {
//Check to see if there is any text entered
// If there is no text within the input then disable the button
$('#disco').prop('disabled', true);
} else {
//If there is text in the input, then enable the button
$('#disco').prop('disabled', false);
}
});
});
</script>
There is a input element in title tag , what i want to do is when i type something in title input the description link should get activated ,
is there a way to active the 'nav-link disabled' using jquery?
Hi Aksingh welcome to Stackoverflow's community.
In your code disabled and active are classes not attributes or properties.
So you can use jQuery's addClass and removeClass methods to solve your problem
try this code..
$(document).ready(function(){
$('#jobpostname').keyup(function () {
if ($(this).val() == '') {
//Check to see if there is any text entered
// If there is no text within the input then disable the button
$('#disco').addClass('disabled');
$('#disco').removeClass('active');
} else {
//If there is text in the input, then enable the button
$('#disco').addClass('active');
$('#disco').removeClass('disabled');
}
});
});

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.

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
});

Pagination with data-toggle manipulation html

I have something like this
<div class="container">
<h2>Pagination - site</h2>
<ul class="pagination">
<li><a data-toggle="tab" href="#tab1">1</a></li>
<li><a data-toggle="tab" href="#tab2">2</a></li>
<li><a data-toggle="tab" href="#tab3">3</a></li>
</ul>
</div>
<div id="tabcont" class="tab-content">
<div id="tab1" class="tab-pane">name1</div>
<div id="tab2" class="tab-pane">name2</div>
<div id="tab3" class="tab-pane">name3</div>
<div id="tab4" class="tab-pane">name4</div>
<div id="tab5" class="tab-pane">name5</div>
</div>
<script>
var i = null;
$('a').click(function(){
console.log(i);
console.log($(this).text());
if($(this).text() >= 3){
if(i < 3 || i === null){
$('.pagination').html('<li><a data-toggle="tab" href="#tab2">2</a></li><li><a data-toggle="tab" href="#tab3">3</a></li><li><a data-toggle="tab" href="#tab4">4</a></li><li><a data-toggle="tab" href="#tab5">5</a></li>');
}
i = $(this.text);
}else{
if(i >= 3 || i === null){
$('.pagination').html('<li><a data-toggle="tab" href="#tab1">1</a></li><li><a data-toggle="tab" href="#tab2">2</a></li><li><a data-toggle="tab" href="#tab3">3</a></li>');
}i = $(this.text); }
});
</script>
for the first time code worked fine and pagination but next time click function not work and i don't know why?
One problem with your script is the i = $(this.text); it should be i = $(this).text();. Here you are setting i to a jQuery object when you want the string.
The other problem is you are replacing elements that have event handlers bound without attaching new events.
Try changing $('a').click(handler) to $(document).on('click', 'a',handler)
http://api.jquery.com/on/#on-events-selector-data
var i = null;
$(document).on('click', 'a[data-toggle="tab"]', function() {
console.log(i);
console.log($(this).text());
if ($(this).text() >= 3) {
if (i < 3 || i === null) {
$('.pagination').html('<li><a data-toggle="tab" href="#tab2">2</a></li><li><a data-toggle="tab" href="#tab3">3</a></li><li><a data-toggle="tab" href="#tab4">4</a></li><li><a data-toggle="tab" href="#tab5">5</a></li>');
}
i = $(this).text();
} else {
if (i >= 3 || i === null) {
$('.pagination').html('<li><a data-toggle="tab" href="#tab1">1</a></li><li><a data-toggle="tab" href="#tab2">2</a></li><li><a data-toggle="tab" href="#tab3">3</a></li>');
}
i = $(this).text();
}
});
Demo:
https://jsfiddle.net/SeanWessell/eae71Lqh/

Categories

Resources