How to get text of an element? - javascript

I am running the following:
$.getJSON(url,function(data){
wikiHTML = data.parse.text["*"];
$wikiDOM = $("<document>"+wikiHTML+"</document>");
if($wikiDOM.find(".infobox th:contains('Duration')").length > 0) {
$("#results").append("<li>" + $wikiDOM.find($(".infobox th:contains('Duration')").siblings("td").html()) + "</li>");
}
});
I am getting a list with:
[object Object]
I should be getting a text that says:
Long term
The html where the text is:
<th>
Duration
</th>
<td>Long term</td>
JsFiddle

That argument in the find method should be a selector but you're passing in the result of html().
Corrected:
$('#results').append('<li>' + $wikiDOM.find('.infobox th:contains("Duration")').siblings('td').html() + '</li>');
JSFiddle Demo: https://jsfiddle.net/5osb1qjm/1/

JavaScript: get Elements value/text by using getElementById("").innerHTML;
JQuery: $(id/class).text();

Related

dynamically find jquery element if exists

i have a function, where if called, will update another object if it exists. thing is, when the page is created the id is not known.
so, for example, heres my code:
$('.slides').on("slidestop", function() {
$this = $(this);
$.ajax({
url: "action.php?event=ITEM "+$this.attr("data-itemID") + " " + this.value+"&itemID="+$this.attr("data-itemID"),
type:'POST',
success: function(result){
//update brightness slider if it exists
$("#sl" + $this.attr('data-itemID')).val(15);
$("#sl" + $this.attr('data-itemID')).slider("refresh");
},
});
});
html:
<input class='dimmerSlider' type='range' id='3' value='4' min='0' max='15' step='1' data-highlight='true' data-itemID='3'/>
error:
Uncaught TypeError: $(...).slider is not a function
$("#$this.attr('data-itemID')").val(15);
I am guessing you wanted to build a string using the attibute
$("#" + $this.attr('data-itemID')).val(15);
or use data instead of attr
$("#" + $this.data('itemID')).val(15);
To answer your second question if the element can not be found.
If you select an element with jQuery and it does not exist, it will be ignored when you run methods against it. If you need to know it does not exist than you can check the length
var x = $(".mySelector");
if (!x.length) { //aka x.length===0
console.log("not found");
}
also, the element is not guaranteed to exist, how do i check for that
as well?
Try using Attribute Equals Selector [name="value"] , .is()
var elem = $("[id=" + $this.attr("data-itemID") + "]");
if (elem.is("*")) {
// do stuff
elem.val(15)
.slider("refresh");
}

Printing JSON object with jQuery into html

I have a JSON object that looks like this:
var content = '[{"title":"John Apple","lastname":"Apple"},
{"title":"Kumar Patel","lastname":"Patel"},
{"title":"Michaela Quinn","lastname":"Quinn"},
{"title":"Peyton Manning","lastname":"Manning"},
{"title":"John Doe","lastname":"Doe"},
{"title":"Jane Lee","lastname":"Lee"},
{"title":"Dan McMan","lastname":"McMan"},
{"title":"Yu Win","lastname":"Win"}]';
And I am trying to edit it with jQuery to display in my div tag with the id of content-view
here is my jquery:
$.each(content, function(t, l){
$('#view-content').appendTo('<div id = "' + l + '">' + t + '</div>');
});
For some reason on my jsFiddle, which is right here: http://jsfiddle.net/gAWTV/
It just comes up blank with the result. Does anyone have any ideas? I am stumped...
---EDIT---
What i would like to do is have everything output into its own div tags like this:
<div id="Apple">John Apple</div>
<div id="Patel">Kumar Patel</div>
<div id="Quinn">Michaela Quinn</div>
etc...
Your content is a string, not an array of objects.
You firstly need to store it as an array, so get rid of the single quotations marks.
var content = [{"title":"John Apple","lastname":"Apple"},
{"title":"Kumar Patel","lastname":"Patel"},
{"title":"Michaela Quinn","lastname":"Quinn"},
{"title":"Peyton Manning","lastname":"Manning"},
{"title":"John Doe","lastname":"Doe"},
{"title":"Jane Lee","lastname":"Lee"},
{"title":"Dan McMan","lastname":"McMan"},
{"title":"Yu Win","lastname":"Win"}];
Unless there is a reason you store it as a string? Then you need to parse it.
var content_object = JSON.parse(content);
Then you can run your code. However, I think you want to "stringify" your JSON. If that's the case you also need to swap t with l, because l is the object. Finally, you want to append, not appendTo. The latter appends the subject to the target you specify, not the other way round (so in your case appendTo appends #view-content to your div you've constructed, which doesn't work).
$.each(content, function(t, l){
$('#view-content').append('<div id = "' + t + '">' + JSON.stringify(l) + '</div>');
});
JSFiddle
Final comment, I would use document fragments to build your list instead of appending the new divs to an existing one in the each loop - that improves performance.
After OP edit:
Change the last snippet to:
$.each(content, function(t, l){
$('#view-content').append('<div id = "' + l.lastname + '">' + l.title + '</div>');
});
Updated JSFiddle
Try this:
var content = [{"title":"John Apple","lastname":"Apple"},
{"title":"Kumar Patel","lastname":"Patel"},
{"title":"Michaela Quinn","lastname":"Quinn"},
{"title":"Peyton Manning","lastname":"Manning"},
{"title":"John Doe","lastname":"Doe"},
{"title":"Jane Lee","lastname":"Lee"},
{"title":"Dan McMan","lastname":"McMan"},
{"title":"Yu Win","lastname":"Win"}];
$.each(content, function(t, l){
$('<div/>',{
id: l,
text:t }).appendTo('#view-content');
});
DEMO

Parsing in jquery

I am trying to parse what I am getting JQuery to show data ! I am consuming data from an API , but I am getting an error .
Can I do a Loop on JQuery this way ?
$.each(data.results, function (i, item) { // on this line
var Name = item.name;
var Date = item.auditInfo.dateCreated;
var Creator = item.creator.display;
$htmlstring.append($('<li/>').append('<p>Test</p>'));
$htmlstring.append("<div class='title'> Info : "
Name + Date + Creator "</div>");
}); $('#afficher').html($htmlstring);
I am sharing code on JSFiddle (Check drug_omrsRestCall function ) :
http://jsfiddle.net/zTXyq/23/
As #adeneo commented on the question, the concept is right but you should be careful about what element you are appending HTML content to.
With this snippet of your code:
$htmlstring.append("<div class='title'> Info : "
Name + Date + Creator "</div>");
(BTW, it is missing two plus signs for a correct concatenation, I hope that's not the error you are getting).
you append a DIV to the UL and you actually want to append it to the LI, for example:
$('<li />').append("<p>Test</p>")
.append("<div class='title'> Info : " + Name + Date + Creator + "</div>")
.appendTo($htmlstring);
Check this fiddle for a working solution of your issue:
http://jsfiddle.net/d3dcj/2/

how to get the id attribute of <td> from <tr> in jQuery?

please help me with this.
instead of looping for ..do we have anything like get the id of first td or second one ?
example :
"<tr class='test_point' id="+fileName+"><td><img src='"+ROOT_PATH+"/assets/diamond.png' /><td class='test_point_name' id="+test_point_id+">"+test_point
+"</td></tr>"
fetching the tr by ID here
$(#fileName).each(function( index ){
console.log( index + ": " + $(this).text() );
//console.log("id_value: "+$(this).attr('id'));
console.log("test_value: "+ $(this).find('td').attr('id'))
}
To get id of an item by its index, use this.
Demo
$('#fileName').find('td')[0].id;
Where [0] means first, [1] second...and so on.
Your selector for the each statement is a bit off. You're missing quotes:
$("#fileName").each(function( index ){
Or maybe you wanted to use the variable fileName
$("#" + fileName).each(function( index ){
In any case, ID's should be unique. Im guessing you want to use your trs class:
$(".test_point").each(function( index ){
$('#your-tr-id-here').each(function() {
$(this).children('td').each(function() {
console.log('td ID: ' + $(this).attr('id'));
});
});

Removing rows that do not contain search-term with jQuery

I'm using the following JQuery to filter rows on a datatable, which works fine...
yuiDtFilter = function(tableDivId, filter) {
//custom jQuery function defines case-insensitive fn:Contains, use default fn:contains for case-sensitive search
jQuery.expr[':'].Contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
$("#" + tableDivId + " .yui-dt-data").find('tr').hide();
$("#" + tableDivId + " .yui-dt-data").find('td:Contains("' + filter + '")').parents('tr').show();
}
However I have a need for the filter work in the opposite way. I need it to remove rows that don't match the search terms.
I've found out that I need to use 'not()', but I've spent most of the day in vain trying to get it to work (using every example I can find).
I've tried many variations of -
$("#" + tableDivId + " .yui-dt-data")
.find(:not(('td:Contains("' + filter + '")'))
.parents('tr').remove();
Could anyone give me a hand using my code as a starting point?
Try
$("#" + tableDivId + " .yui-dt-data").find('td').not(':contains("' + filter + '")').parents('tr').remove();
or
$("#" + tableDivId + " .yui-dt-data").find( 'td:not(:contains("' + filter + '"))' ).parents('tr').remove()
Remove row from HTML table that doesn't contains specific text or string using jquery.
Note: If there are only two column in HTML table, we can use "last-child" attribute to find.
*$(document).ready(function(){
$("#tabledata tbody .mainTR").each(function(){
var lastTD = $(this).find("td:last-child");
var lastTdText = lastTD.text().trim();
if(!lastTdText.includes("DrivePilot")){
$(this).remove();
}
});
});
Note: If there are more than two column in HTML table, we can use "nth-child(2)" attribute to find.
Passing column index with "nth-child(column index)"
$(document).ready(function(){
$("#tabledata tbody .mainTR").each(function(){
var lastTD = $(this).find("td:nth-child(2)");
var lastTdText = lastTD.text().trim();
if(!lastTdText.includes("DrivePilot")){
$(this).remove();
}
});
});
Note: "DrivePilot" is nothing but text or string

Categories