Develop Reference

Click event does not return $event on click

I have the following structure in my HTML in an angular 7 application:
What I am trying to do is to call the GetContent() function on click of any of the text inside the div. I am able to get the $event as "Liquidity" when I click on the text but if I click on any empty space between the text, the $event is empty. I tried every possible permutation of changing the location of the function call and id but same issue. Can anyone let me know what is wrong.
<tr (click)="GetContent($event)">
<td>
<table>
<tbody>
<tr>
<td>
<div id="Liquidity"> lot of text....................... </div>
</td>
</tr>
</tbody>
</table>
</td>
<tr>

Because there is no content in your TR's and TD's, its not creating a space at all. Look at my code, I have added padding for table row's ,table and table data tags
<table>
<tbody>
<tr (click)="GetContent($event)" >
<td style="padding:20px;background:red">TD
<table style="padding:20px;background:green">Table
<tbody>
<tr>
<td style="padding:20px;background:blue">TD
<div id="Liquidity" style="padding:10px;background:green"> lot of text....................... </div>
</td>
</tr>
</tbody>
</table>
</td>
<tr>
</tbody>
</table>
example stackblitz

Do it this way ,
UPDATED
<table>
<tbody>
<tr>
<td>
<div id="Liquidity" (click)="GetContent($event)"> lot of text....................... </div>
</td>
</tr>
</tbody>
</table>
ts file
GetContent(event) {
var target = event.target || event.srcElement || event.currentTarget;
var idAttr = target.attributes.id;
var value = idAttr.nodeValue;
console.log(value) //you will get liquid here.
}

get textarea value from table HTML

I want to get the data in the textarea which is in nested table. I use the row Index to get the data in that row.
I tried this , but it is not work.
var note = document.getElementById($index).cells[3];
var y = document.getElementsByTagName("textarea").value;
Here is the table.
<tr ng-repeat="(key, x) in records" id="{{$index}}">
<td>{{key}}</td>
<td>{{x.title}}</td>
<td>{{x.year}}</textarea></td>
<td>
<textarea rows="2" cols="30">{{x.note}}</textarea>
<button type="button" ng-click="update($index)">Update</button>
</td>
<td><button type="button" ng-click="delete($index)">Delete</button></td>
</tr>

Note that you also have the ending of a previous textarea control here, which might cause a problem for getElementsByTagName:
<td>{{x.year}}</textarea></td>
var y = document.getElementsByTagName("textarea")[0].value;
alert(y);
<tr>
<td>17</td>
<td>Title</td>
<td>Year</td>
<td>
<textarea rows="2" cols="30">this is my note</textarea>
<button type="button">Update</button>
</td>
<td><button type="button">Delete</button></td>
</tr>

Maybe here is the error, you are closing a textarea:
<td>{{x.year}}</td>
After try with it:
var y = document.getElementsByTagName("textarea")[0].value;

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?

Selecting content with JQuery

Any ideas why this doesn't work?
http://jsfiddle.net/zk4pc/2/
I'm trying to get it so that everytime there is an element with the class "insert_name", the name is printed from the table.
Could you also help me make the selection more advanced (for instance only using the data from the first tr in the "client-profile" class?
Thanks!
HTML
<body onload="printMsg()">
<div id="api_data" style="display:none;">
<div class="client-profile">
<div class="head icon-5">Customer Details</div>
<table id="client-information">
<tbody>
<tr>
<td class="left">Name:</td>
<td class="color">Matthew Tester
</td>
</tr>
<tr class="dark">
<td class="left">E-mail:</td>
<td class="color">asdfg</td>
</tr>
<tr>
<td class="left">Registration:</td>
<td class="color">2013-11-21</td>
</tr>
<tr class="dark">
<td class="left">Status:</td>
<td class="color"><span class="active">Active</span>
</td>
</tr>
<tr>
<td class="left">Last Login Time:</td>
<td class="color" title="2014-05-28 11:43:46">1 hour ago</td>
</tr>
<tr class="dark">
<td class="left">Last Login From:</td>
<td class="color">123.123.123.123</td>
</tr>
<tr>
<td class="left">Location:</td>
<td class="color">United Kingdom</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="insert_name"></div>
</body>
Javascript
(function printMsg() {
var node = document.getElementsByClassName('insert_name');
node.innerHTML = $('[class*="color"]').eq(0).text();
})();

jsFiddle Demo
The issue is with your node selection. When you select by class name it returns an array of elements. Since you are only looking for the div with that class name, access the first index to reference it.
var node = document.getElementsByClassName('insert_name')[0];
edit
To make this iterate all of the nodes you could take this approach
var nodes = document.getElementsByClassName('insert_name');
var text = $('[class*="color"]').eq(0).text();
for(var i = 0; i < nodes.length; i++){
nodes[i].innerHTML = text;
}
Alternatively, since jQuery is already included, you could remove the body's onload event and just use this
jsFiddle Demo
$(function(){
$('.insert_name').html($('[class*="color"]').eq(0).text());
});
To ensure this only acts on the client-profile class the selector would be
$('.insert_name').html($('.client-profile [class*="color"]').eq(0).text());

If you are just trying to insert the name rather than all of the content, this should do the trick:
$(function() {
$('.insert_name').text($('td:contains("Name:")').next().text());
});
Here is the fiddle:
http://jsfiddle.net/b8LKQ/
Hope that helps!

I added a little more jQuery:
$(function() {
$('[class*="color"]').each(function(){
$('.insert_name').append($(this).text());
});
});
http://jsfiddle.net/zk4pc/7/
Hope that helps!

Getting portion of an html string with jQuery

I have a javascript variable named response. This is the response from an ajax call. This variable has the following content:
<table id="ListCompanies" class="zebra-striped">
<thead>
<tr>
<th>Nom de la societe</th>
<th>Ville</th>
<th>Rue</th>
<th width="70"><a class="btn primary small createCompany" href="/PLATON/Admin/Company/Create">[+] Nouvelle societe</a> </th>
</tr>
</thead>
<tbody>
<tr id="13">
<td>INDUSTRIAL DEFENDER INC</td>
<td>FOXBOROUGH</td>
<td>Chestnut Street</td>
<td nowrap>
<a class="btn small editCompany" href="/PLATON/Admin/Company/Edit/13" id="13">Modifier</a>
<a class="btn small deleteCompany" href="/PLATON/Admin/Company/Delete/13" id="13">Supprimer</a>
</td>
</tr>
<tr id="14">
<td>INC CRANE NUCLEAR</td>
<td>GEORGIA KENNESAW</td>
<td>cobb International Blvd</td>
<td nowrap>
<a class="btn small editCompany" href="/PLATON/Admin/Company/Edit/14" id="14">Modifier</a>
<a class="btn small deleteCompany" href="/PLATON/Admin/Company/Delete/14" id="14">Supprimer</a>
</td>
</tr>
</tbody>
</table>
Load more
alert($("tbody", response).html()); gives me:
<tr id="13">
<td>INDUSTRIAL DEFENDER INC</td>
<td>FOXBOROUGH</td>
<td>Chestnut Street</td>
<td nowrap>
<a class="btn small editCompany" href="/PLATON/Admin/Company/Edit/13" id="13">Modifier</a>
<a class="btn small deleteCompany" href="/PLATON/Admin/Company/Delete/13" id="13">Supprimer</a>
</td>
</tr>
<tr id="14">
<td>INC CRANE NUCLEAR</td>
<td>GEORGIA KENNESAW</td>
<td>cobb International Blvd</td>
<td nowrap>
<a class="btn small editCompany" href="/PLATON/Admin/Company/Edit/14" id="14">Modifier</a>
<a class="btn small deleteCompany" href="/PLATON/Admin/Company/Delete/14" id="14">Supprimer</a>
</td>
</tr>
That's ok for me.
How can I get the link at the bottom #LoadMoreLink from the response variable?
I tried:
alert($("#LoadMoreLink",response));
But it didn't work.

Your response contains 2 "parent" elements, the <table>, and the <a>. $(response) creates a jQuery object with 2 elements. To get the one you want, try this:
$(response).filter('#LoadMoreLink')
.find doesn't work here, as .find only searches children, not the "parent" elements themselves. You need to use .filter to search for the "parent" element.
(By "parent" element, I mean the element that's actually in the jQuery object).

$("a", response).filter("[id='LoadMoreLink']")
Should be what you need. I think the normal search is failing because jQuery tries to access the DOM hash of elements with IDs, which "#LoadMoreLink" is not in (having not been loaded into the DOM yet).

If nothing works out then simply load the response in a hidden div and then retrieve $("#LoadMoreLink")