jquery event firing twice on single click - javascript

I am working with a web application where I am re-ordering HTML table rows and am seeing when an item with a class is clicked. The event is firing twice but I do not see how.
I would be grateful if anyone would be able to let me know how I can stop this behavior as this will be creating an AJAX call and passing the array back to the code behind but I only need and want it to fire once.
$('table').on('click', ".up,.down,.top,.bottom", function() {
console.log("up or down arrow clicked");
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
if (row[0].rowIndex > 1) {
row.insertBefore(row.prev());
}
} else if ($(this).is(".down")) {
row.insertAfter(row.next());
} else if ($(this).is(".top")) {
row.insertBefore($("table tr:first"));
row.insertAfter(row.next());
} else {
row.insertAfter($("table tr:last"));
}
//... more code here
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<table>
<tr id="sectionRow_1010_M_TR" style="border: 1px solid black;">
<td style="padding: 0px; width: 15px;">
<input class="collapse" id="btnMinus0_1010" style="padding: 0px; width: 15px; height: 20px; text-align: center; vertical-align: top; display: none;" onclick="collapse('0_1010')" type="button" value="-">
<input class="expand" id="btnPlus0_1010" style="padding: 0px; width: 15px; height: 20px; text-align: center; vertical-align: top;" onclick="expand('0_1010')" type="button" value="+">
</td>
<td style="padding: 0px; width: 100%; text-align: left; background-color: gray;">
<span>Engine, Fuel and Cooling Systems</span>
</td>
<td>
<a class="up" href="#"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
<a class="down" href="#"><i class="fa fa-angle-down" aria-hidden="true"></i></a>
</td>
</tr>
</table>

Your symptom doesn't match your code, but the three most likely reasons for your symptom are (I lean toward #3):
You have an .up, .down, .bottom, or .top element inside an .up, .down, .bottom, or .top element. So since click propagates (and jQuery faithfully replicates that when doing event delegation), it's firing for the innermost match, and also for the outermost match.
If so, target the handler more directly at the elements in question.
or
You're running your code twice, and thus setting up two handlers, each of which is firing.
If so, er, don't do that. :-)
or
Your table is inside another table, so $("table") matches both of them, and again because click propagates (at the DOM level this time), you get a response from both tables.
If so, target just the table you want these handlers hooked up in.
Since your code doesn't replicate it, here's a simplified example of #1:
$("table").on("click", ".up, .down", function() {
console.log(this.className + " clicked");
});
<table>
<tbody>
<tr class="up">
<td class="down">Click me</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...and of #2:
$(document).ready(setup);
$(window).load(setup);
function setup() {
$("table").on("click", ".up, .down", function() {
console.log(this.className + " clicked");
});
}
<table>
<tbody>
<tr>
<td class="down">Click me</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...and of #3:
$("table").on("click", ".up, .down", function() {
console.log(this.className + " clicked");
});
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td class="down">Click me</td>
</tr>
</tbody>
</table>
</td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1) It may be happening as you are assigning the same handler to click event multiple times. I suggest, you kindly check the line where you assign the handler. I guess it is being called multiple times. A solution could be a call to unbind first then bind, like this:
$('table').unbind("click").click('.up,.down,.top,.bottom') {
//Do Stuff
});
$('table').off("click").on('click', ".up,.down,.top,.bottom", function() {
//Do Stuff
});
2) if in any case, if you find that .off() .unbind() or .stopPropagation() can't fix your issue, please use .stopImmediatePropagation(). It usually works great in these kind of situations when you just want your event to be handled without any bubbling and without effecting any other events already being handled. Something like:
$("table").click(function(event) {
event.stopImmediatePropagation();
//Do Stuff
});
which does the trick always!

Related

Whole table row clickable except the button with Javascript/jQuery

I have a simple table and I write some JS code in order to achieve that whole tr become a data-href. Everything works very nice except for one thing.
Now the whole row is clickable and that is fine, but there is a small issue, if you click on the delete button, it takes you to the update page (data-href), and I want to avoid that. So my question is how can I modify that code for the whole row to stay clickable except that delete button?
Here is my code:
$("tr").each(function() {
const $tr = $(this);
$tr.attr("data-href", $tr.find("a").attr("href"))
})
$('*[data-href]').on('click', function() {
window.location = $(this).data("href");
});
.modal {
padding:5px;
background-color:red;
color:#fff;
cursor: pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td> Age</td>
<td>
Update
<a data-toggle="modal" class="modal" data-target="#deleteModal">Delete</a>
</td>
</tr>
</table>
Can somebody try to help me with this?
To achieve this you can use the is() method to determine what element within the tr was clicked on. If it was an a element then you can prevent the window.location from being updated.
Also note that you can update the data-href of each tr using an implicit loop which makes the code slightly more succinct. Try this:
$('tr').attr('data-href', function() {
return $(this).find('a').attr('href');
});
$('*[data-href]').on('click', function(e) {
if (!$(e.target).is('a')) {
window.location.assign($(this).data("href"));
}
});
.modal {
padding: 5px;
background-color: red;
color: #fff;
cursor: pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>Age</td>
<td>
Update
<a data-toggle="modal" class="modal" data-target="#deleteModal">Delete</a>
</td>
</tr>
</table>

show/hide multiple selectors on the respective selector

I am new to Jquery, I have a requirement to show extra text only when mouse hover on the respective line
How can i change my jquery snippet without writing the same snippets 10 times for 10 different selectors
here the code:
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
jQuery(function() {
$("#demoTable1").hide();
$( "#demo1" ).mouseover(function() {
$("#demoTable1").show();
});
$( "#demo1" ).mouseout(function() {
$("#demoTable1").hide();
});
$("#demoTable2").hide();
$( "#demo2" ).mouseover(function() {
$("#demoTable2").show();
});
$( "#demo2" ).mouseout(function() {
$("#demoTable2").hide();
});
});
</script>
<style>
tr {
background: #b8d1f3;
}
td {
font-size: 12px;
color: #000;
}
</style>
</head>
<body>
<table>
<tr>
<td id='demo1'> Service : All services are running
<div id='demoTable1'> some text here 1 </div>
</td>
</tr>
<tr>
<td id='demo2'> Service : All services are running
<div id='demoTable2'> some text here 2 </div>
</td>
</tr>
</table>
</body>
</html>
You can do this using pure CSS, just make sure the element you are wanting to show is directly after the parent.
.child {
display: none;
}
.parent:hover .child {
display: inline;
}
<div class="parent">Hover over me
<div class="child">I will appear</div>
</div>
You can something like:
$("[id^='demoTable']").hide();
$("[id^='demo']").mouseover(function() {
$(this).find("div").show();
});
$("[id^='demo']").mouseout(function() {
$(this).find("div").hide();
});
tr {background: #b8d1f3;}
td {font-size: 12px;color: #000;padding: 10px;}
div {padding: 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id='demo1'> Service : All services are running
<div id='demoTable1'> some text here 1 </div>
</td>
</tr>
<tr>
<td id='demo2'> Service : All services are running
<div id='demoTable2'> some text here 2 </div>
</td>
</tr>
</table>
Parameterizing jquery should be easy. Give each td a class of 'demo' and the inner div a class of 'demoTable'. Then you can do somethingl ike this:
$( ".demo" ).mouseover(function() {
$(this).find(".demoTable").show();
});
$(".demo").mouseout(function() {
$(this).find(".demoTable").hide();
});
The technique you're looking for is called 'Don't Repeat Yourself', or DRY. The simplest way to achieve that in your case is to use class attributes to group elements with common functionality. You can then use DOM traversal within the event handlers attached to those elements to find the related content and amend it.
In this case you can use the hover() event to toggle() the child div element, something like this:
jQuery(function($) {
$(".demo").hover(function() {
$(this).find(".demo-table").toggle();
});
});
tr { background: #b8d1f3; }
td {
font-size: 12px;
color: #000;
}
.demo-table { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 1 </div>
</td>
</tr>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 2 </div>
</td>
</tr>
</table>
With that being said, JS is not the best technology to use for this. CSS is far more appropriate, using the :hover pseudo-selector:
tr { background: #b8d1f3; }
td {
font-size: 12px;
color: #000;
}
.demo-table { display: none; }
.demo:hover .demo-table { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 1 </div>
</td>
</tr>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 2 </div>
</td>
</tr>
</table>

( css ): can i trigger two of css events simultaneously by just triggering one event or the class name that two of events are included?

This is an image of description.
i want two of zones background to get yellow background. but it only works when mouse on "This is Actual zone", and it doesn't work on "section_tr_inbody zone"
In section_tr_inbody zone, yellow background only partially...working
what is problem with my code?
(CSS)
#Actual {
padding: 20px;
font-weight: bold;
}
.together:hover {
background-color: yellow;
}
(HTML)
(...)
<tr id="section_tr_intbody" class="together">
(...)
(...)
<div class="Slider slideup">
<div id="Actual" class="together">
(...)
each of two elements have same class name 'together' which i thought it should be fine that 1) css catch one of those elements then, 2) it applying effect to both of them at the same time
on Actual side, css catch <div id="Actual" class="together"> then apply effect both.
on the other hand,
on <tr id="section_tr_intbody" class="together"> side, css catch <tr id="section_tr_intbody" class="together"> but it apply effect not including Actual side.
thanks
I don't think this can be done with only CSS since you can't traverse up the DOM with CSS.
You can do this fairly easy with jquery though:
$('.together').hover(function() {
$('.together').addClass('yellow');
},
function(){
$('.together').removeClass('yellow');
});
#Actual, #fake, #random {
padding: 10px;
font-weight: bold;
}
td { padding: 10px; }
.yellow {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="section_tr_intbody" class="together">
<td>Table cell stuff</td>
</tr>
<tr id="section_tr_intbodyagain" class="nottogether">
<td>More table cell stuff</td>
</tr>
<tr id="section_tr_intbodystill" class="together">
<td>Even more table cell stuff</td>
</tr>
</table>
<div class="Slider slideup">
<div id="Actual" class="together">
Div stuff
</div>
<div id="fake" class="nottogether">
more Div Stuff
</div>
<div id="random" class="together">
Even more Div Stuff
</div>
</div>

Jquery Next() not highlighting next element correctly when using a table

I have a table with each row representing a song.
When a song is clicked, the parent td should be highlighted a light blue color with the .active class and if any song was highlighted previously the parent td's .active class should be removed.
This part works fine and is represented with this jquery:
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
I also want to have a next button and a previous button. This where I am having issues. When the next button is clicked, the next song on the list should be highlighted and the previously highlighted song should be unhighlighted (I am using the class .active to do the highlighting and unhighlighting). This part is not working:
$('#next_button').click(function(){
var current = $('td.active');
$('.songs').parents('td').removeClass('active');
current.nextAll('td:first').addClass('active');
});
Here is the jsfiddle link:
jsfiddle Link
Here is my html code:
<table id="song_table">
<thead id="song_thead">
<tr>
<th id="table_head">Songs</th>
</tr>
</thead>
<tbody id="song_tbody">
<tr>
<td class="td_songs">
<a class="songs">
1
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
2
</a>
</td>
</tr>
</tbody>
</table>
<div id="next_button">
<p id="next_text">Next Button</p>
</div>
Here is my css:
.active{
background-color: #D9FAFA;
}
table{
text-align: center;
height: 100px;
width: 200px;
}
#table_head{
text-align: center;
}
#next_button{
height: 100px;
width: 200px;
background-color: lightgreen;
}
Here is my jquery
$(document).ready(function() {
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function(){
var current = $('td.active');
$('.songs').parents('td').removeClass('active');
current.nextAll('td:first').addClass('active');
});
});
If you could help me solve this issue, I would greatly appreciate it. I feel like this should be so easy but I just can't seem to make it work.
Thanks!
The trick is to get the row index of the current song, add 1, and then do a modulo with number of rows that way if the current row+1 overflows the number of rows, it will start from the beginning:
$().ready(function() {
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function(){
//here .parent() will get the current <tr>
//.parent().index() will get the index of the current <tr>
var currentID = $('td.active').parent().index();
//here .parent() will get the <tr>
//.parent().parent() will get the <tbody>
//.parent().parent().children() will get all the rows
//.parent().parent().children().length will get the row count
var nextID=(currentID+1)%($('td.active').parent().parent().children().length)
$('.songs').parents('td').removeClass('active');
$('td').eq(nextID).addClass('active');
});
});
.active{
background-color: #D9FAFA;
}
table{
text-align: center;
height: 100px;
width: 200px;
}
#table_head{
text-align: center;
}
#next_button{
height: 100px;
width: 2d00px;
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="song_table">
<thead id="song_thead">
<tr>
<th id="table_head">Songs</th>
</tr>
</thead>
<tbody id="song_tbody">
<tr>
<td class="td_songs">
<a class="songs">
1
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
2
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
3
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
4
</a>
</td>
</tr>
</tbody>
</table>
<div id="next_button">
<p id="next_text">Next Button</p>
</div>
Something like this? http://jsfiddle.net/y5ntap04/3/
You needed to go up the DOM and then where all the siblings are, you can go to the next() one.
Plus added a previous button for you.
$().ready(function () {
$(".songs").click(function () {
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function () {
$('.songs').parents('td.active').removeClass('active').closest('tr').next().find('td').addClass('active');
});
$('#previous_button').click(function () {
$('.songs').parents('td.active').removeClass('active').closest('tr').prev().find('td').addClass('active');
});
});
in your code you have each td in its own tr meaning there is no next td to go to.
you should adjust your jquery to focus on the rows, as in this fiddle (shown below)
$().ready(function() {
$(".songs").click(function(){
$('.songs').parents('tr').removeClass('active');
$(this).parents('tr').addClass('active');
});
$('#next_button').click(function(){
var current = $('tr.active');
$('.songs').parents('tr').removeClass('active');
current.next('tr').addClass('active');
});
});
You'll also notice I'm using .next() which will just grab the next element or the next element which matches the argument (in this case tr) - no need to get all then restrict to just the first.
All this will make your fiddle behave as expected, however, if you want to target the td's within each of the tr's you'll have to add .find('td') to get the td out of the retrieved tr, like this. Here the only line that is changed is the one that adds the class on click of next, which is now: current.parent().next('tr').find('td').addClass('active');
Refactoring out $('.songs').parents('tr').removeClass('active'); into it's own function would also clear your code a bit and make it easier to follow, a good habit! (also +1 for using a variable to store a returned JQuery DOM object - var current = $('tr.active'); - another good habit for code clarity and efficiency, especially when you are deraling with more complicated DOM structures and functions)

Javascript function not able to grab height css attribute

I have the following site:
http://www.pachamber.org/www/advocacy/index.php
When a user clicks the 'General Commerce' href tag towards the bottom, it should slide out the hidden contents. All of the other tags work correctly except this one.
The function behaves unexpectedly only in IE. It looks to be fine in Chrome and FF. When debugging the function, it seems not not grab the height attribute from the div:
<div id="general" style="display: none; height: 30px; overflow: hidden">
The height attribute is showing as 1px on this line:
this.height = parseInt(this.obj.style.height);
Here is the snippit of HTML and the function call:
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td colspan="2" style="width: 100%;">
<div class="subheading2" style="border-bottom: thin solid gray; cursor: pointer; color: #000099" onClick="doSlideOut('general');"><a name="general"></a>General Commerce</div>
</td>
</tr>
</table>
<div id="general" style="display: none; height: 30px; overflow: hidden">
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="53%">
• <a href="gc/testimony/index.php" >Testimony & Comments</a>
</td>
<td width="47%"> </td>
</tr>
</table>
</div>
Any ideas what I am missing?
Thanks.
Beware of id and name attribute when using getElementById in Internet Explorer describes the stupid behaviour of IE which causes the problem of yours.
If there are two elements with the same value for id and name (in your case its the div with id general-commerce and the link General Commerce) IE will grab one of both of them when using getElementById.
The solution would be to change either the name-attribute of the link or the id of the div-container.
One thing I saw was and error in your script.
Errors like these break JS from running properly.
Check out one of my websites to see how to do this with jQuery (look at the links under "Our Curriculum").
$('.lgroup').on('click', function () {
if ($(this).hasClass('directLink')) {
return true
} else {
$('.links').slideUp();
$('.lgroup').removeClass('lactive');
if ($(this).next().css('display') == 'block') {
$(this).next().slideUp()
} else {
$(this).addClass('lactive').next().slideDown()
}
}
});

Categories