I have two scripts. One asks my backend about new data in database and if there is something new, add this to div with id 'box'. In second script I want to monitorize this and if something is changed in this div, I want to call my function. How to do that?
$(document).ready(function(){
refreshTable();
});
function refreshTable(){ //loading data to div
$('#messbox').load('getData.php', function(){ setTimeout(refreshTable, 1000); });
}
function scroll(){ //function to call
$("#messbox").scrollTop($("#messbox")[0].scrollHeight);
}
You can use a MutationObserver to listen for changes in the element's childList:
const targetNode = document.getElementById('target');
const callback = function(mutationsList, observer) {
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
myFunction()
}
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, {childList: true});
function myFunction(){
console.log("Change!")
}
<div id="target"></div>
<button onclick="target.innerHTML += '<p>Hello World!</p>'">Add something to #target</button>
Related
While I'm observing a web-page there is a button that after I click an element appears.
I already have the id of that element, what I want to do in a single code:
press the button, wait for the specific element to appear (become defined), perform an action.
What I tried to do is this:
btn = document.getElementById("btn");
btn.click();
while(document.getElementById("id") == undefined){
continue;
}
console.log("element is loaded!!");
That code didn't work for me (the browser got stuck).
I thought also to pause the code for specific time that it gets to the element to appear (sleep), but is there a better way?
Again, I don't have access to the code of the web-page, so I can't rais a flag when this element is loaded.
Try using a Promise:
btn = document.getElementById("btn");
btn.click();
new Promise((resolve, reject) => {
while (document.getElementById("id") == undefined) {}
resolve();
}).then(() => {
console.log("element is loaded!!");
});
globally, if you want to check if the variable is set :
if(variable)
{
// Do stuff
}
You could set an interval
btn = document.getElementById("btn");
btn.click();
let intv = setInterval(() => {
if (!!document.getElementById("id")) {
console.log('the element is here');
clearInterval(this);
}}, 200);
}
console.log("element is loaded!!");
Use a MutationObserver to check whether the element exists everytime a change in the DOM occurs:
let observer = new MutationObserver(() => document.getElementById('id') ? console.log("loaded") : '');
observer.observe(document.body, {
childList: true
});
Demo:
let observer = new MutationObserver(() => document.getElementById('id') ? console.log("loaded") : '');
observer.observe(document.body, {
childList: true
});
/* below is simply for demonstration */
document.getElementById("btn").addEventListener('click', () => {
setTimeout(() => {
document.body.appendChild(Object.assign(document.createElement("p"), {id: 'id',innerHTML: 'Hello World!'}));
}, 1000)
})
<button id="btn">Click to add an element in 1 second</button>
Your browser is probably crashing because the code is executed too many times in the while loop.
You could try using MutationObserver to listen for change in DOM.
Or
Add use setInterval instead of the while loop.
let interval;
function handleClick() {
// add the new element after 5 seconds
const divNode = document.createElement('div');
divNode.id = 'newElement';
window.setTimeout(() => {
document.body.append(divNode);
}, 5000);
// every second check for the element
interval = window.setInterval(() => {
checkIfElementIsInDom();
}, 1000);
}
function checkIfElementIsInDom() {
console.log('Checking...');
const newNode = document.getElementById('newElement');
if (newNode) {
console.log('completed!');
// stop the interval
clearInterval(interval);
}
}
const buttonNode = document.getElementById('button');
buttonNode.addEventListener('click', handleClick.bind(this));
<button type="button" id="button">Click</button>
Here is an example of using a MutationObserver
const targetNode = document.querySelector('.test');
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
// Check for our new item
const itm = document.querySelector('.itm');
if (itm) {
console.log('we found our item');
observer.disconnect();
}
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
document.querySelector('button').addEventListener('click', () => {
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
setTimeout(() => {
// Add an item.
document.querySelector('.test').innerHTML = '<div class="itm">Here it is</div>';
}, 5000);
});
<section>
<div>
<button>Click Me</button>
</div>
</section>
<section class="test">
</section>
I'm adding a new element dynamically via JQuery, with code like the below:
$('#example').after("<p class='xx'></p>")
Upon this code being called and a "xx" element being added, I'd like to run some other code. How can I 'listen' and pick up when this event happens?
Thanks
You can use Mutation Observer for this.
The demo below is a simple quick adaptation of the example in reference.
$(document).ready(function(){
var targetNode = document.getElementById('some-id');
var config = { attributes: true, childList: true, subtree: true };
var callback = function(mutationsList, observer) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
}
};
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);
$('#example').after("<p class='xx'>I am a paragraph inserted by a script.</p>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some-id">
<p id="example">I'm a static paragraph.</p>
</div>
I have a div, which will contain dropdowns and these dropdowns are created dynamically by the user on the click oo a button which is kept outside this div.
So what I need to achieve here is I wanna display 'No filter applied' when there are no dropdowns and remove that 'No filter applied' while there are dropdowns present.
I tried this scenario through addEventListener but I am not sure what action needs to implement for this scenario?
document.addEventListener("DOMContentLoaded", function(event) {
var activities = document.getElementById("dvContainer");
activities.addEventListener("change", function() {
if (activities.childElementCount > 0) {
activities.classList.add("displayZero");
} else {
activities.classList.remove("displayZero");
}
//console.log('ajay');
});
});
function AddDropDownList() {}
<input type="button" id="btnAdd" onclick="AddDropDownList()" value="Add Filter" />
<div id="dvContainer"><span>No Filters applied.</span></div>
This is my try, thanks in advance.
According to what you mentioned, you have a button that with click it, you add dropdowns dynamically.
so you don't need any extra event!!
in your button's click function:
yourButton.onclick=function(){
//..... do somethings similar adding dropdowns
activities.classList.add("displayZero");
};
And where you remove dropdown:
activities.classList.remove("displayZero");
Currently, I can think of only 2 ways to resolve:
The Easiest solution is first to create update function then call it from init of dom and then in the AddDropDownList. E.g.
function update() {
if (activities.childElementCount > 0) {
activities.classList.add("displayZero");
} else {
activities.classList.remove("displayZero");
}
}
window.onload = function() {
update();
}
function AddDropDownList() {
//Put Your code as you have written and then add
update();
}
Use Mutation Observer
window.onload = function() {
// Select the node that will be observed for mutations
var targetNode = document.getElementById('dvContainer');
// Options for the observer (which mutations to observe)
var config = {
attributes: true,
childList: true,
subtree: true
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
}
function AddDropDownList() {
}
// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
for (var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
if (activities.childElementCount > 0) {
activities.classList.add("displayZero");
} else {
activities.classList.remove("displayZero");
}
} else if (mutation.type == 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
Hi,
I need to execute a javascript function once as soon as an element with a given class appears on the code (the element will be generated by another script).
This is my function:
play(sound);
the element would appear inside this:
<div id="canvas">
The element would look like this:
<span class="sound">sound name</span>
where "sound name" will determine the argument for play();
how can this be done with javascript?
Thank you.
You can use a You could use a MutationObserver as shown below.
The second argument to .observe(), MutationObserverInit, is important:
In the options, use childList: true if the span will only be added as a direct child. subTree: true if it can be at any level down below #canvas.
From the docs:
childList: Set to true if additions and removals of the target node's child elements (including text nodes) are to be observed.
subtree: Set to true if mutations to target and target's descendants are to be observed.
$("#go").click(function () {
$("#canvas").append($('<span class="sound">sound name</span>'));
});
function play(n) { alert('playing '+ n); }
var obs = new MutationObserver(function(mutations, observer) {
$.each(mutations, function (i, mutation) {
var addedNodes = $(mutation.addedNodes);
var selector = "span.sound"
var spanSounds = addedNodes.find(selector).addBack(selector); // finds either added alone or as tree
spanSounds.each(function () { // handles any number of added spans
play($(this).text());
});
});
});
obs.observe($("#canvas")[0], {childList: true, subtree: true});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas"></div>
<button id="go">Add span to canvas</button>
Using plain JavaScript
The code is a little less compact, but it is definitely doable:
document.getElementById("go").addEventListener('click', function () {
var s = document.createElement('span');
s.innerText = 'sound name';
s.classList.add('sound')
document.getElementById('canvas').appendChild(s);
});
function play(n) { alert('playing '+ n); }
var obs = new MutationObserver(function(mutations, observer) {
for(var i=0; i<mutations.length; ++i) {
for(var j=0; j<mutations[i].addedNodes.length; ++j) {
var addedNode = mutations[i].addedNodes[j];
//NOTE: if the element was added as child of another element, you would have to traverse
// the addedNode to find it. I recommend the jQuery solution above if that's the case
if(addedNode.tagName == "SPAN" && addedNode.classList.contains("sound")) {
play(addedNode.innerText);
}
}
}
});
obs.observe(document.getElementById('canvas'), {childList: true, subtree: true});
<div id="canvas"></div>
<button id="go">Add span to canvas</button>
You could probably try onload event
You need a listener to detect the DOM change, MutationObserver
// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');
// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };
// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type == 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();
I have a function that should wait for some text to change before it returns a value:
function getElementText() {
while(isLoading()) {
}
return $('#element').text();
}
function isLoading() {
return $('#element')[0] &&
$('#element').text().indexOf('Loading') >= 0;
}
However I think the empty while is not a good option (will it block the event loop?)
No need of jQuery or any other external library, you can simply use MutationObserver: https://developer.mozilla.org/en/docs/Web/API/MutationObserver
Here a simple example, you will have a notice of type characterData when your text changes (after 5 seconds in my example):
// select the target node
var target = document.getElementById('some-id');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true, attributes: true, subtree: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
// later, you can stop observing
//observer.disconnect();
setTimeout(function() {
target.innerText = 'Changed text!';
}, 5000);
<div id="some-id">
AAA
</div>
Remove from the config of the observer all the properties you don't need to spy for changes
Elegant way with rxjs:
var source = document.getElementById('source');
var target = document.getElementById('target');
Rx.Observable.fromEvent(source, 'keyup')
.filter( (e) => e.target.value === 'Admin' )
.subscribe( () => target.innerText = "Matched." );
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.min.js"></script>
<input id="source" /> <strong>input 'Admin' to trigger</strong>
<p id="target">Not match.</p>
The DOMSubtreeModified event will be triggered when a change occurs in the element, so you can use that to detect if the text is loaded.
You can use a callback function to return the value when it has loaded. Or even better: (jQuery) promises!
var element = document.getElementById('element');
function isLoading() {
return element.innerText.indexOf('Loading') >= 0;
}
function getElementText() {
var def = $.Deferred();
if (!isLoading()) {
def.resolve(element.innerText);
return def.promise();
}
$(element).on('DOMSubtreeModified', function () {
if (!isLoading()) {
def.resolve(element.innerText);
}
});
return def.promise();
}
getElementText().then(function (text) {
// Text is loaded!
alert(text);
});
// Load text after 3 seconds for demonstration
setTimeout(function () {
element.innerText = 'Changed!';
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element">Loading</div>