I was searching javascript code to get the content of HTML tag having attribute name ng-if="desc.description" using javascript querySelectors.
<li ng-bind-html="esc.description" ng-if="desc.description">Hello world.</li>
Use an attribute selector.
var contents = document.querySelector("[ng-if='desc.description']").innerHTML
Use getAttribute() method
Your Element
<script>
var a = document.getElementById('hey')
var x = a.getAttribute('ng-if') // "/"
alert(x);
</script>
Define Id value.
HTML:
<li id="id-ex" ng-bind-html="esc.description" ng-if="desc.description">Hello world.</li>
JS:
var myInnerHtml = document.getElementById("id-ex").innerHTML;
Related
ho,
I have a div that I access like so:
var gridcellrowvalue0 = gridcell0.innerHTML;
This returns to me the following div:
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
In my JS I would like to accesss the "DefaultText" variable and I have tried this:
gridcellrowvalue0.innerHTML;
gridcellrowvalue0.getAttribute("data-originaltext");
But none of them work. I'm assuming that getAttribute doesn't work because it is not really an element, it's innerhtml.
My goal is to use the "DefaultText" value in an IF-statement and therefore I simply need it.
I appreciate any pointers, my friends!
You could access your element directly from gridcell0 using gridcell0.querySelector('.DivOverflowNoWrap') instead, like :
var gridcell0 = document.querySelector('#x');
console.log( gridcell0.querySelector('.DivOverflowNoWrap').innerHTML );
Snippet:
var gridcell0 = document.querySelector('#x');
if (gridcell0.querySelector('.DivOverflowNoWrap') !== null) {
console.log(gridcell0.querySelector('.DivOverflowNoWrap').innerHTML);
} else {
console.log('Does not exist');
}
<div id="x">
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
</div>
With Javascript also it can be achieved but I am showing here using jQuery
$('document').ready(function() {
var div = $(".DivOverflowNoWrap");
var text = div.text();
alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
The problem is how you access the div in the first place. If you do it like you described (with gridcell0.innerHTML). It will return a string. Not an HTML element.
Therefore you can't use .getAttribute or .innerHTML, because you try to apply it on a string. Access your div differently (querySelector or getElementBy...) and you will be able to use those.
You can use jquery:
$("[class='DivOverflowNoWrap']").text();
$("[class='DivOverflowNoWrap']").attr("data-originaltext")
It's pretty simple:
<html><head></head>
<div class="DivOverflowNoWrap Ellipsis" style="width:100%;" data-textwidth="50" data-originaltext="DefaultText" data-ingrid="1">DefaultText</div>
<script>
test();
function test(){
var x=document.getElementsByClassName("DivOverflowNoWrap Ellipsis")[0].getAttribute("data-originaltext");
alert(x);
}
</script>
</html>
I need to write some html with placeholder used for javascript.
ex:
<span><placeholder data-id="42" data-value="abc"/><span>
Later on, a script will access those placeholders and put content in (next to?) them.
<span><placeholder data-id="42" data-value="abc"><div class="Google"><input type="text" value="abc"/></div><span>
But the placeholder tag doesn't exist. What tag can be used? Using < input type="hidden" .../> all over feels wrong.
Creating Custom tag
var xFoo = document.createElement('placeholder');
xFoo.innerHTML = "TEST";
document.body.appendChild(xFoo);
Output:
<placeholder>TEST</placeholder>
DEMO
Note: However creating hidden input fields with unique ID is good practice.
give your span element an id like,
<span id="placeToAddItem"><span>
and then in jQuery,
$('#placeToAddItem').html('<div class="Google"><input type="text" value="abc"/></div>');
or else
var cloneDiv = $('.Google');
$('#placeToAddItem').html(cloneDiv);
Example
The best way to do this, is using <input type='hidden' id="someId" value=""> tags.
Then you can easily access them by using jQuery, and recall the variable or change it.
var value = $("#someId").val(); to get variable or $("#someId").val(value) to change it.
This complete, no jQuery solution allows you to specify the placeholder/replacement html as a string within the element that will be replaced.
EG HTML:
<div data-placeholder="<div class='Google'><input type='text' value='abc'/></div>"></div>
<div data-placeholder="<div class='Boogle'><input type='text' value='def'/></div>"></div>
<div data-placeholder="<div class='Ooogle'><label>with label <input type='text' value='ghi'/></label></div>"></div>
<span data-placeholder="<em>Post JS</em>">Pre JS</span>
<br />
<button id="test">click me</button>
JS:
Use querySelectorAll to select all elements with the attribute 'data-placeholder' (returns a NodeList)
var placeholders = document.querySelectorAll('[data-placeholder]'); //or by ids, classnames, element type etc
Extend the NodeList prototype with a simple 'each' method that allows us to iterate over the list.
NodeList.prototype.each = function(func) {
for (var i = 0; i < this.length; i++) {
func(this[i]);
}
return this;//return self to maintain chainability
};
Extend the Object prototype with a 'replaceWith' method that replaces the element with a new one created from a html string:
Object.prototype.replaceWith = function(htmlString) {
var temp = document.createElement('div');//create a temporary element
temp.innerHTML = htmlString;//set its innerHTML to htmlString
var newChild = temp.childNodes[0];//(or temp.firstChild) get the inner nodes
this.parentNode.replaceChild(newChild, this);//replace old node with new
return this;//return self to maintain chainability
};
Put it all together:
placeholders.each(function(self){
self.replaceWith(self.dataset.placeholder);//the 'data-placeholder' string
});
Another example but here we only replace one specific element with some hard-coded html on click:
document.getElementById("test").addEventListener('click', function() {
this.replaceWith("<strong>i was a button before</strong>");
}, false);
DEMO: http://jsfiddle.net/sjbnn68e/
use the code below :
var x = document.createElement('placeholder');
x.innerHTML = "example";
document.body.appendChild(x);
<li class="catalog-list-item" data-icon="false">
<a href="/items/170893265">
How would I use console.log to log the href /items/IDHERE (IDHERE = 170893265) by using catalog-list-item?
$.get("http://m.roblox.com/Catalog/CatalogSearch?startRow=0&keyword=&filter=Collectibles",
function(Data) {
var test = $(Data).find('.catalog-list-item')
var itemID = test.attr("href");
console.log(itemID);
});
And that won't work for me (the test part does work, not the itemID part though.)
If
<li class="catalog-list-item" data-icon="false">
<a href="/items/170893265">
is the full response, then li.catalog-list-item will be the selected element in $(Data). I.e. $(Data).find('.catalog-list-item') would try to find a .catalog-list-item element inside a .catalog-list-item element, which doesn't work.
You can .filter the selection and then search for the a element(s):
var test = $(Data).filter('.catalog-list-item').find('a');
You left out the a tag, which is the one you're targeting -- the one that has the href attribute you're looking for:
var test = $(Data).find('a'); //<<<<-------
var itemID = test.attr("href");
console.log(itemID);
To get just the id use:
var itemID = test.attr("href").split('/').pop();
you realize the href attribute isn't in the li tag. I suggest you do this
var test = $(Data).find('.catalog-list-item')
var itemID = test.find('a').attr("href")
console.log(itemID)
I am trying to get the value of span from jquery but it shows an errir like this
TypeError: document.getElementById(...) is null
http://localhost:10489/YellowPages/YellowPageHome.aspx?Menu=menu_cat_3594
Line 328
I have a span like this
<div class="RatingAggregate" style="height: 25px; width: 25px; margin: 5px;">
<span id="AvgRt_1<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>">
<%#DataBinder.Eval(Container, "DataItem.Rating")%></span>
</div>
I want to get the value of span like this
var averageRatingValue = document.getElementById('AvgRt_1').innerHTML;
But shows the null error. hOw can i do this as i am trying to learn the jquery.
Firstly, your span has an id which concatenates the dataitem's businessID:
<span id="AvgRt_1<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>">
So the Id would look like: AvgRt_1x where x is your BusinessID
Secondly: you are not using jQuery as you mentioned. Just pure Javascript.
var averageRatingValue = document.getElementById('AvgRt_1').innerHTML;
Thirdly, you will have to specify the correct id either by way of hardcoded value if you know the exact id beforehand, or by way of a variable:
$('#AvgRt_1' + variable).text();
Why don't you just put the <%#DataBinder.Eval(Container, "DataItem.BusinessID")%> in a class?
Then you can do:
var businessId = '<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>';
$('#AvgRt_1.' + businessId).text();
You are doing wrong exactly
var averageRatingValue = document.getElementById('AvgRt_1').innerHTML;
Because you have not the id AvgRt_1 but it is AvgRt_1<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>
So, try this jquery:
var averageRatingValue = $('span [id^=AvgRt_1]').html();
with javascript:
//define var for that
var spanId = '<%#DataBinder.Eval(Container, "DataItem.BusinessID")%>';
var averageRatingValue = document.getElementById('AvgRt_1' + spanId).innerHTML;
You can simply get it like, you can also use Attribute Starts With Selector [name^="value"]
$('span[id^="AvgRt_1"]').text() or or $('span').html()
For Particulr span
$('span #SPANID').text()
i have a table such that each row is like this
<tr>
<td><input/> <img id="foo" src="redMinus.png"/></td>
some more tds
<td> <a onclick="wow('foo',$(this))"></a>
</tr>
I want to find out if the img in the first td has an src that contains "redMinus"
This is what I have but it doesnt seem to be working?
function wow(id, item){
var tr$ = item.parentNode.parentNode;
var details = tr$.find('img[src*="redMinus"]');
}
Any ideas?
Thanks!
You're mixing jQuery with DOM elements.
Change your code to
var details = item.closest("tr").find('img[src*="redMinus"]');
Your parameter is given the name item within your function, but you are trying to use a variable with the name item$ instead. Either rename the parameter or use the correct parameter name in the function.
var same = "redMinus" == $(this).parent('td').prev().children('img').attr('src').substring(0,7);
function wow(id, item){
var src = $('#' + id).attr('src');
var srcIndex = src.indexOf('redMinus');
if(srcIndex >= 0)
// redMinus is present in the string
else
// redMinus is not present in the string
}