I'm using the jQuery tablesorter - I've got checkboxes on each row and essentially want to have a "select all" checkbox inside the <th> element.
I can't actually access the click event, even after disabling the tablesorter on that specific column.
Simple JS test:
$('input[type="checkbox"].select-all').on("click", function(e){
console.log("Clicked!");
});
Click event does nothing, which is why I'm presuming the tablesorter is binded to the parent <th> element. The header:
<tr>
<th class="no-sort"><input type="checkbox" class="select-all" /></th>
<th>Some Sortable title</th>
</tr>
Any ideas on how to access that child checkbox event? I have set that column to not sort via:
// Table-sort
var noSortHeaders = {};
$("table").find("th.no-sort").each( function(index, el){
noSortHeaders[ $(this).index() ] = {sorter: false};
});
$("table").tablesorter({
headers: noSortHeaders
});
If the checkbox is created after DOM ready event, you do want to use event delegation. And I would prefer the change event to the click event:
$(document).on('change', 'input[type=checkbox].select-all', function(e) {
console.log('Changed!');
});
Or, better still:
$('table').on('change', 'input[type=checkbox].select-all', function(e) {
console.log('Changed!');
});
Related
I have a table, where I display some data. Every table row has a ID. This ID is the value of every tr-tag. When I click a row of the table, I want to display the ID in the console.
Table:
$.getJSON(`http://localhost:5000/Flights/Flights/${fromAirport}/${toAirport}`)
.then(data => {
console.log(data);
$('#flights').find("tr:gt(0)").fadeOut().empty();
for (let item of data) {
console.log('entered loop');
$(`<tr value="${item.flightId}">`).appendTo('#flights')
.append($('<td>').html(item.date))
.append($('<td>').html(item.departureTime))
.append($('<td>').html(item.arrivalTime))
.append($('<td>').html(item.flightNr))
.append($('<td>').html(item.price))
.append($('<td>').html(item.airplane))
.append($('<td>').html(item.nrSeats))
.append($('<td>').html(item.nrVacant))
.append($('<td>').html(item.nrBooked))
.append($('<td>').html(item.flightId))
}
});
On Click Method:
$('#flights').on('click', function (e) {
const entry = $(e.target.val());
console.log(entry);
});
This on click event is not working, but I do not really know why. Maybe someone has a idea :)
Do you mean this?
When the user clicks on a tr, it receives the value
$('tr').on('click',function(){
value = $(this).attr('value');
console.log(value);
})
There are a couple of errors here:
The target of the click is the table itself, you have to select the
tr.
A syntax error: .val() is a jQuery function, you can't use it
on the target, you have to close the parens before: $(e.target).val().
Even then .val() is used for inputs, for this you have to access the attribute directly.
All together, using event delegation, you can do the following:
$('#flights').on('click', 'tr', function() {
console.log($(this).attr('value'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="flights">
<tr value="1">
<td>Item1</td>
</tr>
<tr value="2">
<td>Item1</td>
</tr>
</table>
Can anyone let me know how to disable on click event for particular column.
Scenario : We displayed user details in a table , once click has been made on the table row, popup dialog window will appears with more details(Calling ajax request to retrieve details from database) . But our constraint is to disable on click event for single column associated with the table.
Eg :
<table border = '1'>
<tr>
<th> Name </th>
<th> Id </th>
<th> Phone Number</th>
</tr>
<tr onclick = "testing()">
<td> Krupa </td>
<td> 123 </td>
<td id = "disableClick"> <a href = "http://www.google.com" target= '_blank'>Click me </a> </td>
</tr>
</table>
If click has been made on text(1st and 2nd column) , it will invoke on click event . But if user clicks on hyper link (3rd column) , i want to redirecting it to Google but not on-click event(testing()).
Can anyone help me to achieve this .
try:
$(function() {
$('table td').on('click', function() {
if ($(this).index() == 2) {
return false; // disable 3rd column
}
});
$('table tr').on('click', function() {
alert('You click the row');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
do this through CSS
table td:nth-child(2) {
pointer-events: none;
}
How about adding your click events to the column, then removing the event once it has been clicked using .unbind(). This will remove the event of the column that was clicked, but any others should still work.
$( '.column' ).on( 'click', function()
{
// do ajax stuff...
// remove event
$( this ).unbind();
});
If you only want the click event to run once, you theoretically could use jquery's .one() feature instead of .on(). This will automatically unbind the event after running once. Of course this would mean you would have to bind the event again afterwards (if you need it)
http://api.jquery.com/one/
For example
$('.selector').one('click', function(){
// your callback functionality
});
Another thing you could do would be to somehow check if the popup is active, and prevent the click handler from running if so
For example
$('.selector').on('click', function(){
if (check_if_popup_is_active) {
return;
}
// otherwise continue with
// your callback functionality
});
You can use the jQuery .unbind() function from within your callback.
Consider following table for instance
<table>
<tr>
<th class='foo'>bar</th>
</tr>
</table>
We can stop onclick events on th.foo as following
$('th').on('click', '.foo', function() {
var that = this;
// your AJAX call goes here
success: function() {
$(that).unbind('click');
}
});
You can do this via CSS
you_css_selector {pointer-events:none;}
I have a table full of appointments. Every appointment has two buttons. One for canceling the event, one for accepting it.
I am struggling to get the appointmentId in the jQuery function when I click on a button. Can you please give me a hint how to do this? The appointmentId is in the table as a hidden input field.
// my html code
<tr>
<td align="left">
<input type="hidden" name="appointmentId" value="234">
John Smith - 14.03.2013 at 9 o'clock
</td>
<td align="right">
<input type="button" id="acceptEvent" class="acceptEvent" value="Accept">
<input type="button" id="cancelEvent" class="cancelEvent" value="Cancel">
</td>
</tr>
// my jQuery code
$("body").delegate('.acceptEvent', 'click', function() {
console.log('accept event clicked');
// get the appointmentId here
});
$("body").delegate('.cancelEvent', 'click', function() {
console.log('cancel event clicked');
// get the appointmentId here
});
Use closest to grab the parent tr element, then select your hidden field.
The reason that this is the correct answer is because it takes the context of the click event with $(this). Then it travels up the DOM tree to your root table row element and selects the child by name. This ensures that you are always in the correct row.
EDIT: I know you already selected an answer, but this was really bothering me that it wasn't working properly. I had to walk down twice using .children() to get it to work though you could also use .find('input[name="appointmentId"]'). Even though you've already selected your answer, I hope this will help you.
$('.acceptEvent').click(function() {
var myVal = $(this).closest('tr').children().children().val();
});
$('.cancelEvent').click(function() {
var myVal = $(this).closest('tr').children().children().val();
});
In the click function, you have access to the button that was clicked with this so you can do:
$("body").on('click', '.cancelEvent', function() {
var input = $(this).closest('tr').find('input[name="appointmentId"]').val();
});
Assuming you have no other IDs or classes to key off of, you can use jQuery's Attribute Equals Selector in reference to the clicked button's parent tr element:
$('.acceptEvent').click(function() {
// get the appointmentId here
var appointmentId = $(this).closest('tr').find('input[name="appointmentId"]').val();
});
I'll do it like that :
$("body").on('.acceptEvent', 'click', function() {
var id = $('input[name="appointmentId"]').val();
//Or search in the parent <tr>
var id = $(this).parent().find('input[name="appointmentId"]').val();
console.log('accept event clicked');
console.log('Id is ' + id);
});
I have a feeling this is an embarrassingly simple mistake I'm making but I just can't see it at the moment.
I have a table which I'm dynamically appending rows to - the the final column of each row contains a link that, when clicked, should remove that row. At the moment, the rows are being added fine but I can't figure out why the event's attached to the remove buttons aren't firing. I've removed the removal code to test with console.log() but I'm seeing nothing in the console.
I know on() should work with appended HTML, what am I missing?
http://jsfiddle.net/52Pbk/
HTML:
<div id="people">
<table>
<tr>
<th>First Name</th>
<th>Second Name</th>
<th>Age</th>
</tr>
</table>
</div>
Add
JS:
var html = '<tr>';
html += '<td><input type="text" /></td>';
html += '<td><input type="text" /></td>';
html += '<td><input type="text" /></td>';
html += '<td>x</td>';
html += '</tr>';
$('.remove_btn').on('click', function() {
console.log('REMOVE BUTTON CLICKED');
//$(this).parent().parent().remove();
return false;
});
$('#add').on('click', function() {
$('#people').append(html);
return false;
});
You are binding the click event handler to all current DOM elements. You need to use this syntax of .on() for event delegation for future dynamically created elements.
$("#people").on("click", ".remove_btn", function(e) {
console.log('REMOVE BUTTON CLICKED');
e.preventDefault();
return false;
});
You need to use .on() in a parent element that is not modified. I used #people in this case. But, you can also narrow it using a closer parent element.
This happens when you apply event on elems which are not available in the dom. So you have to delegate the event to its closest existing parent:
$('table#people').on('click', '.remove_btn',function() {
This is just an order issue. You need to append the HTML before you call the code to register the onclick event.
$('#add').on('click', function() {
$('#people').append(html);
$('.remove_btn').on('click', function() {
console.log('REMOVE BUTTON CLICKED');
//$(this).parent().parent().remove();
return false;
});
return false;
});
I have a table like below
<table onclick="dosomething()">
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
</table>
After I click on the table, I need to find the td on which the click happened. I cannot have onclick event written on tr or td.
You can do something like this (give your table a class of myClass- or whatever you want):
function tableClicked(td) {
// Do something dependent on the td which was clicked
}
$(document).ready(function () {
$("table.myClass td").click(function () {
tableClicked(this);
});
});
This means that you don't have to add onclick attributes to the <td> tags.
Add an Id to the table and remove onClick handler. this is to seperate the behavior and content.
<table id="tableId">
since event will bubble up, capture it on table element and find the target, so you don't need to add event listener to every td.
$('#tableId').click(function(e){
//the td is the target where event happens
var td=e.target;
});
$(function(){
$("#tbl").bind("click", function(e){
if(e.target.tagName == "TD"){
//do your magic
}
});
});
I would dump the onclick and do this
$("#myTable td").click(function() {
$(this).html(); // get the value
$(this).hide(); // hide it
$(this).remove(); // remove it
});
<table id="myTable">
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
</table>