Develop Reference

trying to get a link with javascript

I'm actually trying to create a listener with a click function in javascript to create redirections inside a table.
document.body.addEventListener('click', evt => {
const link = evt.target.closest('td.loader');
if (!link) return;
evt.preventDefault();
window.location.href = link.href;
});
<table>
<tr>
<td class="loader" data-href="http://www.google.com">
Google
</td>
</tr>
</table>
Don't understand what is missing...help please!

A couple of syntax errors in yours, try this:
let tableLink = document.querySelector('td.loader');
tableLink.addEventListener('click', evt => {
const link = tableLink.getAttribute('data-href');
evt.preventDefault();
window.location.href = link;
});
<table>
<tr>
<td class="loader" data-href="http://www.google.com">
Google
</td>
</tr>
</table>
If there are more than one you can leverage a loop and hit it via an element parameter:
let tableLinks = document.querySelectorAll('td.loader');
tableLinks.forEach((el) => {
el.addEventListener('click', evt => {
const link = el.getAttribute('data-href');
evt.preventDefault();
window.location.href = link;
});
})
<table>
<tr>
<td class="loader" data-href="http://www.google.com">
Google
</td>
<td class="loader" data-href="http://www.facebook.com">
Facebook
</td>
<td class="loader" data-href="http://www.youtube.com">
Youtube
</td>
</tr>
</table>

You did a slight mistake here. Links must be in anchor tag. Then only browsers can identify it as a link. So I changed your HTML as below now it's working fine.
<table>
<tr>
<td class="loader">
Google
</td>
</tr>
</table>

So, to be clear, I didn't find a 100% good solution with javascript. The best I can do is to put a div inside each cell of the table, set with height and width 100% like this:
<table>
<tr>
<td class="loader">
<a href="google.com">
<div style="height:100%;width:100%;">
</a>
Google
</td>
</tr>
</table>
Then, I can use this javascript:
document.body.addEventListener('click', evt => {
const link = evt.target.closest('td.loader a');
if (!link) return;
evt.preventDefault();
document.body.innerHTML = '<h3 style="color:red">loading link</h3>';
const href = $(this).find("a").attr("href");
window.location = href;
});
In facts, it works because I I can use the html link and also the javascript listener. But it's not perfect, due to the css (impossible to have a full cell clickable if some cells are composed with different numbers of lines).
But it's not bad!
At the end, I've realized that semantic ui (I'm using this css framework for this application) purpose a class .selectable who do all the job for me.
Perfect result and less javascript code so I've choosen this solution.
Just in case someone has the same problem, Bootstrap has the same property.

using jquery find('.classname') not working for locating TD elements?

I am traversing the divs on my page and looking up child elements using find and supplying a classname
select elements and input elements are located, but the 3 TDs I am trying to find are returning nothing
Here is the code snippet
$.each($(".ccypair"), function(index, element) {
var elements = {
selectElement : $(element).find('.selectstyle'),
inputElement : $(element).find('.inputstyle'),
tdElement1 : $(element).find('.decayTime'),
tdElement2 : $(element).find('.price.bidprice'),
tdElement3 : $(element).find('.price.offerprice')
};
});
Now the first two find() lines work fine, but the three tdElement ones below resolve to nothing. Anyone able to tell me where I am going wrong. I suspect for TD I need to have a different selector?
Apologies here is the html
<div class="ccypair" id="ccypairdiv_0">
<form>
<table>
<tr>
<td colspan="2" class="top currency"><select class="ccypairselect"/></td>
<td colspan="2" class="top volume"><input class="ccypairvolume" type="text" value="1m" autocomplete="off"/></td>
<td colspan="2" class="decaytime">00h:00m:00s</td>
</tr>
<tr>
<td colspan="3" class="price bidPrice">---.---</td>
<td colspan="3" class="price offerPrice">---.---</td>
</tr>
</table>
</form>
</div>
<div class="ccypair" id="ccypairdiv_1">
<form>
<table>
<tr>
<td colspan="2" class="top currency"><select class="ccypairselect"/></td>
<td colspan="2" class="top volume"><input class="ccypairvolume" type="text" value="1m" autocomplete="off"/></td>
<td colspan="2" class="top decaytime">00h:00m:00s</td>
</tr>
<tr>
<td colspan="3" class="price bidPrice">---.---</td>
<td colspan="3" class="price offerPrice">---.---</td>
</tr>
</table>
</form>
</div>
Thanks

First check if your jQuery is loading with the $, the try this
//think about structure, it makes your code more legible
$(".ccypair").each(function(index) {
var element = $(this); //each .ccypair found
var elements = {
selectElement : element.find('.selectstyle'),
inputElement : element.find('.inputstyle'),
tdElement1 : element.find('.decayTime'),
tdElement2 : element.find('.price.bidprice'),
tdElement3 : element.find('.price.offerprice')
};
});
cheers

As always a back to basics approach worked. A simple typo was the root cause here. Apologies
On that note. Does jQuery provide a flag so that rather than failing to locate an element and failing silently it will print out an error message. This would be really helpful?

Mouseenter not working for dynamic content

I have written a code where i need to trigger a functionality when mouse is over to specific elements.
Its working fine for below code for all static
$("table td").on("mouseenter",function(){
console.log("mouse entered")
});
but for all dynamic <td class="editcolumn">XYZ</td> event is not triggering even if i use below code
$("table td").on("mouseenter",".editcolumn",function(){
console.log("mouse entered")
});
Any idea how to make it work. I'm using jQuery 1.11

I know I just commented, but I figured I would show you an example:
HTML:
<table id="tablee" cellspacing="0">
<thead>
<tr class="tablehead">
<th>This</th>
<th>is</th>
<th>a</th>
<th>table</th>
<th>header</th>
<th>and</th>
<th>stuff</th>
<th>though</th>
</tr>
</thead>
<tr class="append">
<td class="edit-column">asdf</td>
<td class="edit-column">qwer</td>
<td class="edit-column">zxcv</td>
<td class="edit-column">rtyu</td>
<td class="edit-column">tyui</td>
<td class="edit-column">dfgh</td>
<td class="edit-column">dfgh</td>
<td class="edit-column">wert</td>
</tr>
<!-- ... -->
</table>
<br/>
<br/>
<input type="button" class="add-column" value="Add Column" />
Javascript:
$(function() {
$('.add-column').click(function() {
$('.append').append("<td class='edit-column'>iueo</td>");
$('.tablehead').append("<th>Mo columns</th>");
});
/* vvv - this */
$("#tablee").on('mouseenter', '.edit-column', function() {
/* ^^^ should be children or a child of this */
$(this).css('background-color', 'yellow');
});
});
Here is a fiddle
This question's answer gives a much better explanation of delegated events.

I too faced a similar problem for dynamic elements that are added or removed. In such situations you can create dynamic elements with event-handlers attached to their attributes i.e. in your case you can put the desired operations in a function which gets called by your attribute event handlers:
It should be something like this:
Javascript:
function whenMouseEnters() {
// perform some operations
}
Html:
<td onmouseenter="whenMouseEnters()">

If table is aviable on DOM load you can write delgated event for the td with class editColumn like this:
$("table").on("mouseenter",".editcolumn",function(){
console.log("mouse entered")
});

knotckout js foreach appending rows automatically in IE 7 and 8

I have a "mini-cart" in a eCommerce site that I am bulding. For the "mini-cart" i use foreach to add items to a table.
The "mini-cart" is a dropdown and it is rendered from a razor file. When i close the "mini-cart" and opens it again it automatically appends all the rows one more time. So everytime I close the "mini-cart" and opens it again. All the rows gets appended one more time.
When the cart is opened this code is run.
showCart = function () {
WebService.PostJson("/services/CartService.svc/GetCart", {},
function (cartDto) {
updateCart(cartDto);
postman.deliver('cartShown', 1);
},
function () {
});
};
The table looks like this.
<table width="100%" >
<thead data-bind="foreach: Items, stripe: Items, evenClass: 'even', oddClass: 'odd'">
<tr>
<td data-bind="text: ArticleNo">
</td>
<td data-bind="text: Name" style="width:390px;">
</td>
<td>
<input type="text" data-bind="value: Quantity" class="quantity"/>
</td>
<td class="cart-price-column">
<span class="cartRowSubTotal" style="display: none;" data-bind="text: SubTotal"></span>
</td>
<td>
Ta bort
</td>
</tr>
</thead>
</table>
updateCart does a Items.splice(0); so it should reload it self each time. But it does not seem to work i internet explorer 7 and 8.
Is there anyway to "clear" the table everytime? Or can the viewmodel figure this out on its own?
Thanks.
UPDATE:
It seemed that the splice method did not empty the array for some reason. When changed to cart.Items([]) it started to work.

Set cart.items(null);
Nothing to do with IE!

In IE, the length parameter is required. Leaving it empty causes the function to do nothing. Call it like this: Items.splice(0, Items().length).

Building a very specific menu with JQuery

I have an HTML table defined as follows:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="item1a"> </td>
<td class="item2a"> </td>
<td class="item3a"> </td>
<td class="item4a"> </td>
<td class="item5a"> </td>
<td class="item6a"> </td>
<td>Some addition content that is not a menu</td>
</tr>
</table>
Each cell has it's own item because the content and width such content varies. For instance, here is the CSS associated with item1a
.item1a {height:36px; width:84px; background-image:url(/resources/images/item1a.png);}
.item1b {height:36px; width:84px; background-image:url(/resources/images/item1b.png);}
When someone hovers over a cell, I need to change the class from a to b. I am pretty confident I know how to do that. My real problem is, I don't know how to make a menu popup underneath the item. I need to use this tabular structure because of the specificty of the graphics. Can someone help me out? How should I address this problem?
Thank you!

Assuming your classes item1a, item2a... are typos and you meant to type item1 a
$('td').hover(hoverIn, hoverOut); //make your more selector more specific
function hoverIn() {
$this = $(this);
$this.removeClass('a').addClass('b');
var hoverMenu = '<div class="hoverMenu">Rest of the HTML needed for the menu</div>';
$this.append(hoverMenu);
}
function hoverOut() {
$this = $(this);
$this.removeClass('b').addClass('a');
$this.children('.hoverMenu').remove();
}
Switches the classes on hover and adds a DIV to the TD bottom. You can move it around to suit your needs.