I have this script that replaces content in a div using a menu structure.
This works fine, except it runs multiple times when clicking the various menu items. This makes the page load really slow.
Here is my structure:
$(document).ready(function() {
$('a.nav-link').click(function(e) {
var datalist = $(this).data('value');
var dataname = $(this).data('name');
console.log(datalist, dataname);
$(".content_div").hide().delay(500).fadeIn(500);
$(".content_div").load(dataname + ".php");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="nav nav-tabs" id="top-nav" role="tablist">
<li class="nav-item"><a class="nav-link active home" href="#" data-value="home" data-name="home">Aanwezig</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-value="vervoer" data-name="vervoer">Vervoer</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-value="extra" data-name="extra">Overige</a></li>
</ul>
</nav>
<div class="content_div">
</div>
And a screenshot of the console where you can see the script is multiplying...
I have no idea why this is happening. Any help would be really great...
It looks like your js code with the eventhandler is loaded more than once. You better figure out why.
Anyway, you can overcome this by using .off('click').on('click') (every time the code runs you cancel the existing eventhandler (off()) and set a new one (on()).
$('a.nav-link').off('click').on('click', function(e){ ...});
Like other already said, the script itself work fine, maybe because your script it's included more than once in your page.
$(document).ready(function() {
$('a.nav-link').on('click', function(e) {
e.preventDefault();
var datalist = $(this).data('value');
var dataname = $(this).data('name');
console.log('datalist : ', datalist);
console.log('dataname : ', dataname);
$(".content_div").hide().delay(500).fadeIn(500);
$(".content_div").load(dataname + ".php");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<nav>
<ul class="nav nav-tabs" id="top-nav" role="tablist">
<li class="nav-item"><a class="nav-link active home" href="#" data-value="home" data-name="home">Aanwezig</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-value="vervoer" data-name="vervoer">Vervoer</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-value="extra" data-name="extra">Overige</a></li>
</ul>
</nav>
<div class="content_div">
</div>
</body>
</html>
Put a log statement in your $(document).ready
$(document).ready(function() {
console.log('Ready');
$('a.nav-link').click(function(e) {});
});
To trace how many the document.ready is called.
To make sure the 'click' event on your link item to be call only once, you can change the code a little bit
$(document).ready(function() {
console.log('Ready');
$('a.nav-link').unbind('click').bind('click', function(e) {});
});
It is because of calling .click on an item means adding a new event handler on that item, not replacing.
Related
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.
I'm having problems with the id# linking on the same page when I include a jquery page fade out and fade in. When I just had the plain html it worked fine.
To Clarify: I have a section on the same and have a link in the nav area at the top that scrolls down to the lower half of the page. When the jquery code is included either as a separate js file or part of the html page that link scrolls down ( which I want to do) but it also fades out which I don't want it to do.
Hears the jquery fade code:
jQuery('body').css('display','none');
jQuery(document).ready(function() {
jQuery('body').fadeIn();
jQuery('a').on('click',function(event){
var thetarget = this.getAttribute('target')
if (thetarget != "_blank"){
var thehref = this.getAttribute('href')
event.preventDefault();
jQuery('body').fadeOut(function(){
window.location = thehref
});
}
});
});
setTimeout(function(){
jQuery('fade').fadeIn();
},1000)
Html code thats not working
<li class="nav-item">
<a class="nav-link js-scroll-trigger"
href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="about.html">About</a>
</li>
Am I targeting the wrong element. I also tried to make change to no avail.
Need help please!
Tip: Do not bind the event listener (onclick) to all <a></a> tags. Just bind it to a single one using it's specific ID or class name!
So I've edited this line:
jQuery('a').on('click', function(event)
to
jQuery('#about').on('click', function(event)
and added the ID="about" tag to your link.
jQuery('body').css('display', 'none');
jQuery(document).ready(function() {
jQuery('body').fadeIn();
jQuery('#about').on('click', function(event) {
var thetarget = this.getAttribute('target')
if (thetarget != "_blank") {
var thehref = this.getAttribute('href')
event.preventDefault();
jQuery('body').fadeOut(function() {
window.location = thehref
});
}
});
});
setTimeout(function() {
jQuery('fade').fadeIn();
}, 1000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a id="about" class="nav-link js-scroll-trigger" href="https://google.com">About</a>
</li>
If you do not want this result, an edit would help your question. Because at least you have completely confused me. Just let me know what your problem is. :)
I have this code,
<li class="centro-de-servicios col-md-3 col-xs-12 dropdown dropdown-toggle" data-toggle="dropdown">
<i class="icon-centro-de-servicios"></i>
Service Center <i class="arrow-down"></i>
<ul class="submenu dropdown-menu">
<li>Start</li>
<li>About Us</li>
<li>Our Policies</li>
<li>Maintenance</li>
<li>Quote a Visit</li>
<li>Service Tickets</li>
<!--<li></li>-->
<li>Advice</li>
<li>Contact</li>
</ul>
</li>
When i'm positioned on any element, and try to go to another page, the page is just refreshing, not changing. This happens only on Edge and IE.
I tried "window.location.href = 'url'", "location.href = 'url'", "location= 'url'", "location.replace('url')", etc, and there are not working, if a put a target blank it works, but i don't want the target blank.
You didn't close the url and put extra page="" in it.
Try it like this:
<li onclick = "location = 'http://beta.capris.cr/servicios/?page=centro-de-servicios§ion=centro-de-servicios'">Start</li>
EDIT:
Have a look at this code on your page:
jQuery(".submenu a").click(function () {
jQuery(location).attr(jQuery(this).attr("href"));
location.reload();
// setTimeout(function () {
// updatePage(currentPage, location.hash);
// }, 10);
});
HTML :
<ul id="Mydatatabs" class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#details" id="TabDetailsLink">Personal
Details</a></li>
<li><a data-toggle="tab" href="#tab1" id="Tabtab1Link">tab1</a></li>
<li><a data-toggle="tab" href="#tab2" id="Tabtab2Link">tab2</a></li>
<li><a data-toggle="tab" href="#tab3" id="Tabtab3Link">tab3</a></li>
<li><a data-toggle="tab" href="#tab4" id="Tabtab4Link">tab4</a></li>
</ul>
JS :
$("#Mydatatabs li").click(function (e) {
e.preventDefault();
alert(1);
var MyID = $("#MyID").val();
alert(2);
switch ($(this).children(":first").attr("href")) {
alert(3);
case "#tab1":
});
Here I am unable to recieve the click event . Looks like I am making some mistake. Can someone show me the right way.
Because the JS is loaded first the DOM is not ready yet so it could not find the Mydatatabs list, you should put your code inside ready function :
$(function(){
//Your code here
})
Hope this helps.
$(function(){
$("#Mydatatabs li").click(function (e) {
e.preventDefault();
alert(1);
var MyID = $("#MyID").val();
alert(2);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul id="Mydatatabs" class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#details" id="TabDetailsLink">Personal
Details</a></li>
<li><a data-toggle="tab" href="#tab1" id="Tabtab1Link">tab1</a></li>
<li><a data-toggle="tab" href="#tab2" id="Tabtab2Link">tab2</a></li>
<li><a data-toggle="tab" href="#tab3" id="Tabtab3Link">tab3</a></li>
<li><a data-toggle="tab" href="#tab4" id="Tabtab4Link">tab4</a></li>
</ul>
So, first you have to put your jquery code inside a document ready statement. See the example:
$(document).ready(function(){
//... code
});
This is to be certain that the element to which the .click() event is bound has been created when the function executes.
For further explanation, look this response: Why should $.click() be enclosed within $(document).ready()?
And is not missing any end curly braces in this click event? In between switch case and end of the function?
I would like to open another tab after certain action is true.
Here you see my bootstrap navbar and the jQuery script.
<ul class="nav navbar-default nav-justified" role="tablist" id="navbar">
<li role="presentation" class="active"><a id="tab1" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation" ><a id="tab2" href="#msg" aria-controls="msg" role="tab" data-toggle="tab">Messages</a></li>
</ul>
And here is the script.
$("#password-button").on("click", function () {
if($("#password-name").val() === password) {
$("#tab1").attr("aria-expanded", "false");
$("#tab2").attr("aria-expanded", "true");
}
}
Firebug shows me that it changes those attributes but nothing happens?
Use .tab() property to show or hide tab from Jquery. Try this:
$('.nav-tabs a[href="#tab1"]').tab('show');
Working DEMO