I want to use setInterval () to run this JS Fetch script every 2 seconds as my server content changes frequently for art.txt. I can't get anything to work. Thank you for your help.
<!DOCTYPE html>
<html>
<body>
<p id="kdkz"></p>
<script>
let file = 'art.txt';
fetch(file)
.then((x) => x.text())
.then((y) => (document.getElementById('kdkz').innerHTML = y));
setInterval(fetch(), 2000);
</script>
</body>
</html>
You should wrap the fetch into a function.
<!DOCTYPE html>
<html>
<body>
<p id="kdkz"></p>
<script>
let file = 'art.txt';
const handleFetch = () => {
fetch(file)
.then((x) => x.text())
.then((y) => (document.getElementById('kdkz').innerHTML = y));
};
setInterval(() => handleFetch(), 2000);
</script>
</body>
</html>
Related
Go to https://colnect.com/en/forum/app!/help/faq with Firefox, click any link and nothing happen.
Do the same in Chrome and you will be moved somewhere.
Is it Firefox issue or something else?
Code is:
The times are not correct!
<dl class="faq">
<dt id="f1r2"><strong>The times are not correct!</strong></dt>
<dd>It is possible the time displayed is from a ...</dd>
</dl>
UPD: simplified sample, there are 2 pages, page with iframe:
<!-- firefox-in-iframe.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Firefox in iframe</title>
</head>
<body>
<h1>Test TOC in Firefox</h1>
<iframe id="demo" src="firefox-in-iframe-w3.html" frameborder="1" style="width:100%; height:100%"></iframe>
</body>
</html>
and page with HMTL content from https://www.w3.org/TR/html401/struct/links.html with JavaScript added to align pages heights:
<script>
parent.document.getElementById('demo').addEventListener('load', (e) => {
e.target.style.height = Math.max(document.body.offsetHeight, document.body.scrollHeight) + 'px';
});
</script>
Here is old enough bug, its discussion and demo page mentioned there. Also one of the possible solutions are mentioned ibid. Сode could be like:
parent.document.getElementById('demo').addEventListener('load', (e) => {
// Align iframe and page heights. Iframe scrollbar can be hidden with CSS
e.target.style.height = Math.max(document.body.offsetHeight, document.body.scrollHeight) + 'px';
if (!(typeof InstallTrigger !== 'undefined')) return; // Not Firefox, do nothing
const iFrameOffset = e.target.offsetTop;
document.querySelectorAll('a[href^="#"]').forEach(el => {
const targetId = el.href.substring(el.href.indexOf('#') + 1);
el.addEventListener('click', () => {
const target = document.getElementById(targetId) || document.querySelector(`[name='${targetId}']`);
window.parent.scrollTo(0, iFrameOffset + target.offsetTop)
})
})
});
I get some data from JSONP file by below code:
$.getJSON('http://static.eska.pl/m/playlist/channel-108.jsonp?callback=?' );
function jsonp(data) {
document.getElementById("artist").innerHTML = data[0].artists[0].name;
document.getElementById("title").innerHTML = data[0].name;
};
<!DOCTYPE html>
<head>
<title>JSONP EskaRock </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="artist"></div>
<div id="title"></div>
</body>
</html>
It works, but I need refresh data every 10 sec. I use setInterval function but console FireFox return error "ReferenceError: jsonp is not defined
(...channel-108.jsonp:1:1)". My code with setInterval:
setInterval( function () {
$.getJSON('http://static.eska.pl/m/playlist/channel-108.jsonp?callback=?' );
function jsonp(data) {
document.getElementById("artist").innerHTML = data[0].artists[0].name;
document.getElementById("title").innerHTML = data[0].name;
};
}, 10000)
<!DOCTYPE html>
<head>
<title>JSONP EskaRock </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="artist"></div>
<div id="title"></div>
</body>
</html>
Where's the problem?
You are declaring the function inside the setInterval move it outside and it will work
function jsonp(data) {
document.getElementById("artist").innerHTML = data[0].artists[0].name;
document.getElementById("title").innerHTML = data[0].name;
};
setInterval(function() {
$.getJSON('http://static.eska.pl/m/playlist/channel-108.jsonp?callback=?');
}, 10000)
<!DOCTYPE html>
<head>
<title>JSONP EskaRock </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="artist"></div>
<div id="title"></div>
</body>
This is index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="node_modules/oclazyload/dist/ocLazyLoad.js"></script>
<script src="testApp.js"></script>
</head>
<body>
<h3>Lazy load succeded if you can see 'Hello world' below</h3>
<div id="example" ng-app="LazyLoadTest" ng-controller="TestController">
<button ng-click="fun()">Start</button>
</div>
<script>
angular.module("LazyLoadTest", ["oc.lazyLoad"])
.controller("TestController", function($scope, $ocLazyLoad, $compile) {
$scope.fun=function(MyService){
$ocLazyLoad.load("testApp.js").then(function() { //loading a module
console.log('loaded!!'+$scope);
var el, elToAppend,elToAppend2;
elToAppend = $compile('<say-hello to="world"></say-hello>')($scope); //appending it to div
el = angular.element('#example');
console.log(el);
el.append(elToAppend)
//el.append(elToAppend2);
}, function(e) {
console.log('errr');
console.error(e);
})
}
});
</script>
</body>
</html>
The above code is the module which is to be loaded at run time. Able to load Directive but need some help to load service.
How to laxyload the service defined in testApp.js?
Please help me out with this
I'm using nw.js to make an exe file. I can set it to fullscreen mode but how can I escape it using the escape key? People are suggesting the below code but which file do I put this in?
var gui = window.requireNode('nw.gui');
gui.App.registerGlobalHotKey(new gui.Shortcut({
key: "Esc",
active: function () {
gui.Window.get().leaveFullscreen();
})
}));
Officially the following way is suggested in the documentation:
http://docs.nwjs.io/en/latest/For%20Users/FAQ/
You have to register a global hotkey:
nw.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
// decide whether to leave fullscreen mode
// then ...
nw.Window.get().leaveFullscreen();
}
}));
You can put this snippet at the beginning of Your app.
<!DOCTYPE html>
<html>
<head>
<script>
nw.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
// decide whether to leave fullscreen mode
// then ...
nw.Window.get().leaveFullscreen();
}
}));
</script>
</head>
<body>
</body>
</html>
you can use this to exit firescreen
<!DOCTYPE html>
<html>
<head>
<script>
var gui = require('nw.gui');
gui.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
// decide whether to leave fullscreen mode
// then ...
nw.Window.get().leaveFullscreen();
}
}));
</script>
</head>
<body>
</body>
</html>
And this to toggle firescreen:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var gui = require('nw.gui');
gui.App.registerGlobalHotKey(new gui.Shortcut({
key: "F11",
active: function () {
// decide whether to leave fullscreen mode
// then ...
gui.Window.get().toggleFullscreen();
}
}));
</script>
</body>
</html>
you can use this to exit fullscreen
<!DOCTYPE html>
<html>
<head>
<script>
var gui = require('nw.gui');
gui.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
// decide whether to leave fullscreen mode
// then ...
gui.Window.get().leaveFullscreen();
}
}));
</script>
</head>
<body>
</body>
</html>
And this to toggle fullscreen:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var gui = require('nw.gui');
gui.App.registerGlobalHotKey(new gui.Shortcut({
key: "F11",
active: function () {
// decide whether to leave fullscreen mode
// then ...
gui.Window.get().toggleFullscreen();
}
}));
</script>
</body>
</html>
I wrote the following html file:
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<title></title> </head> <body>
<h1> HELLO WORLD </h1>
<button type="button"> CLICK HERE</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('button').click(function() {
$('h1').text("Thank you");
var ans = prompt("Please type your age");
if (ans > 80) {
$('h1').text("You're old");
}
})
</script> </body> </html>
I want to test that once the user clicks on the button and gives an age older than 80, the page behaves as expected and the h1-tag text changes to "You're old".
My question is how to write a Jasmine spec to test this feature?
You need to use "Spy" object to intercept "prompt" function and return your own value. After check the caption text. The code may look like ...
deascribe("test inline function:", function() {
it("caption should be 'too old' for age of more than 80", function () {
spyOn(window, 'prompt').and.returnValue(81);
$('button').click();
expect($('h1').text()).toBe("You're old");
});
});