Long after a page has loaded (e.g. a minute or more), we can receive push messages which would cause us to append new content. After doing this when we query using Jquery hash selector it never returns the newly added content. In all cases, the length is always zero. We can see the content, but the selector returns nothing.
var section = '<section id="NewSection">Hello</section>';
$('.container').append(section);
if ($('#NewSection').length == 0)
{
alert('This should not be zero at this point... Why is it?');
}
Is there something we need to do in order to enable JQuery to find the appended content after it is appended?
Thou shall not cast when not necesairly.
You're casting to boolean using !, See this cold run:
len = $('#NewSection').length
CASE len = 0
then !len = true
if(1){
// code excecutes
}
CASE len = 1
then !len = false
if(0){
// no code executes
}
In order work, you should rework your condition.
// #updated!
var section = '<section id="NewSection">Hello</section>';
$('.container').append(section);
if ($('#NewSection').length > 0) // meaning one or MORE than one element got selected
{
alert('I should have found this!');
}
Here is a jsfiddle
Related
I have a problem with selecting dynamically-added elements, each with dynamically-defined ID; script always returns null when using getElemendById.
I want the script to first check, if element with certain ID already exists within the DOM, and if not - create one, if it does - do something else.
My code looks like this:
document.addEventListener('DOMContentLoaded', function () {
//define variables
var playersOnField = document.querySelector('.players');
//using timeBar as indicator of current time frame
var timeBar = document.querySelector('#time');
//its maximum value needs to be adjusted to the number of the frames we have
timeBar.setAttribute("max", data.player_positions.length);
//display the players position for current frame
positionPlayers = function() {
time = timeBar.value;
currentFrame = data.player_positions[time];
//check if DOM element representing each player of current frame already exists, if not - create it
for (var i = 0; i < currentFrame.length; i++) {
var playerId = currentFrame[i][0];
//ID's start with number, so they require special unicode notation
if (!!document.getElementById(`#\\3${playerId} `) == false) {
console.log('no element, let\'s create one');
var newPlayer = document.createElement('div');
newPlayer.id = `${playerId}`;
playersOnField.appendChild(newPlayer);
} else {
console.log('element already exists!');
}
}
}
//every time the bar changes its postion (and therefore its value) it should trigger the action to set up the players in the current position on the field
timeBar.addEventListener('change', positionPlayers);
timeBar.addEventListener('input', positionPlayers);
})
But the function is always returning false, and creating dozens od div's of the same ID, as getElementById never finds any of those newly-appended elements. How can I avoid this happening, preferably using vanilla JS?
You seem to have an extra space in the id string you are testing for. Since #{...} is an evaluated value, it shouldn't be in quotes in the first place.
Also, why use the back-tick string syntax here?
if (!!document.getElementById(`#\\3${playerId} `) == false) {
And, getElementById() already knows to look for id's so adding the # is going to search for elements that actually start with #.
Finally, if the element with that id does exist, it will return a "truthy" value that when converted to a Boolean, will convert to true, so there is no need to force a Boolean conversion (with !!) and then check to see if that is false.
That line can be rewritten to:
if (!document.getElementById(${playerId})) {
So I have a function which is meant to calculate whether or not a coupon code should be applied. The function checks the value of several divs and forms on the page to see if the code should be automatically applied.
However it isn't working. I only want to run the function if the url contains checkout (complex cms issue make me do it this way) and I wanted to know if anyone could spot any errors in the code as to why it isn't working. If anyone could help me out, that would be really appreciated.
The code I am using is as follows:
<script>
var totalValue = document.getElementsByClassName("wsite-price").innerText;
var couponHere = document.getElementsByClassName("wsite-coupon-input");
if (-1 != location.pathname.indexOf('checkout')) {
if (totalValue > 240) {
codeHere.value = "COUPONCODEDISCOUNT";
document.getElementById('apply-coupon-button').click();
window.alert("sometext");
}
}
</script>
getElementsByClassName returns an HTMLCollection, so innerText most likely isn't a property on an HTMLCollection object. You can use the .item() method with an index to get the element, or use the querySelector method to get the single item.
var totalValue = document.getELementsByClassName('wsite-price');
if (totalValue.length > 0) {
var val = totalValue.item(0).innerText;
// ...
}
I am currently trying to make a list, using javascript and jquery that returns a string of keywords as shown here: keyword+keyword+keyword+keyword
I am attempting to do this by adding a class 'active' when a keyword is clicked as shown in the code below, then checking whether it is active, if it is, add it to a list with an additional + sign (except for the first element, limited by the counter), however whenever I click on an item 2 times consecutively, it is successfully added to the list however is not deleted from it, yet the counter is added and subtracted per usual, and the console log reports the class changing.
The code is below;
$("ul.cats li, ul.colours li ").click(function(){
$(this).toggleClass( 'active');
});
var taglist = '';
var tagcounter = 1;
$("ul.cats li.tag").click(function(){
var tag = $(this).attr("list-data");
if ($(this).hasClass('active')) {
if (tagcounter <= 0){
taglist += '+';
}
taglist += tag;
tagcounter -= 1;
console.log('Active');
} else {
var tag2 = '+' + tag;
taglist = taglist.replace(tag2," ");
tagcounter += 1;
console.log('inactive');
}
console.log(taglist, 'Taglist', tagcounter);
});
From this I believe I should get a list of keyword1+keyword2+keyword3 however whenever an item is clicked twice in succession, (keyword1 is rendered active and inactive consecutively) the keyword is not deleted yet the counter is incremented and the class is rendered inactive.
Using an example keyword of 'light', this is what is returned by the console;
[Log] Active
[Log] Light Taglist 0
[Log] inactive
[Log] Light Taglist 1 (wordpress, line 237)
This shows that the class checks and if statement is functioning properly yet the replace function is not.
Please can someone provide a solution to this, I will be eternally grateful!
The problem is with the check of tagcounter <= 0.
When you are checking that for the first time, tagcounter is still 1. You decrement it later. Hence the "+" never gets appended. Hence when you are trying to remove "+Light" it doesn't work because the "+" is not there in the taglist.
Move the decrement code tagcounter -=1 above the tagcounter check.
tagcounter -= 1;
if (tagcounter <= 0){
taglist += '+';
}
taglist += tag;
It works fine. Here is a working demo http://jsfiddle.net/gqgL3dgk/
This would append a "+" in the beginning of your taglist. You can get rid of that extra "+" sign by using substring method.
taglist = taglist.substring(1); //includes all characters except the 0th
Recommendation
Since you have to maintain a list, use a data structure that is more suited for a list (i.e. an Array) and convert that to a "+" separated string when you need it.
You can keep pushing/pulling tags from the array and convert it to a "+" separated string using the join() method.
Working fiddle here http://jsfiddle.net/gqgL3dgk/1/
This will remove your dependency on tagcounter (because the array length can get you that). And adding and removing elements is super simple.
The first argument of .replace() needs to be a regular expression. You can generate it from a string by using new RegExp():
taglist = taglist.replace(new RegExp(tag2)," ");
Edit: Ooops - a string is valid as a first agrument. It is not treated like a regular expression, but in this example it doesn't need to be.
Is it possible to use Javascript in Safari/Firefox/Chrome to search a particular div container for a given text string. I know you can use window.find(str) to search the entire page but is it possible to limit the search area to the div only?
Thanks!
Once you look up your div (which you might do via document.getElementById or any of the other DOM functions, various specs here), you can use either textContent or innerText to find the text of that div. Then you can use indexOf to find the string in that.
Alternately, at a lower level, you can use a recursive function to search through all text nodes in the window, which sounds a lot more complicated than it is. Basically, starting from your target div (which is an Element), you can loop through its childNodes and search their nodeValue string (if they're Texts) or recurse into them (if they're Elements).
The trick is that a naive version would fail to find "foo" in this markup:
<p><span>fo</span>o</p>
...since neither of the two Text nodes there has a nodeValue with "foo" in it (one of them has "fo", the other "o").
Depending on what you are trying to do, there is an interesting way of doing this that does work (does require some work).
First, searching starts at the location where the user last clicked. So to get to the correct context, you can force a click on the div. This will place the internal pointer at the beginning of the div.
Then, you can use window.find as usual to find the element. It will highlight and move toward the next item found. You could create your own dialog and handle the true or false returned by find, as well as check the position. So for example, you could save the current scroll position, and if the next returned result is outside of the div, you restore the scroll. Also, if it returns false, then you can say there were no results found.
You could also show the default search box. In that case, you would be able to specify the starting position, but not the ending position because you lose control.
Some example code to help you get started. I could also try putting up a jsfiddle if there is enough interest.
Syntax:
window.find(aStringToFind, bCaseSensitive, bBackwards, bWrapAround, bWholeWord, bSearchInFrames, bShowDialog);
For example, to start searching inside of myDiv, try
document.getElementById("myDiv").click(); //Place cursor at the beginning
window.find("t", 0, 0, 0, 0, 0, 0); //Go to the next location, no wrap around
You could set a blur (lose focus) event handler to let you know when you leave the div so you can stop the search.
To save the current scroll position, use document.body.scrollTop. You can then set it back if it trys to jump outside of the div.
Hope this helps!
~techdude
As per the other answer you won't be able to use the window.find functionality for this. The good news is, you won't have to program this entirely yourself, as there nowadays is a library called rangy which helps a lot with this. So, as the code itself is a bit too much to copy paste into this answer I will just refer to a code example of the rangy library that can be found here. Looking in the code you will find
searchScopeRange.selectNodeContents(document.body);
which you can replace with
searchScopeRange.selectNodeContents(document.getElementById("content"));
To search only specifically in the content div.
If you are still looking for someting I think I found a pretty nice solution;
Here it is : https://www.aspforums.net/Threads/211834/How-to-search-text-on-web-page-similar-to-CTRL-F-using-jQuery/
And I'm working on removing jQuery (wip) : codepen.io/eloiletagant/pen/MBgOPB
Hope it's not too late :)
You can make use of Window.find() to search for all occurrences in a page and Node.contains() to filter out unsuitable search results.
Here is an example of how to find and highlight all occurrences of a string in a particular element:
var searchText = "something"
var container = document.getElementById("specificContainer");
// selection object
var sel = window.getSelection()
sel.collapse(document.body, 0)
// array to store ranges found
var ranges = []
// find all occurrences in a page
while (window.find(searchText)) {
// filter out search results outside of a specific element
if (container.contains(sel.anchorNode)){
ranges.push(sel.getRangeAt(sel.rangeCount - 1))
}
}
// remove selection
sel.collapseToEnd()
// Handle ranges outside of the while loop above.
// Otherwise Safari freezes for some reason (Chrome doesn't).
if (ranges.length == 0){
alert("No results for '" + searchText + "'")
} else {
for (var i = 0; i < ranges.length; i++){
var range = ranges[i]
if (range.startContainer == range.endContainer){
// Range includes just one node
highlight(i, range)
} else {
// More complex case: range includes multiple nodes
// Get all the text nodes in the range
var textNodes = getTextNodesInRange(
range.commonAncestorContainer,
range.startContainer,
range.endContainer)
var startOffset = range.startOffset
var endOffset = range.endOffset
for (var j = 0; j < textNodes.length; j++){
var node = textNodes[j]
range.setStart(node, j==0? startOffset : 0)
range.setEnd(node, j==textNodes.length-1?
endOffset : node.nodeValue.length)
highlight(i, range)
}
}
}
}
function highlight(index, range){
var newNode = document.createElement("span")
// TODO: define CSS class "highlight"
// or use <code>newNode.style.backgroundColor = "yellow"</code> instead
newNode.className = "highlight"
range.surroundContents(newNode)
// scroll to the first match found
if (index == 0){
newNode.scrollIntoView()
}
}
function getTextNodesInRange(rootNode, firstNode, lastNode){
var nodes = []
var startNode = null, endNode = lastNode
var walker = document.createTreeWalker(
rootNode,
// search for text nodes
NodeFilter.SHOW_TEXT,
// Logic to determine whether to accept, reject or skip node.
// In this case, only accept nodes that are between
// <code>firstNode</code> and <code>lastNode</code>
{
acceptNode: function(node) {
if (!startNode) {
if (firstNode == node){
startNode = node
return NodeFilter.FILTER_ACCEPT
}
return NodeFilter.FILTER_REJECT
}
if (endNode) {
if (lastNode == node){
endNode = null
}
return NodeFilter.FILTER_ACCEPT
}
return NodeFilter.FILTER_REJECT
}
},
false
)
while(walker.nextNode()){
nodes.push(walker.currentNode);
}
return nodes;
}
For the Range object, see https://developer.mozilla.org/en-US/docs/Web/API/Range.
For the TreeWalker object, see https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
var elements = [];
$(document).find("*").filter(function () {
if($(this).text().contains(yourText))
elements.push($(this));
});
console.log(elements);
I didn't try it, but according the jQuery documentation it should work.
Here is how I am doing with jquery:
var result = $('#elementid').text().indexOf('yourtext') > -1
it will return true or false
Maybe you are trying to not use jquery...but if not, you can use this $('div:contains(whatyouarelookingfor)') the only gotcha is that it could return parent elements that also contain the child div that matches.
I am trying to create a function that given a divid, and a list of classes, will then do some text replacing inside them.
Having learned of how Firefox Dom is handling text nodes differently, I read that I had to use javascript to loop through the elements, sibling to nextSibling.
The last obstacle I had in my script, of which you see a small portion of, is getting the classname. I need the class name so that I can filter down what content get's text replaced.
Having looked all the answers, and with the help of a co-worker named Ryan at work, we have redone this in jquery.
$(divid).find(".status_bar").each( function() {
var value = $.trim($(this).text());
// if value is not defined thru browser bugs do not replace
if (typeof(value) != 'undefined') {
// it is a text node. do magic.
for (var x = en_count; x > 0; x--) {
// get current english phrase
var from = en_lang[x];
// get current other language phrase
var to = other_lang[x];
if (value == from) {
console.log('Current Value ['+value+'] English ['+from+'] Translation ['+to+']');
value = to;
$(this).attr('value', to);
}
}
}
});
This currently works in all areas, except in the replacing of text.
The reason I had originally with doing this in jQuery, had to be not sure I could loop thru elements, and avoid the problem with firefox and text nodes.
I am doing a loop of all elements inside a div, and I now need to get the classname of the element that I am looping by.
Then i can check if the current element's class is one, I need to do something with...
// var children = parent.childNodes, child;
var parentNode = divid;
// start loop thru child nodes
for(var node=parentNode.firstChild;node!=null;node=node.nextSibling){
var myclass = (node.className ? node.className.baseVal : node.getAttribute('class'));
}
But this code for getting the classname only get's null values.
Any suggestions?
For those of you who are trying to figure out what the whole point is, read this JavaScript NextSibling Firefox Bug Fix I have code that does my language translation that works in Google Chrome and IE. But when I use it in Firefox, and try to translate div content after ajax has loaded it, it fails because of the whitespace issue.
I really don't have a preference of jQuery or Pure Javascript, I just want a working solution.
Thank you all for being patient. I personally thought I was extremely clear in my description, I apologize if it wasn't. I wasn't trying to be obscure or make it difficult to get help. But please don't insult me, by implying I am trying to make it unclear.
Thanks.
Hm... You have jQuery but don't use it?
$(divid).children(".yourSpecialClassName").each( function() {
doSomethingWith(this);
});
To get the CSS class attribute value, this will do:
$(divid).children().each( function() {
alert(this.className);
});
Based on the function you posted now, you want this:
$(divid).find(".status_bar").each( function() {
$(this).text( function(i, text) {
var x = $.inArray(en_lang, $.trim(text));
if (x > -1) {
console.log('Current Value ['+text+'] English ['+en_lang[x]+'] Translation ['+other_lang[x]+']');
return other_lang[x];
}
return text;
});
});
And please, don't ever use "do magic" as a comment again. This is incredibly lame.
EDIT. This can be made much more efficient (superfluous console.log() removed):
$(divid).find(".status_bar").each( function() {
// prepare dictionary en_lang => other_lang
var dict = {};
$.each(en_lang, function(x, word) { dict[word] = other_lang[x]; });
$(this).text( function(i, text) {
var t = $.trim(text);
return (t in dict) ? dict[t] : text;
});
});
if you are using jquery you can do this:
$("#myDiv").find("*").each(
function(){
var myclass = $(this).attr("class");
}
);
Your sample code doesn't make sense.
$(this).attr('value', to);
'value' is an attribute of the tag, not the text content.
Did you really mean to do this instead?
$(this).text(to);
Also, you've re-edited your question, but you're still trying to loop through the child nodes using non-jQuery methods. You said "The last obstacle I had in my script, of which you see a small portion of, is getting the classname. I need the class name so that I can filter down what content get's text replaced."
If you are using jQuery it is completely unnecessary to loop through anything to get a class name. You simply have to use a proper selector in the first place.
$(divid).find(".status_bar.replaceme").each( function() {
// .replaceme is whatever class you're using for the stuff you want to change
// .status_bar.replaceme matches all elements with BOTH status_bar and replaceme classes
var value = $.trim($(this).text());
// if value is not defined thru browser bugs do not replace
if (typeof(value) != 'undefined') {
// it is a text node. do magic.
// NOTE: The following is inefficient but I won't fix it.
// You're better off using an associative array
for (var x = en_count; x > 0; x--) {
// get current english phrase
var from = en_lang[x];
// get current other language phrase
var to = other_lang[x];
if (value == from) {
console.log('Current Value ['+value+'] English ['+from+'] Translation ['+to+']');
// value = to; <-- useless, get rid of it.
$(this).text(to);
// or $(this).html(to);
}
}
}
});