Callback function doesn't work when using getJSON - javascript

This is the code that I am using,
When I write the link into the browser (I.E. or Mozilla) it is working like
(MyFunc({"memes":[{"source":"http://www.knall......),
but when I try to run it as HTML file I have a error in status Bar.
what is the problem?. Thanks
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="images"></div>
<script>$.getJSON("http://tagthe.net/api/?url=http://www.knallgrau.at/en&view=json&callback=MyFunc",function(data){
alert(data);
});
</script>
</body>

You don't define MyFunc anywhere in your code. You should rather put a ? in the URL instead of an arbitrary name, and jQuery will replace it with a generated callback name.

Eureka man!
It doesn't work with the latest version... you should use the jquery 1.3.1 not newer...

You have to use getScript instead of getJSON since you are calling a URL on another domain name.
Update:
The following code works fine for me:
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="images"></div>
<script>
function MyFunc(data) {
alert(data)
}
$.getScript("http://tagthe.net/api/?url=http://www.knallgrau.at/en&view=json&callback=MyFunc");
</script>
</body>

you cant make ajax calls to other domains
http://en.wikipedia.org/wiki/Same_origin_policy
Also, your URL is not a valid url, copy and paste it in a browser and you will see an error
http://tagthe.net/api/url=http://www.knallgrau.at/en&view=json&callback=MyFunc
your valid URL is:
http://tagthe.net/api/?url=http://www.knallgrau.at/en&view=json&callback=MyFunc
$.getJSON("
http://tagthe.net/api/url=http://www.knallgrau.at/en&view=json&callback=MyFunc",
function(data){
alert(data);
});

Related

body onload does not see js function on the same page

I am slightly baffled by this one... for some reason the newLoaded() function is apparently not defined and as per the console output I get this: Uncaught ReferenceError: newLoaded is not defined at onload yet it's literally on the same page (not even loaded via external resources)
<head>
...
<script language="text/javascript">
function newLoaded() {
loaded();
}
</script>
</head>
<body onLoad="newLoaded();" class="page page-id-105 page-template page-template-page-fullwidth page-template-page-fullwidth-php cherry-fixed-layout" style="height: 100%;margin:0px;padding:0px">
...
What i found out was the language="text/javascript" is deprecated. Either remove it or use type=""
I have tried following code and seems to be working good
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function newLoaded() {
//loaded();
alert();
}
</script>
</head>
<body onload="newLoaded()">
</body>
</html>
also if there is any load() function whats not defined, the rest can't be triggered.
I think you might have a typo it should be onload not onLoad
EDIT: it works on both cases but the standard one all lowercase

Why isn't my web page transition working? (HTML, CSS, JavaScript)

Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a id="myLink" href="#">
Click to slide in new page
</a>
<iframe id="newPage" src="http://jsfiddle.net"></iframe>
</body>
</html>
And here is my CSS:
#myLink {
position: absolute;
}
iframe {
width: 100%;
height: 100%;
top: 100%;
position: fixed;
background-color: blue;
}
And my JavaScript:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am literally copy and pasting from this source http://jsfiddle.net/TheGAFF/hNYMr/ to achieve a transition between web pages using iframe but for some reason when I try this simple code in my browser, it doesn't work. I can't see why this doesn't work in my browser when I link it to index.html. Can anyone help? Thanks.
Edit: The "#myLink" in the CSS page isn't commented out, it just happened to format like this in the question.
Look in your JavaScript console. Expect to see an error about $ not being defined.
See this code:
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
First you load your script, which tries to use $. Then you try to load jQuery, which defines $.
Swap the order or your script elements.
You then have a second problem.
$("#myLink")
You have no element with id="myLink" in the document at the time the script runs.
It doesn't get added to the DOM until 4 lines later.
Either:
move the script so it appears after the elements you are trying to access
use an event handler (like DOM Ready):
Such:
$( function () {
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
} );
use delegated events
Such:
$(document).on("click", "#myLink", function () {
$('#newPage').transition({top: '0%' });
});
Edit; sorry you already did that.
Try puttting your js file Under the js library file.

why doesnt this animate() jquery function script work?

I'm trying to test out how the animate() function works, and this is an example I got from stackexchange actually (it works on fiddle), but when I run it on my local computer, it doesn't work anymore.
Here's the code:
<html>
<head>
<script type="text/javascript" src="scripts\jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function () {
$('div').animate({
width: 'toggle'
});
});
alert("hei");
});
</script>
<style type="text/css">
div {
background-color: red;
height: 100px;
width: 100px;
display: none;
}
</style>
</head>
<body>
<button>Show/Hide</button>
<div></div>
</body>
Why is this? When I refresh, there's no alert popping up so it's not even processing the javascript I have in there. But it works fine in fiddle.
Oh, and here's the fiddle. But I really don't think it's relevant since it works there, just not on my local computer. Am I missing declaring a library?
Please change below line :
<script type="text/javascript" src="scripts\jquery-1.11.0.js"></script>
with this one :
<script type="text/javascript" src="scripts/jquery-1.11.0.js"></script>
You have used backslash instead of slash
It work For me
I think your jQuery path is not correct you have used
scripts\jquery-1.11.0.js
normally we used scripts/jquery-1.11.0.js
scripts\jquery-1.11.0.js should be scripts/jquery-1.11.0.js

HTML/CSS/JS beginner errors

These are working in a JSFiddle that andi posted on the answer to my original question. I'm stumped as to what I've missed that it isn't working in the browser. I know this is going to be a very simple fix. Thanks in advance.
HTML:
<div class="blackwrap">
<header class="blackbar">
<h2>Before he knew it, he couldn't see a thing.</h2>
<h4>He fumbled around for the <a id="flash">flashlight</a> on his phone.</h4>
</header>
</div> <!-- .blackwrap-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
CSS:
.blackbar {
background: black;
color: white;
}
.blackbar.lit {
background:yellow;
color:black;
}
Javascript:
$("#flash").on("mouseover", function(){
$(".blackbar").addClass("lit");
}).on("mouseout", function(){
$(".blackbar").removeClass("lit")
});
The problem may be, you are running the Jquery include code in your local machine with using the file:// protocol.
So on your local machine use
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
change to this on the server
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
at the server, it will be http: or https: , so server will automatically select the corresponding one.
your jquery is not loaded properly use http: in src as below:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Its really simple fix in the cdn link to jquery you should make a http call
instead of this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
change it to this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
The problem is if you dont keep http the browser thinks it is a local file in your pc.

JQUERY won't work on local machine

I'm trying JQUERY on my machine, but for some reason, nothing seems to work. Here's the test file:
<html>
<head>
<script type="text/css" src="jquery.js">
</script>
<script type="text/javascript">
$("p").mouseover(function () {
$(this).css("color","black");
});
$(document).ready(function(){
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
</head>
<body>
<h1>This is a test</h1>
<p>Roll over me!</p>
</body>
</html>
Nothing in there works. Also, if anybody wants to know, accessing through my domain and through the local both don't work. I'm really confused, because I copied most of that code off the internet, just in case there was something wrong with my typing.
For some reason, firefox is throwing this error:
Code: Evaluate
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
New code (moved the p onmouseover handeler)
<script src="jquery.js" type="text/css">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
Specify correct type for javascript file:
<script type="text/javascript" src="jquery.js"></script>
Update
You're currently using type="text/css" as content type for javascript file which is incorrect. Try to copy above code into your script.
Screenshot
removed dead ImageShack link
Install firebug and see what it tells you in the Console tab.
You should move the attachment of the mouseover handler into $(document).ready(...) because the paragraph won't necessarily exist until the document is ready and so no handler can be attached to it.
Download the latest version of jQuery "jquery-1.3.2.min.js" and link the file correctly. and try this,
<script type="text/javascript">
$(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>

Categories

Resources