I am trying to clone a template of a which will be populated with data and then inserted into a table. I'm currently able to use the same .clone() function with other elements on the same page but jQuery refuses to see and clone the template (I'm guessing because its not a block element).
Here is the template:
<tr id="search_result_temp" class="template">
<td class="logo">
<img class="logo" />
</td>
<td class="ratings">
<p id="rating"></p>
</td>
<td class="programs"></td>
<td class="actions">
<button id="request_info">Request Info</button>
<button id="save_school">Save</button>
</td>
<td class="compare"></td>
</tr>
Here is the javascript code:
for(var index in results){
var result = results[index];
$result_listing = $("#search_result_temp").clone().removeClass('template').attr('id', result.key);
$search_results.append($result_listing);
}
Thanks!
Found the answer. The clone() function works fine when the template <tr> is encapsulated within <table> and <div> elements. As stated below .innerHTML (which jQuery uses in clone()) does not work with table fragments. That means jQuery will not clone a <tr> if it is a root element (whose parent element is <body>). Therefore, the template should look like this(of course with an appropriate id on the <div> to be selected by jQuery):
<div>
<table>
<tr id="search_result_temp" class="template">
<td class="logo">
<img class="logo" />
</td>
<td class="ratings">
<p id="rating"></p>
</td>
<td class="programs"></td>
<td class="actions">
<button id="request_info">Request Info</button>
<button id="save_school">Save</button>
</td>
<td class="compare"></td>
</tr>
</table>
</div>
for(var index in results){
var result = results[index];
$result_listing = $("#search_result_temp").clone().removeClass('template').attr('id', result.key);
$search_results.append($result_listing);
}
correct me if I'm wrong, but why do you need to
var result = results[index];
index is already a single element of results
Alternatively you can wrap the template in a hidden DIV and access the content via jQueries HTML method. On a side note, you might bump heads cloning several items with the same ID. Try use a class approach and add an identifier (Try the new HMTL5 data-* tag attribute).
Related
I have a some table data that looks like this:
<td class="homebranch">
This is some Text!
<span class="location">Texas</span>
</td>
How can I use jQuery to remove the text (This is some Text) but keep the span class?
You can set the html to the elements that should remain.
$(".homebranch").each(function() {
$(this).html($(".location", this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="homebranch">
This is some Text!
<span class="location">Texas</span>
</td>
</tr>
<tr>
<td class="homebranch">
This is some Text!
<span class="location">Another Texas</span>
</td>
</tr>
<table>
You need to access the text node that is the first child of the td and set the nodeValue to "". In order to do this, you must extract the td from the JQuery wrapped set by passing [0] to the set. This returns a regular DOM node, that you can then call firstChild on to get to the text node.
$("td.homebranch")[0].firstChild.nodeValue = "";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="homebranch">
This is some Text!
<span class="location">Texas</span>
</td>
</tr>
<table>
How to replace attribute and set value with jquery
old html
<div class="container">
<table>
<tr>
<td width="106" valign="top" style="background: red">
<p align="center">text</p>
</td>
</tr>
</table>
</div>
New HTML
<div class="container">
<table>
<tr>
<td style="width:106px; background: red;">
<p style="text-align:center;">text</p>
</td>
</tr>
</table>
</div>
Thank you in advance
You can simply use the getAttribute() function to retrieve an attribute's value. So, i'll use <td width="106" valign="top" style="background: red"> as an example:
var style = 'width:' + $('#container td').getAttribute('width') + ';' + $('#container td').getAttribute('style');
$('#container td').attr('style', style);
Will result in <td style="width:106px; background: red;">. However, this is assuming you only have a single table cell in your table. If you had multiple, you would simply use this concept to apply this method to each cell in the table.
You can replace the attributes and set the value for it using jquery :
HTML Code :
Give some class name to the tag you want to set the attribute value
<div class="container">
<table>
<tr>
<td class ="table-cell">
<p class = "text">text</p>
</td>
</tr>
</table>
</div>
jquery Code :
While using class name like this (table-cell) it should be converted to Camel casing (tableCell)
$(function(){
$(".tableCell").style.width = "106px";
$(".tableCell").style.backgroundColor = "red";
$(".text").style.textAlign = "center";
});
How to get text present in the second td.
<tr data-ng-repeat="s in systemSettings" class="ng-scope">
<td class="ng-binding">License Key</td>
<td class="ng-binding">rashmi123</td>
<td align="center">
<div data-ng-show="s.readOnly" class="text-warning ng-hide">read only</div>
<div data-ng-show="!s.readOnly"> <i class="glyphicon glyphicon-edit"></i> </div>
</td>
</tr>
I have tried to get it by using by
expect(element("tr:nth-child(2) td.ng-binding:nth-child(2)").getInnerHtml()).toBe("rashmi123");
but it is giving Invalid locator error.
Your element locator should contain the types like - xpath, css, etc...
expect(element(by.css("tr:nth-child(2) td.ng-binding:nth-child(2)")).getInnerHtml()).toBe("rashmi123");
Also you can use .getText() to get the text of an element instead of getInnerHtml.
var ele = element(by.css("tr:nth-child(2) td.ng-binding:nth-child(2)"));
expect(ele.getText()).toBe("rashmi123");
OR use the short form provided by protractor for element(by.css()) => $()
var ele = $("tr:nth-child(2) td.ng-binding:nth-child(2)");
expect(ele.getText()).toBe("rashmi123");
Hope it helps.
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?
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!