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>
Related
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 trying-out qUnit for the first time but can't get any tests to run. I created an HTML file added links to the qunit CSS and JavaScript files but when I call test nothing happens. The test run states "0 tests of 0 passed, 0 failed". Any ideas? Here's the source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test("a basic test example", function() {
ok( true, "this test is fine" );
});
});
</script>
</head>
<body>
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
You need to have a html file like this
<!DOCTYPE html>
<html>
<head>
<title>Test title</title>
<link href="../../Content/qunit.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../../Scripts/qunit.js" type="text/javascript"></script>
<script src="yourtestfile.js" type="text/javascript"></script>
</head>
<body>
<h1 id="qunit-header">Test title</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar">
</div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>
<div id="qunit-fixture">
<div id="container"></div>
</div>
</body>
</html>
Make a seperate js file which contains your tests. The file should look like
(function ($) {
module("Your module name", {
beforeEach: function () {
//your setup code goes here
},
afterEach: function () {
//your teardown code goes here
}
});
test("This is your first test", function (assert) {
assert.ok(true, "this test passed");
});
})(jQuery);
And include this to your html page.
And simply view the html page in a browser.
I warn you, qunit is addictive! :)
i have script like this....
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="bbbbb" />
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<title>for testing works</title>
<style>
div{
height: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('div').click(function(){
$(document).load('load.html');
} );
});
</script>
</head>
<body>
<div id="init">Click Me</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</body>
</html>
in load.html i have a paragraph with with dummy content.
why this script is not changing my content of page...
loading a document object inside other is allowed or not?
You should change $(document).load('load.html'); to $('body').load('load.html');:
$(document).ready(function()
{
$('div').click(function(){
$('body').load('load.html');
return false;
});
});
i finished my app but when i test it on the other internet browsers, there was a problem
i will add my code. i couldnt see the error.as i said it works on opera but not in firefox :/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/tr_TR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}
());
function lget(idd){
FB.api('/'+idd, function(response) {
document.getElementById(idd+"_a").innerHTML ="<a href='" + response.link + "' id='"+idd+"_und' style='color:#12566C;font-size:14px;' onmouseover=document.getElementById('"+idd+"').style.textDecoration=underline; onmouseout=document.getElementById('"+idd+"').style.textDecoration=none; target='_blank'><b>" + response.name + "</b></a>";
});
}
</script>
<div style="padding-left:6px;"><center>
<div id="525864081_a" ></div>
<script type="text/javascript">
lget(525864081);
</script>
<div id="534018674_a" ></div>
<script type="text/javascript">
lget(534018674);
</script>
</div>
</body>
</html>
You are loading the Facebook JS SDK in async mode and thus the FB object is not ready when you call it inside lget, the async loading occurs after your calls to lget and even after the onload event in Firefox.
Try not loading the code asynchronously and note that it is working fine
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});
function lget(idd){
FB.api('/'+idd, function(response) {
document.getElementById(idd+"_a").innerHTML ="<a href='" + response.link + "' id='"+idd+"_und' style='color:#12566C;font-size:14px;' onmouseover=document.getElementById('"+idd+"').style.textDecoration=underline; onmouseout=document.getElementById('"+idd+"').style.textDecoration=none; target='_blank'><b>" + response.name + "</b></a>";
});
}
</script>
<div style="padding-left:6px;"><center>
<div id="525864081_a" ></div>
<script type="text/javascript">
lget(525864081);
</script>
<div id="534018674_a" ></div>
<script type="text/javascript">
lget(534018674);
</script>
</div>
</body>
</html>
if you want to see the execution order try something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2011/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body onload="console.log('onload event'); false;">
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '199193070140222', status: true, cookie: true, xfbml: true});
console.log('FB object ready');
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/tr_TR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
console.log('This executed first');
}
());
function lget(idd){
console.log('lget - ' + idd);
};
</script>
<div style="padding-left:6px;"><center>
<div id="525864081_a" ></div>
<script type="text/javascript">
lget(525864081);
</script>
<div id="534018674_a" ></div>
<script type="text/javascript">
lget(534018674);
</script>
</div>
</body>
</html>
this is the output you'll get in Firefox
This executed first
lget - 525864081
lget - 534018674
onload event
FB object ready
When I execute the code below in IE7/WinXP32, then the output in the console is "undefined". The output changes to the expected "getContext()", when I make either of two modifications:
I remove the image tag.
I use: <body onload="draw()">
Any idea what is going on here? What may be a workaround?
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Canvas</title>
<script type="text/javascript">
var djConfig = {parseOnLoad: false, isDebug: true};
</script>
<script type="text/javascript"
src="/development/javascript/dojo-release-1.4.3-src/dojo/dojo.js">
</script>
<!--[if IE]>
<script type="text/javascript" src="/javascript/excanvas_r73.js"></script>
<![endif]-->
<script type="text/javascript">
function draw() {
var canvas = dojo.byId("canvas");
console.log(canvas.getContext);
}
dojo.addOnLoad(draw);
</script>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
<img src="nonexisting.gif">
</body>
</html>
Update: Seems like replacing "dojo.addOnLoad(draw);" with the following code does the trick.
function init() {
dojo.addOnLoad(draw);
}
if (dojo.isIE) {
dojo.connect('onload', init);
} else {
init();
}
dojo.addOnLoad fires before document.onload. I think it's associated with DOMContentLoaded. Perhaps excanvas does its initialization on the same event? Can you just use document.onload?