Jsonp request not working in firefox
I am trying to make a simple json call to jquery. I am trying to use reddit api. http://api.reddit.com . This returns a valid json object.
If I call the local file (which is what comes back from the website saved on my local drive) everything works fine.
$(document).ready(function() {
$.getJSON("js/reddit.json", function (json) {
$.each(json.data.children, function () {
title = this.data.title;
url = this.data.url;
$("#redditbox").append("<div><a href=\"" + url + "\">" + title + "</a><div>");
});
});
});
If I try to convert it to a remote call:
$(document).ready(function() {
$.getJSON("http://api.reddit.com", function (json) {
$.each(json.data.children, function () {
title = this.data.title;
url = this.data.url;
$("#redditbox").append("<div><a href=\"" + url + "\">" + title + "</a><div>");
});
});
});
it works fine in Safari but not Firefox. Firefox is not expected to make remote calls due to security or something else. Good.
In the jquery docs, they say to do it like this (jsonp):
$(document).ready(function() {
$.getJSON("http://api.reddit.com?jsoncallback=?", function (json) {
$.each(json.data.children, function () {
title = this.data.title;
url = this.data.url;
$("#redditbox").append("<div><a href=\"" + url + "\">" + title + "</a><div>");
});
});
});
however now it stops working with both safari and firefox. The request is completed, but what is returned from the server seems to be ignored.
Is this a problem with the code I am writing, or with something returned by the server? How can I diagnose this problem?
EDIT Changed address to real.
source to share
The URL you point to (www.redit.com ...) doesn't return JSON! Not sure where reddit's JSON syndication is happening, but you can start with an example from the docs :
$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function (data) {
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#redditbox");
if ( i == 4 ) return false;
});
});
});
(sorry for formatting)
EDIT Now I'm reading your post, I see that you intended to go to api.reddit.com, unfortunately you don't have the correct parameter name for the json callback parameter. You may have to consult the reddit documentation to see if they support JSONP and what the name of the callback parameter should be.
source to share
JSONP is what needs to be maintained on the server. I can't find any documentation, but it looks like if Reddit supports JSONP it's not with the jsoncallback request variable.
What JSONP does is wraps the JSON text with a JavaScript function call, this allows the JSON text to be processed by any function that you have already defined in your code. However, this feature must be accessible from the global scope. It looks like the getJSON JQuery method generates a function name for you and assigns it to the jsoncallback query string variable.
source to share
I'm not sure about reddit.com, but for sites that don't support the JSONP idiom, you can still create a proxy technique (to the backend) that will return a reddit JSON and then you just make an ajax request to that.
So if you called http://mydomain.com/proxy.php?url=http://api.reddit.com :
<?php
$url = $_GET["url"];
print_r(file_get_contents($url));
?>
source to share
http://api.reddit.com/ returns JSON but doesn't seem JSONP friendly. You can check this if you have a GET via
% GET http://api.reddit.com/?callback=foo
which dumps a JSON stream without a JSONP wrapper.
http://code.reddit.com/browser/r2/r2/controllers/api.py (line 84) shows code that looks for a "callback" (not "jsoncallback"). This might be a good starting point for digging through the Reddit code to find out what the trick is.
source to share