Exclude select menu form onclick onclick event - javascript

I am using DataTables (https://datatables.net) where I have clickable rows. Here is my code for that:
$(document).ready(function() {
let city = document.getElementById("cityselect").value;
var table = $('#resdatatable').DataTable();
$('#resdatatable tbody').on('click', 'tr', function () {
var data = table.row( this ).data().id;
alert ("clicked!");
} );
} );
In those clickable rows, I have a select box that onchange calls a function. Looks like this:
<select id ="resstatus1" onchange="changeResStatus(1)" data-previousvalue="Confirmed">
The issue I am having is that in Chrome (not Safari) when the select box is clicked on, I get an alert. I need to make it so clicking the select box doesn't trigger the alert. How can I do that?
Thanks!

I did it this way and it works:
$('#resdatatable tbody').on('click', 'tr', function (e) {
if($(e.target).is('select')){
e.preventDefault();
return;
}
};
The other ways mentioned broke the the entire click function.

You can do that by checking the target element. I made up a little, generic fiddle that you can test. I believe this is what you are trying to do. Now when you click on the select element, you won't get that alert message, but if you click the tr anywhere else, you'll see the alert message.
Fiddle: https://jsfiddle.net/7136cyhp/1/
$(document).ready(function() {
// let city = document.getElementById("cityselect").value;
// var table = $('#resdatatable').DataTable();
$('table td').on('click', function (e) {
if (e.target !== this) {
return;
} else {
//var data = table.row( this ).data().id;
alert ("clicked!");
}
});
});
table {
width: 100%;
border: 1px solid;
}
tr {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select id="test">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
</td>
</tr>
</table>

A simple and clean way to achieve this is using the stopPropagation function on the event - this prevents an event bubbling up the DOM tree, so event handlers on parent elements are not notified of the event. If you apply this to clicks on the select, then it won't trigger any events attached to the parent cells or rows etc.
Demo:
$('#resdatatable tbody').on('click', 'select', function(e) {
e.stopPropagation();
});
$('#resdatatable tbody').on('click', 'tr', function(e) {
alert("hello");
});
table {
border-collapse: collapse;
}
table td {
border: 1px solid #cccccc;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="resdatatable">
<tbody>
<tr>
<td>Hello, you can click this bit</td>
<td>
<select>
<option>Clicking this won't fire the event</option>
</select>
</td>
</tr>
</tbody>
</table>

Related

How to make event listeners works when <select> is trigerred?

I wanna handle keydown event when I am choosing an option.
document.addEventListener('keydown', () => {
console.log('keydown');
});
div {
padding: 40px;
border: 2px solid red;
}
<div>
<p>keydown should works anywhere.</p>
<p>Open the select below and try to keypress, event listener is like deactivated.</p>
<select>
<option>foo</option>
<option>bar</option>
</select>
</div>
Is there a way to make it works ?
The keydown event, when the select is open, is used to select options starting with that letter.
If you want to append keydown events, you will have to make a custom element that resembles a select element with options.
Link to implementation:
https://andrejgajdos.com/custom-select-dropdown/
your keydown event is working as intended. Click on the document and then press any ASCII key - say any letter and you will see the conse.log(). To get what you might be looking for change keydown to a click event
document.addEventListener('keydown', () => {
console.log('keydown');
});
function myFunction(){
console.log('select')
}
div {
padding: 40px;
border: 2px solid red;
}
<div>
<p>keydown should works anywhere.</p>
<p>Open the select below and try to keypress, event listener is like deactivated.</p>
<select onclick='myFunction()'>
<option>foo</option>
<option>bar</option>
</select>
</div>

Make row clickable except on checkbox

I have written code so that if the table row is clicked it will act as a link and bring you to a new page, however I also want to have it so they can select rows to do things with. The problem is when they click on the checkbox to select it, it detect that the "row" was clicked and activates the link.
Here is the code I have written
<script>
$(document).ready(function() {$('table[name=$tableName]').DataTable();
$('table[name=$tableName] tbody').on( 'click', 'tr', function () {
$(location).attr('href', 'http://stackoverflow.com/');
})
});
</script>
I have checkboxes in the first column
The problem is anytime the checkbox is clicked I need it to not redirect the page. Basically if anywhere else is then it will.
Anyone know how I can modify to implement this functionality?
So check what was clicked and if it it the label/checkbox then ignore it.
$("table tbody").on("click", "tr", function (e) {
if ($(e.target).is("label,input")) {
return
} else {
console.log("clicked")
}
})
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked + label {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="checkbox" id="cb1"><label for="cb1">CB</label></td>
<td>HMMMM 1</td>
</tr>
<tr>
<td><input type="checkbox" id="cb2"><label for="cb2">CB</label></td>
<td>HMMMM 2</td>
</tr>
<table>

Jquery trigger click then fill in input

I have a table row that when clicked should trigger a click event on page that opens a div. once this div is open, i need #poId to be populated with given id.
$('tr').click(function(){
var id = $(this).attr('id');
$('#purchase\\.exist').trigger('click');
//What goes here?
});
the page that results from the click is:
<input type='text' id='poId' name='poId'>
basically i need to know what i can use to fill poId with click automatically. in layman's terms
$('tr').click(function(){
var id = $(this).attr('id');
//Open page as a result of trigger
//paste the variable id in the poId input
});
Added fiddle:
This fiddle is completely stripped down but the idea is a user clicks on the word question. a table appears with two rows. when a user click on the table row, the purchase div is opened and the input needs to be populated with the id of the tr clicked.
Fiddle
I know there are other ways to do this without trigger, but opening the div actually entails a bunch of other things (ajax functions and such) before the div is opened, so just simply opening the purchase div wont work
To populate poId with the value of the ID of the tr that was clicked on (which I think is what you're asking):
$('tr').click(function(){
$("#poId").val(this.id);
$('#purchase').trigger('click');
});
(I am assuming that "#purchase\.exist" was a typo of some sort?)
$(function() {
$('.hide').hide();
$('tr').click(function() {
var id = $(this).attr('id');
$('#poId').val(id);
// the second argument is an array of parameters that will be passed to the function
$('#purchase').trigger('click', [id]);
});
// the first argument of function `click` receives is the event, the next are the arguments passed from the trigger
$('li').click(function(e, id) {
var liID = $(this).attr('id');
var div = $('#div_' + liID)
div.show();
div.find('input').val(id)
});
});
li:hover {
cursor: pointer;
}
tr:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id='purchase'>Purchase</li>
<li id='question'>Question</li>
</ul>
<div id='div_purchase' class='hide'>
<input type='text' id='poID' name='poID'>
</div>
<div id='div_question' class='hide'>
<table id='myTable'>
<tr id='12345'>
<th>12345</th>
</tr>
<tr id='45678'>
<th>45678</th>
</tr>
</table>
</div>

can not change background-color using jQuery [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I have read almost every article about this... Just can't find the reason why this isn't working. I want to change my tr background-color using jQuery. There are no errors in web inspector or what so ever, just nothing happens...
My html code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Opravila</title>
<style>
.slika
{
width:20px;
height:20px;
}
tr
{
background-color:white;
}
tr.highlight
{
background-color:yellow;
}
</style>
</head>
<body>
<script src="script.js" type="text/javascript"></script>
<form>
Naslov opravila: <input type="text" id="naslov"></input>
Vrsta opravila: <input type="text" id="vrsta"></input>
Nujnost opravila:
<select id="nujnost">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" value="Dodaj opravilo" id="dodaj"></input>
</form>
<img src="minus.png" class="slika" id="slika"></img>
<table id="tabela">
<thead>
<tr>
<th>#</th>
<th>Opravilo</th>
<th>Vrsta</th>
<th>Nujnost</th>
<th>Datum vnosa</th>
</tr>
</thead class="vrstica">
<tbody>
</tbody>
</table>
</body>
</html>
And my jQuery code: (Note that my code for this starts almost at the end)
$(document).ready(function(){
$("#dodaj").click(function() {
var naslov=$("#naslov");
naslov=naslov.val();
var vrsta=$("#vrsta");
vrsta=vrsta.val();
var nujnost=$("#nujnost");
nujnost=nujnost.val();
var zaporedna_st=$("#tabela tbody tr").length;
var datum =new Date();
datum=datum.getDate()+"."+(datum.getMonth()+1)+"."+datum.getFullYear();
$("#tabela tbody").append("<tr><td>"+(zaporedna_st+1)+"</td><td>"+naslov+"</td><td>"+vrsta+"</td><td>"+nujnost+"</td><td>"+datum+"</td></tr>");
});
$("#tabela tbody tr").click(function() {
$(this).css("backgroundColor", "red");
});
});
You need to do like this
$("#tabela tbody").on('click', 'tr', function() {
$(this).css("backgroundColor", "red");
});
You need to do like this
$("#tabela tbody").on('click', 'tr',function() {
$(this).css("backgroundColor", "red");
});
you need to use on because the tr elements are dynamically created. Otherwise the click event will not be bind to the newly created tr elements.
First of all you can't set background to tr tag, only for td
Another point is set color like this
$('td').css({'backround-color: 'blue'})
OK sorry for my mistake.
Really background property works well for tr
Here I prepare your example with correct jQuery selector
http://jsfiddle.net/XJb98/
Just click to table header (because in example I don't have tbody I change it to thead)
Try this,
$("#tabela tbody").click(function() {
$(this).find('tr').css('backgroundColor', 'red');
});
Please try this..
$("#tabela :tr").click(function(e) {
var currentRowId = this.id;
$("#"+currentRowId ).css("backgroundColor", "red");
});
If you want to change TR background to red color on TR click then use the following code
//on ready state
$(function(){
//Change TR background color to red on TR click Event
$("#tabela").find("tr").on('click', function() {
$(this).css({"background":"red"});
});
});
If you want to change TR background to red color on document ready then use the following code
//on ready state
$(function(){
//Change all TR background color to red
$("#tabela").find("tr").css({"background":"red"});
});

Jquery change row in table

My code http://jsfiddle.net/Vds69/ I want to change current row in a table with new value, if I click on the button at the end of the row. Please help me to write action to change row
HTML
<div class="row-fluid">
<div class="btn-group">
<button class="btn btn-primary action-add-visual-feature"> + new visual feature </button>
<button class="btn btn-danger action-remove-visual-features"> Remove all features</button>
</div>
</div>
JQUERY
$('.action-remove-visual-features').on('click', function() {
console.log("action-remove-visual-features");
$('#table-visual-features tbody').html('');
});
$('.action-add-visual-feature').on('click', function() {
console.log("action-add-visual-feature");
$('#table-visual-features tbody').append('<tr><td>x</td><td>Numeric</td><td>Values to be mapped to the x-axis</td><td><button class="action-change">edit</button> <button class="btn btn-mini btn-danger action-remove-visual-feature">remove</button></td></tr>');
});
$('#table-visual-features tbody').on('click', 'tr button.action-remove-visual-feature', function(e) {
console.log("action-remove-visual-feature!!");
console.log("e action = ", e);
$(this).parents('tr').remove();
});
An HTML5 solution could be by appending the following function
$('#table-visual-features tbody').on('click', 'tr button.action-change', function (e) {
if ($(this).hasClass("changing")) {
var $parentRow = $(this).parents('tr').eq(0);
$(this).removeClass("changing");
$parentRow.removeClass("changing");
$(this).text("edit");
/*$('.action-change').parents('tr').eq(0).find('td').attr("contenteditable","false");*/
$parentRow.find('td').attr("contenteditable","false");
} else {
var $parentRow = $(this).parents('tr').eq(0);
$(this).addClass("changing");
$parentRow.addClass("changing");
$(this).text("stop-edit");
$parentRow.find('td').attr("contenteditable", "true");
}
});
CSS
tr.changing td{
border:1px solid green;
}
http://jsfiddle.net/Vds69/8/
Otherwise, you will have to do something like the following,
when editing
1.append to your td input elements
2.input elements should get their value from the text of td elements
finish editing
1.get the values from input elements
2.remove the input elements
3.set the values as text to the td elements.
You can't edit the HTML table manually. It has to done either programmatic or HTML wise.
Here is better approach.
1) Enclose the td with textbox like
<td><input disabled type="text" value="x"/></td>
Similarly apply to all the td s and disable them.
2) Then for edit, add a click functionality like this
$(document).on('click', '.action-change', function () {
$(this).parent().parent().find('input').prop('disabled', false);
});
Just enable the textbox for editing.
Check the working in JSFiddle
Hope you understand.
Hope something like this is what you want mate... Juz gave some static values for the time being..
$('#table-visual-features tbody').on('click','.action-change',function () {
$(this).parent().siblings('td:eq(0)').html('Visual');
$(this).parent().siblings('td:eq(1)').html('Alpahabet');
$(this).parent().siblings('td:eq(2)').html('123');
});
Fiddle
http://jsfiddle.net/tRhHt/

Categories

Resources