We Keep Coding

JQuery disable table row toggle when one row already toggled

I have a table or articles and a toggle on each row that displays the child row content. In the child row I also display Disqus comments. This all works fine but I do not want multiple rows opened up all at once and multiple Disqus comments loading, slowing down my page.
I want to disable all toggle buttons when one toggle is activated. Each toggle link (class option_toggle) and the row it's on has a unique ID. See below. How can I accomplish this via JQuery?
//Hide main article table's options row
$(document).ready(function() {
$(".option_toggle").click(function(e) {
e.preventDefault();
aid = $(this).attr('id');
//Determine if we are showing the comments or hiding the comments
is_hidden = $(this).parent().parent().next(".options_row").is( ":hidden" );
if(is_hidden)
{
disqus_container = '#disqus_container_' + aid;
jQuery('<div id="disqus_thread"></div>').insertBefore(disqus_container);
$.ajax({
type: 'POST',
url: 'http://www.example.com/disqus',
data: {'msmm_tn' : '12d406df3c8b2e178893e2c146d318e5', 'aid' : aid},
dataType: 'json',
success : function(data) {
if (data)
{
$('#disqus_container_' + aid).html(data.script);
DISQUS.reset({
reload: true,
config: function () {
this.page.url = 'http://www.example.com/#!'+ aid;
this.page.remote_auth_s3 = data.payload;
this.page.identifier = aid;
this.page.api_key = "cULB96iURBu1pZOtLOOSVlVgBj10SY9ctXWiv0eiQdzhdxqBq9UgmVr5SeSiaFiP";
}
});
}
}
});
}
else
{
//Remove the comments
$('#disqus_container_' + aid).prev('#disqus_thread').remove();
$('#disqus_container_' + aid).html('');
}
$(this).parent().parent().next(".options_row").toggle("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<tbody>
<tr class="main_row" data-id="ROWID428272">
<td class="bkgcol-sunflower wht-border">
<td>
<a id="428272" class="option_toggle" href="#" title="Ratings/Comments">
</td>
<td class="key-title dark unpadded">
<td class="artcl_info text-center">Scitech</td>
<td class="text-center" style="width:10px">
<td class="text-center">
</tr>
<tr class="options_row" style="display: table-row;">
<td colspan="6">
<div class="row article_options">
<div class="row comments_row">
<div id="comments" class="col-md-12">
<div class="text-center article_title top_pad" style="width: 100%;">Comment on This Article</div>
<div id="disqus_thread">
<div id="disqus_container_428272">
</div>
</div>
</td>
</tr>
<tr class="main_row" data-id="ROWID427694">

I want to disable all toggle buttons when one toggle is activated.
$(".option_toggle").click(function(e) {
e.preventDefault();
// Remove click event handler defined above, and add a new one which prevents
// the click from doing anything
$(".option_toggle").off('click').on('click', function(e) {
e.preventDefault();
});
aid = $(this).attr('id');
// Continue with rest of your code ...
});
But is this really what you want? It means once you click a toggle, you cannot click any others. It also means all other toggles still look like links, maybe you should update styling to indicate they are disabled or something like that, eg add a disabled class and style that:
Javascript:
$(".option_toggle").addClass('disabled-link');
CSS:
a.disabled-link {
cursor: default;
color: #666;
text-decoration: none;
}

Make link bold if column is visible (not hidden)

I have a filter menu which I put inside a table, and when one of the links are clicked, the according column in another separate table becomes hidden, until the link is click on again.
<!-- Table for filter menu -->
<table>
<tr>
<td>
<a class="toggle-vis" data-column="1">hideColumn1</a> |
<a class="toggle-vis" data-column="2">hideColumn2</a> |
<a class="toggle-vis" data-column="3">hideColumn3</a>
</td>
</tr>
<table>
<script>
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
column.visible( ! column.visible() );
} );=
</script>
My aim is to have some way of showing which columns are hidden/shown, so onClick, I would like the link text to become bold or change color or whatever.
Do I need to loop through my table? I have no idea - very new to HTML so any help is appreciated and the getElementById doesn't seem to be working for me.

You can use this in order to get the clicked element, and then modify its inline-styling based on that (or use a class).
Inline styling
<!-- Table for filter menu -->
<table>
<tr>
<td>
<a class="toggle-vis" data-column="1">hideColumn1</a> |
<a class="toggle-vis" data-column="2">hideColumn2</a> |
<a class="toggle-vis" data-column="3">hideColumn3</a>
</td>
</tr>
<table>
<script>
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// ADDED CODE
var element = $(this);
if (element.css('font-weight') === 'bold') {
element.css({
'font-weight': 'normal'
});
} else {
element.css({
'font-weight': 'bold'
});
}
// END OF ADDED CODE
// Get the column API object
var column = table.column( $(this).attr('data-column') );
column.visible( ! column.visible() );
} );=
</script>
Classes
With classes, this is even simpler. Add this to your style:
.bold-link {
font-weight: bold;
}
and then, just use this function:
<script>
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// ADDED CODE
var element = $(this);
element.toggleClass('bold-link');
// END OF ADDED CODE
// Get the column API object
var column = table.column( $(this).attr('data-column') );
column.visible( ! column.visible() );
} );=
</script>

You can add a class to the last clicked link (and remove previous class).
At the beginning of your file.
<style>
.selected {
font-weight: bold;
}
</style>
In the function
$('a.selected').removeClass('selected');
$(this).addClass('selected');
Also why are you calling e.preventDefault()?
Is it for when you click the link to not do anything?
Another way is to give a href="" attribute to the links and to return false at the end of the onclick function.

click event on td not working

I have an HTML table. In the td tag there is a checkbox. If I click on that checkbox then it gets checked or unchecked as usual. But what I want is that If I click anywhere on that specific td then the checkbox will also get checked or unchecked. Its because if there are a lot of rows and checkboxes there then you might find it hard to exactly put your mouse pointer over the checkbox and press a click (checkboxes are small so finding it difficult is normal). So I want it to be easy for my client, if he press a click outside the checkbox but inside the parent td tag then it will also work.
My JQuery code is working very good. Now if I click outside the checkbox then its click event is triggered. But the problem is now If I click exactly on the checkbox then it is not working. I am giving my code below. Here is also a jsfiddle link of my code.
<div class='modal-inner-content'>
<table style="border: 1px solid black;">
<tr>
<td class='check'><input type='checkbox'/></td>
</tr>
</table>
</div>
My JQuery code:
$('.modal-inner-content').on('click', 'td', function(){
var checked = $(this).find(':checkbox').is(':checked');
$(this).find(':checkbox').prop('checked', !checked);
});
UPDATE
Now the jsfiddle code will work, i forgot to include the library. Now see there, if you click outside the checkbox then its working but if you click exactly on the checkbox then its not working. any help?

Try this:
$('.modal-inner-content td').click(function (event) {
if (!$(event.target).is('input')) {
$('input:checkbox', this).prop('checked', function (i, value) {
return !value;
});
}
});

You can do it by checking the clicked element is checkbox or not like following.
$('.modal-inner-content').on('click', 'td', function (e) {
if (!$(e.target).is(':checkbox')) {
var checked = $(this).find(':checkbox').is(':checked');
$(this).find(':checkbox').prop('checked', !checked);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='modal-inner-content'>
<table style="border: 1px solid black;">
<tr>
<td class='check'>
<input type='checkbox' />
</td>
</tr>
</table>
</div>

in your jsfiddle just add Jquery resource
https://code.jquery.com/jquery-2.2.4.js

$('.modal-inner-content').on('click', 'check', function() {
var checked = $(this).find(':checkbox').is(':checked');
$(this).find(':checkbox').prop('checked', !checked);
});

Clicking disabled select element doesn't trigger click or mousedown events on it's parent

Disabled elements such as <select> and <input> doesn't react to click event , I'm trying to wrap them in a <div> and listen to it's click event.
Clicking a disabled <input> triggers the click on it's container <div>, but I am having problem with <select> elements. clicking a disabled <select> element doesn't trigger it's container <div>'s click, as you can see in this JSFiddle Example.
html:
<button onclick="buttonClick()" >Click</button>
<div id="test"></div>
js:
buttonClick = function (){
var editor = $("#test");
var div=$("<div>")
.mousedown(function () {
alert("!!!");
})
.appendTo(editor);
var selecttest = $("<select>")
.attr("disabled", "disabled")
.appendTo(div);
$("<option />").attr("value", '').appendTo(selecttest);
};
If I add an <input> using the following code instead of <select>, it works:
var textinput = $("<input>")
.attr("type", "text")
.attr("disabled", "disabled")
.appendTo(div);
Tests for different browsers:
For IE11: for both input and select it works.
For Firefox: for both input and select it doesn't work.
For Opera and Chrome: forinput it works, for select it doesn't work.

Same problem here, I put a div above the select with a transparent backgroud. i know this not the perfect solution but i works for me.
var notAvailablePopup = function (){
alert( "not available : work on select" );
}
.invisible_div {
width: 68%;
height: 33px;
background: rgba(255,0,0,0);
margin-top: -33px;
z-index:1;
position:absolute
}
.language {
z-index: 0;
}
<div onclick ="notAvailablePopup()" class="row language" >
<select disabled="disabled" class="form-control select-elem" >
<option value="">Translate this video</option> </select>
<div class="invisible_div">
</div>
</div>

The mousedown event doesn't fire on disabled input or select elements, or any mouse event on disabled elements. Here is your example and it adds both the input and select element, try clicking on them, it will not fire an alert. I have made the div with background color red so you can see where it is, so if you click only on the red part it will fire.
So your statement that the mousedown event is fired on disabled input field, but not on disabled select is false :)
var buttonClick = function() {
var editor = $("#test");
var div = $("<div>")
.mousedown(function() {
alert("!!!");
})
.appendTo(editor);
var textinput = $("<input>")
.attr("type", "text")
.attr("disabled", "disabled")
.appendTo(div);
var selecttest = $("<select>")
.attr("disabled", "disabled")
.appendTo(div);
$("<option />").attr("value", '').appendTo(selecttest);
};
select {
width: 200px;
}
button {
width: 70px;
height: 21px;
}
#test div {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<button onclick="buttonClick()">Click</button>
<div id="test"></div>

This is exaclty the expected behaviour of disabled, you probably want to disable the <options> ?

I'm a bit late at the battle,
Bojan Petkovski helped a lot but for direct answer :
http://jsfiddle.net/jea1mtz6/
Just added in your CSS on the child element "select" :
pointer-events: none;
The element is never the target of pointer events. But events may target its descendant elements.
Other answers don't work on all browsers (z-index) or "cheat" with a semi-hack (readonly).
Tested on Chrome and firefox

Disabled elements do not listen to click events, this is the behavior of disabled elements. Elements with readonly property listen to click events.
Also, your code has an error.
I corrected the error in your code. The scenario mentioned in your question will not respond to click event since select is disabled. If you change disbaled to readonly then it will work.
buttonClick = function (){
var editor = $("#test");
var div=$("<div>")
.mousedown(function () {
alert("!!!");
})
.appendTo(editor);
var selecttest = $("<select>")
.attr("readonly", "true")
.appendTo(div);
$("<option />").attr("value", '').appendTo(selecttest);
};
See this fiddle - http://jsfiddle.net/Ashish_developer/5d4qewps/1/

Change tr background color when img inside td is clicked

well i am filling a table with php with values from DB
what i was trying to but unsuccessful didnt is to change the tr background color when image is clicked
here is what i tried to do
<script>
function changeColor(tr)
{
var tableRow = document.getElementById(tr);
tableRow.style.backgroundColor='red';
}
</script>
<html>
<table>
<tr id='tr<?php echo $personID;?>'>
<td>
<?php echo $personName;?>
</td>
<td>
<?php echo $personLastName;?>
</td>
<td>
<img src= "/*an image*/" onmouseover="" style="cursor: pointer;" onclick="changeColor('tr<?php echo $personID;?>')" >
</td>
</tr>
</table>
</html>
obiously this is just for one case but when i get elements from DB this table is pretty long
any ideas?
THANKS IN ADVANCE
one more thing
my table already has an css design where
td
{
background: #EDEDED;
}
tr:hover
{
background: #d0dafd;
}
this is maybe why when doing onclick="this.parentNode.parentNode.style.background='gray'"
is not working how can i fix this?

You could simply use parentNode : DEMO
<img src="http://dummyimage.com/50x50"
onmouseover="this.parentNode.parentNode.style.background='gray'"
onmouseout="this.parentNode.parentNode.style.background=''"
/>
img->parentNode=td -> parentNode=tr

jQuery code
//code for clicks
$('td img').click(function() {
$(this).closest('table').children('tr').removeClass('highlight');
$(this).closest('tr').addClass('highlight');
});
//code for hovering
$('tr').hover(function() {
//if the tr has the highlight class do nothing, otherwise add hover style
if(!$(this).hasClass('highlight')) {
$(this).addClass('hoverStyle');
}
}, function() {
//if the tr has hover style remove it when hover ends
if($(this).hasClass('hoverStyle')) {
$(this).removeClass('hoverStyle');
}
});
Then just make a CSS class to define the highlight style.