I have tried to use Jquery to click a table row to go to a new page. But my last column has a button. For which clicking on the edge takes it to a new page. Anyway to disable the td onclick for that column. I tried using onclick='event.stopPropagation();return false;' but that would disable the button too.
My Jquery code below.
$(".myTable").on("click", "td", function(){
var issueid = $(this).closest('tr').find("td:eq(2) input").val();
window.location = 'viewminissues.jsp?issue_id='+issueid;
});
This can be handled in two ways:
Try adding event.preventDefault() along with event.stopPropagation().
Add a disabled class on the td element manually and then handle further scenarios with hasClass('disabled') check.
The issue is because the click event from the button propagates up the DOM to the tr which then transfers the page.
To fix this you could call stopPropagation() within the button event handler:
$(".myTable").on("click", "td", function() {
var issueid = $(this).closest('tr').data('issue');
console.log('Transferring to: viewminissues.jsp?issue_id=' + issueid);
//window.location.assign('viewminissues.jsp?issue_id=' + issueid);
});
$('.myTable').on('click', 'button', function(e) {
e.stopPropagation();
console.log('Perform button action...');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myTable">
<tr data-issue="1">
<td>Foo bar</td>
<td><button>Edit</button></td>
</tr>
<tr data-issue="2">
<td>Lorem ipsum</td>
<td><button>Edit</button></td>
</tr>
</table>
You can exclude the last <td> from the click() event using :not(:last) like this:
$(".myTable").on("click", "td:not(:last)", function() {
var issueid = $(this).closest('tr').find("td:eq(2) input").val();
window.location = 'viewminissues.jsp?issue_id=' + issueid;
});
Related
I'm having a tough time using jQuery to give a button the ability to delete it's own row. Specifically, I the selection process find extremely confusing.
The table has an id of foo and the button has a class of 'delete. Shouldn't the following code select the button? It's just the ****.on('click', function(event){}) part that I am struggling to understand. I just want the button created to be selected to have the on response.
$('#foo tr:last').after(`<tr id="1"><td>fname</td>
<td>lname</td>
<td>pnumber</td>
<td>address</td>
<td><button class="delete" id="1" type="click">Delete</button></td>`)
$("#foo .delete").on('click', function(event) {
event.preventDefault()
let rowID = event.target.id
if (rowID !== '') {
$(`#foo,#${rowID}`)[1].remove()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="foo">
<tr></tr>
</table>
Read this Jquery doc https://learn.jquery.com/events/event-delegation/
$(document).on('click', "#foo .delete", function(event){
//do something here
})
I have implemented a JQuery bootgrid. My problem is that I want to ignore the row click event for when a select input in my bootgrid is clicked.
This is what I have so far:
.on("click.rs.jquery.bootgrid", function (e, columns, row, target) {;
if(/* Clicked element is not a select input */) {
location.href = "/row?id=" + row.Id;
}
});
Any idea how to accomplish this? I've been struggling around with this for ages now.
Edit: Why Alisson's answer doesn't work.
When I do this:
.on("click.rs.jquery.bootgrid", function (e, column, row, target) {
console.log(row.IncidentId);
});
I can get the IncidentId, but when I do this:
.on("loaded.rs.jquery.bootgrid", function () {
grid.find(".some-selector").on("click", function (e) {
// do what you need here...
var IncidentId = $(this).closest('tr').data('IncidentId');
location.href = "/row?id=" + IncidentId;
});
});
It doesn't work because I can't access the IncidentId that way.
This is my <thead>:
<thead>
<tr>
#*<th data-column-id="IncidentId" data-visible="false">Id</th>*#
<th data-column-id="CaseNumber" data-order="asc">Case Number</th>
<th data-column-id="Title">Case Title</th>
<th data-column-id="EntrepreneurContact">Entrepreneur Contact</th>
<th data-column-id="Mentor">Mentor</th>
<th data-column-id="StatusReason">Status Reason</th>
<th data-column-id="CreatedOn">Created On</th>
</tr>
</thead>
I want this:
Not this:
Edit: a better solution
You can use the click event as you would, but combining with the loaded event to stop the propagation of your select input events like so:
var bootgrid = $("#grid1").bootgrid(config);
bootgrid.on("click.rs.jquery.bootgrid", function (e, columns, row, target) {
console.log('Incident Id: ' + row.IncidentId);
});
bootgrid.on("loaded.rs.jquery.bootgrid", function (e, c, rows) {
// avoid any element with "stop-click-event" class from triggering the event in the grid...
$(".stop-click-event").click(function(e) {
e.preventDefault();
e.stopPropagation();
});
});
You need to bind to click inside the loaded event of the grid, because this is where you are sure the elements like your select input already exist in the DOM, and since after each reload of the grid (at least for ajax calls) the bootgrid delete all your elements and recreate with new data, loaded will be triggered again, so these new elements will be bound again.
Here is a working JSFiddle
Old solution
Instead of using this click.rs.jquery.bootgrid event, bind to loaded, and once loaded, bind to the correct elements you need:
var grid = $("#my-grid").bootgrid(config)
.on("loaded.rs.jquery.bootgrid", function () {
// find elements inside the grid, using some jQuery selector...
grid.find(".some-selector").on("click", function (e) {
// do what you need here...
var rowId = $(this).closest('tr').data('row-id');
location.href = "/row?id=" + rowId;
});
});
If you still need to add a listener to an entire row, for example, and want to avoid a click in a button or an input, you can do something like this (still inside loaded event):
// bind to all rows inside the grid...
grid.find("tr").mouseup(function (e) {
// do something
var rowId = $(this).data('row-id');
location.href = "/row?id=" + rowId;
});
// avoid when clicking any "a", "input" or "button" tags...
grid.find("tr td a, tr td input, tr td button").mouseup(function (e) {
e.stopPropagation();
});
I am trying to add and delete rows (by Id) to my table dynamically. The add button works fine but I am not sure why the delete button doesn't work (it's either deletes the last row or doesn't work). Any suggestion please?
Here is my table:
<table class="customFiltersTable" id="customFiltersTable">
<tbody>
</tbody>
</table>
The Javascript add button has this code inside:
filtersRow = filtersRow + 1;
var fType1 = $('<tr class="rowTableFilters" id="rowFilters'+filtersRow+'" name="rowFilters'+filtersRow+'"><td class="colFilters" id="colFilters'+column1+'" name="colFilters'+column1+'" width="480px" align="center"></td><td class="colFilters" id="colFilters'+column2+'" name="colFilters'+column2+'" width="480px" align="center"></td><td class="delButton" id="delButton" name="delButton" width="40px" align="center"><button type="button" class="btn btn-link" id="deleteFilter'+filtersRow+'" name="deleteFilter'+filtersRow+'" style="float: right;">Del</button></td></tr>');
$("#customFiltersTable").append(fType1).promise().done(function () {
$("#deleteFilter" + filtersRow).click(function(){
var row = document.getElementById("rowFilters"+filtersRow);
row.parentNode.removeChild(row);
});
});
Thanks!
Acquaint yourself with jQuery's event delegation, https://learn.jquery.com/events/event-delegation/. You'll learn that you can avoid attaching the delete click listener to every row you add, and instead attach that listener once to the table element:
$('#customFiltersTable').on('click', 'button', function () {
$(this).closest('tr').remove();
});
You're incrementing filtersRow; however your click function only gets evaluated at the time you press the button. In other words, this code:
function(){
var row = document.getElementById("rowFilters"+filtersRow);
row.parentNode.removeChild(row);
}
is executed on click and will run with whatever value of filtersRow you last incremented. You'll always be removing the last row.
Perhaps something like:
function () {
$(this).closest('tr').remove();
}
Sorry, this is compiled in my head.
To add row:
var tmp = '<tr id="4_r"><td>row4</td></tr>';
$('#myTable tbody').append(tmp);
To delete row have id="4_r":
var iddel = "4_r";
$('#myTable').closest('table').find('tbody > tr')
.each(function(){
var idr = this.id;
if(idr == iddel){
$(this).remove();
}
});
I've got a form with a table with originally 1 row of input fields. Users can click the "New Row" button to get another row, with empty input fields. This leaves with me multiple copies of the "New Row" button for every Row - I would like to remove all but the most recently created "New Row" button (i.e. the one in the last row of input fields).
I've setup a sample JSFiddle at:
http://jsfiddle.net/fmdataweb/vRe9v/2/
Is there something I can add to the existing js that will delete the button that was clicked whilst leaving the newly created button in the new row? Here's the Javascript:
var table = $( '#nextYear' )[0];
$( table ).delegate( '#button2', 'click', function () {
var thisRow = $( this ).closest( 'tr' )[0];
$( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});
Use $(this).remove(); jQuery $(this) in the event of control represents the control whom event is fired on. You can use remove() method that will remove the button being click from dom
Live Demo
var table = $('#nextYear')[0];
$(table).delegate('#button2', 'click', function() {
var thisRow = $(this).closest('tr')[0];
$(thisRow).clone().insertAfter(thisRow).find('input:text').val('');
$(this).remove();
});
You can use jQuery remove() which removes the set of matched elements from the DOM.
In your case as you are within the button click event, this is what references the button object in the DOM.
Turn this into a jQuery object and call remove() on it like this:
$(this).remove();
Complete new code:
var table = $('#nextYear')[0];
$(table).delegate('#button2', 'click', function() {
var thisRow = $(this).closest('tr')[0];
$(thisRow).clone().insertAfter(thisRow).find('input:text').val('');
$(this).remove(); // remove button that was clicked
});
See DEMO
Try this: DEMO: http://jsfiddle.net/xRQs8/2/
It can be done using single button :+
<table id="dataTable" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<input type="Button" value="Add More" name="AddMore" class="AddOption" />
</td>
</tr>
</table>
I have the following HTML in a JSP file:
<div class="custList">
<table class="dataGrid">
<c:forEach var="cust" items="${custList}">
<tr>
<td>${cust.number}</td>
<td>${cust.description}</td>
<td>${cust.type}</td>
<td>${cust.status}</td>
</tr>
</c:forEach>
</table>
</div>
I need to be able to trigger a 'click' event on each of the dynamically created <tr> tags and also be able to access the values of the <td> tags (of the clicked <tr>) from within the JavaScript function. I have this function already, but sadly it doesn't seem to be working.
$(document).ready(function() {
$("div.custList > table > tr").live('click', function() {
alert("You clicked my <tr>!");
//get <td> element values here!!??
});
});
Update (Jan 2016): jQuery.live is deprecated (as noted here:http://api.jquery.com/live/)
As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers.
Unless otherwise definied (<tfoot>, <thead>), browsers put <tr> implicitly in a <tbody>.
You need to put a > tbody in between > table and > tr:
$("div.custList > table > tbody > tr")
Alternatively, you can also be less strict in selecting the rows (the > denotes the immediate child):
$("div.custList table tr")
That said, you can get the immediate <td> children there by $(this).children('td').
Try jQuery's delegate() function, like so:
$(document).ready(function(){
$("div.custList table").delegate('tr', 'click', function() {
alert("You clicked my <tr>!");
//get <td> element values here!!??
});
});
A delegate works in the same way as live() except that live() cannot be applied to chained items, whereas delegate() allows you to specify an element within an element to act on.
This work for me!
$(document).ready(function() {
$(document).on("click", "#tableId tbody tr", function() {
//some think
});
});
Since TR elements wrap the TD elements, what you're actually clicking is the TD (it then bubbles up to the TR) so you can simplify your selector. Getting the values is easier this way too, the clicked TD is this, the TR that wraps it is this.parent
Change your javascript code to the following:
$(document).ready(function() {
$(".dataGrid td").click(function() {
alert("You clicked my <td>!" + $(this).html() +
"My TR is:" + $(this).parent("tr").html());
//get <td> element values here!!??
});
});
$("body").on("click", "#tableid tr", function () {
debugger
alert($(this).text());
});
$("body").on("click", "#tableid td", function () {
debugger
alert($(this).text());
});
$(this).find('td') will give you an array of td's in the tr.
<script>
jQuery(document).ready(function() {
jQuery("tr").click(function(){
alert("Click! "+ jQuery(this).find('td').html());
});
});
</script>