Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have a link inside a table that I would like to do something once clicked, but jQuery doesn't seem to be able to detect that for some reason.
It works fine when I have an onclick="..." on the link.
I also figured out I can't detect clicks on td/tr elements ($('td').click(function(){});), I'm assuming that that's due to the element being inside the table.
But when I try to get the link element ($('#requested-link')) it works fine.
How can I solve this?
I already tried with a higher z-index on link elements, that didn't work.
EDIT:
Here is the part of my code that should catch the clicking of the link
$('.js-remove_baustein_from_versicherung').on("click", function (event) {
event.preventDefault();
console.log(event);
console.log('link was clicked');
});
This is the table:
<table class="table table-striped" id="bausteinTable">
<tr id="versicherung_baustein_3">
<td>3</td>
<td>Versicherung1</td>
<td><a class="js-remove_baustein_from_versicherung" baustein_id="3" href="">Remove</a></td>
</tr>
<tr id="versicherung_baustein_6">
<td>6</td>
<td>Versicherung2</td>
<td><a class="js-remove_baustein_from_versicherung" baustein_id="6" href="">Remove</a></td>
</tr>
</table>
A test to see, if jQuery actually 'sees' the element:
$(document).ready(function () {
console.log($('.js-remove_baustein_from_versicherung'));
})
and this is the output:
jQuery.fn.init [a.js-remove_baustein_from_versicherung]
EDIT 2:
Please give me back my posting rights?
You use the same ID in your <td>
Use class instead of id because two elements cannot have the same ID
Get the id from the event.target attribute with attr
and then use the remove() function with jquery to remove the line you want
$('.remove_baustein_from_versicherung').on("click", function(event) {
event.preventDefault();
console.log('DETECTED');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="bausteinTable">
<tr class="versicherung_baustein_3">
<td>3</td>
<td>Versicherung1</td>
<td><a class="remove_baustein_from_versicherung" baustein_id="3" href="">Remove</a></td>
</tr>
<tr id="versicherung_baustein_6">
<td>6</td>
<td>Versicherung2</td>
<td><a class="remove_baustein_from_versicherung" baustein_id="6" href="">Remove</a></td>
</tr>
</table>
Related
I tryıng to use jQuery selectors but it doesn't work. I use Cypress so sometimes I need to use jQuery selectors to find elements by text or some unique generated numbers. (instead of cy.contains() i.e. sometimes I can need to brake recursions etc.)
Can anyone help me please?
I tried so many selectors, one of those selectors is:
$(tbody:has(tr.dx-row.dx-data-row.dx-row-lines.dx-row-focused.dx-cell-focus-disabled) tr td:contains(`10304`))
the queries that I showed normally work well. But that question that I asked doesn't work suspiciously. I thought about maybe the console doesn't support queries but when I use :has command console shows me without a problem then why :contains doesn't work? Why I can't select elements with text that I asked as a question?
I think your selectors are very complicated, try to simplify them by maybe just select the <td>, that contains that text like in my example below.
For demonstration purposes, i show just the cell text (.text()) - but it can be whatever you want.
$(document).ready(() => {
const $table = $('table');
console.log($table.find('td:contains(10304)').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr class="dx-row dx-data-row dx-row-lines andsoon">
<td class="dx-command-select">UNASSIGNED</td>
<td class="dx-col-1">10304</td>
<td class="dx-col-2">YAYDIN</td>
</tr>
</tbody>
</table>
I have a footable
. When I click on the plus to expand a row
I want to access with jQuery the yellow elements:
If I inspect the element the DOM looks like that after the click:
<table class="footable-details table">
<tbody>
<tr><th>
DOB (hide)
</th><td style="display: table-cell;">
10/16/1977
</td></tr><tr><th>
Description
</th><td class="someText" style="display: table-cell;">
Some description
</td></tr>
</tbody>
</table>
What I would like to do, is to set colspan="2" for td.someText and hide the <th>Description</th>. But I can't access td.someText
I tried to access it with
$('.footable').on('expand.ft.row', function(e, ft, row){
$(row.$details).find('td.someText'));
});
but he does not find anything. In fact, alert($(row.$details).html()); only returns
<td colspan="4">
<table class="footable-details table">
<tbody>
</tbody>
</table>
</td>
Any idea how to access the td with class someText after click?
Here is a jsFiddle
Note: This is not a duplicate of Footable and capturing the expand row event. The linked question is about how to access a row in general. This question is if I select it with the method from the API the content is not loaded correctly. The question helped me to get here, but does not to solve the here presented issue.
expand.ft.row event fires before it appends the dom content.so if you try to read the row content, it's not there.
The correct event for your case is expanded.ft.row which fires after appending the content.
$('.footable').on('expanded.ft.row', function(e, ft, row) {
alert($(row.$details).html());
});
check this demo
https://jsfiddle.net/bfmaredn/
I found this event by analyzing the source code from GitHub repository https://github.com/fooplugins/FooTable/blob/V3/src/js/classes/FooTable.Row.js
Use "async function", try the following code:
$(function() {
$(".footable").footable();
$('.footable').on('expand.ft.row', async function(e, ft, row) {
alert($(await row.$details).html());
});
});
Refer:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to improve on an old school "Top Screens" page that we currently have. It shows the top 30 in a plain old html table. I want to be able to generate the table with the top 100, but only show the top 20 on page load and then have an expand/collapse button. I have found plenty of examples of fully expanding and collapsing tables and subtables, but I have yet to find an example of partially doing one like I need.
It is currently a very simple 2 column table with headers and minimal CSS styling and JS. I would like to keep it to plain JS if possible, but I do have the JQuery library available to me, I am just not very familiar with it.
Any help would be appreciated.
Thanks in advance!
EDIT
I apologize for what ended up being a relatively easy solution with JQuery, but I am very new to it. After reading through the API docs some more I found the :gt() selector that when combined with toggle() lead to an elegant solution which I am adding for anyone who may be interested.
I added the "collapse" class to my <tbody> so the <thead> would not be affected or counted.
// Hide extra rows on load.
$(document).ready(function() {
$(".collapse").find('tr:gt(19)').hide();
});
// Toggle extra rows on click.
$(".collapse").click(function(){
$(this).find('tr:gt(19)').toggle();
});
The simplelest way to do this would be with jQuery, as you could use the .toggle() method.
In my example I've chosen to only show the first 3 results, so that the code isn't too long.
See my comments in the code to understand what's going on.
$(document).ready(function() {
$("button#sh").click(function() {
$("tr.row:nth-child(n+5)").toggle();
});
});
//Here jQuery listens for a click on the button with id "sh", and when clicked,
//either shows or hides the rows selected by the CSS selector, which is the same as
//the one that hid the rows in the CSS section.
tr.row:nth-child(n+5) {
display: none
}
/* Here all rows after the 4th one will be hidden on load. So you have 1 row for the
header, then 3 rows of data, 3+1=4, so row 5 and on will be hidden. */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here jQuery is included -->
<button id="sh">Show/Hide</button>
<!-- Here the button that will show and hide the rows is set. -->
<table border="1">
<tr class="row">
<td>Name</td>
<td>Number</td>
</tr>
<tr class="row">
<td>Name 1</td>
<td>1</td>
</tr>
<tr class="row">
<td>Name 2</td>
<td>2</td>
</tr>
<tr class="row">
<td>Name 3</td>
<td>3</td>
</tr>
<tr class="row">
<td>Name 4</td>
<td>4</td>
</tr>
<tr class="row">
<td>Name 5</td>
<td>5</td>
</tr>
<tr class="row">
<td>Name 6</td>
<td>6</td>
</tr>
</table>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I am using a Jquery plugin called Jquery Content Panel Switcher. It does exactly what the title says, it switches out divs with ease. The html for the page is:
<!--The switcher buttons, basic anchor tags, with the switcher class -->
<a id="content1" class="switcher">One</a>
<a id="content2" class="switcher">Two</a>
<!-- The panel you wish to use to display the content -->
<div id="switcher-panel"></div>
<!-- The actual content you want to switch in and out of the panel, this is hidden -->
<div id="content1-content" class="switcher-content show"></div>
<div id="content2-content" class="switcher-content show"></div>
In each of my content panels I have a form. In each form there is a table:
<table class="table table-hover" data-controller="rank">
<thead>
<tr>
<th colspan="4" align="left"><h2>Rank 1</h2></th>
</tr>
<tr>
<th>Number</th>
<th>Requirements</th>
</tr>
</thead>
<tbody>
<tr data-name="one_li">
<td>1</td>
<td>Info</td>
</tr>
<tr data-name="two_li">
<td>2</td>
<td>More Info</td>
</td>
</tr>
</tbody>
</table>
I am trying to fire off an action if a row gets clicked. Here is the javascript I am using:
$(document).ready(function(){
$('#switcher-panel form table tbody tr').click(function(){
console.log("Clicked");
});
});
When I use the Jquery selector of $('#switcher-panel form table tbody tr') in my Chrome console, it finds the table and everything looks fine. When I put it in my javascript file, nothing happens. Some direction would be great. Thanks for the help.
This will work:
$('#switcher-panel').on('click', 'table tr', function() {
console.log("Clicked", this);
});
Example
This adds a listener to the #switcher-panel that listens for click events on it's children, if the clicked child falls under the 'table tr' selector.
Check out this artice for more info about event delegation. (Ctrl+f for Event delegation)
If the content of the panel is dynamically appended you would need to delegate the click event to a static parent element. Try this:
$('#switcher-panel').on('click', 'form table tbody tr', function(){
console.log("Clicked");
});
My guess would be you could shorten the child selector to table tr as well.
Im new to jquery and need some help.
I have written a table that act like a grid with help from jquery.
When a user click on Name column the user will be redirected to the details page.
Now I want to know if I can do this in a better way?
And should the JS code be in the page or in a separated JS file?
Here is the code.
<table id="grid">
<thead>
<tr>
<th data-field="name">Namn</th>
<th data-field="location">Ort</th>
<th data-field="phone">Telefon</th>
<th data-field="buildinmonth">Bygga inom</th>
<th data-field="houselot">Har tomt</th>
<th data-field="created">Skapad</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td><span id="open" data-id="#item.Id">#item.Name</span></td>
<td>#item.Location</td>
<td>#item.Phone</td>
<td>#item.BuildInMonth</td>
<td>#item.HouseLot</td>
<td>#String.Format("{0:d}", item.CreatedDate)</td>
</tr>
}
</tbody>
</table>
<script>
$("#grid").kendoGrid({
scrollable: false,
sortable: true
});
$("#grid #open").click(function () {
window.location.replace("/lead/details/" + $(this).data("id"));
});
</script>
In this scenario, dont need to use any jquery click event, when the html table is loading that time we can give a <a> tag like,
<td>#item.Name</span></td>
When a user click on Name column the user will be redirected to the details page. Now I want to know if I can do this in a better way?
This seems ok. The only thing I feel can be adde to this is on hover of the Name column, you can show a tooltip of "Show more details" or something more intuitive.
And should the JS code be in the page or in a separated JS file?
Yes I always prefer to have all my JS code in a seperate file. The advantage of doing so is that you can minify the JS code later on.