jsonp request not working in firefox

Question

I am trying a straightforward remote json call with jquery. I am trying to use the reddit api. http://api.reddit.com. This returns a valid json object.

If I call a local file (which is what is returned from the website saved to my local disk) things work 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 then 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 will work fine in Safari, but not Firefox. This is expect as Firefox doesnt do remote calls due to security or something. Fine.

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 it now stops working on both safari and firefox. The request is made but what is return from the server appears to be ignored.

Is this a problem with the code I am writing or with something the server is returning? How can I diagnose this problem?

EDIT Changed the address to the real one.

Answer 1

The URL you are pointing to (www.redit.com...) is not returning JSON! Not sure where the JSON syndication from reddit comes but you might want to start with the 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;
      });

});

});

(apologies for formatting)

EDIT Now I re read your post, I see you intended to go to api.reddit.com unfortunately you haven't got the right parameter name for the json callback parameter. You might need to further consult the reddit documentation to see if they support JSONP and what the name of the callback param should be.

Answer 2

JSONP is something that needs to be supported on the server. I can't find the documentation, but it appears that, if Reddit supports JSONP, it's not with the jsoncallback query variable.

What JSONP does, is wrap the JSON text with a JavaScript Function call, this allows the JSON text to be processed by any function you've already defined in your code. This function does need to be available from the Global scope, however. It appears that the JQuery getJSON method generates a function name for you, and assigns it to the jsoncallback query string variable.

Answer 3

I'm not sure about reddit.com, but for sites that don't support the JSONP idiom you can still create a proxy technique (on the backend) that would return the reddit JSON, and then you would just make an ajax request to that 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));
?>

Answer 4

http://api.reddit.com/ returns JSON, but doesn't appear to be JSONP-friendly. You can verify this, if you have GET, via

% GET http://api.reddit.com/?callback=foo

which dumps a stream of JSON without the JSONP wrapper.

http://code.reddit.com/browser/r2/r2/controllers/api.py (line 84) shows the code looking for 'callback' (not 'jsoncallback'). That may be a good starting point for digging through Reddit's code to see what the trick is.

Answer 5

Here is an elaborated concept on how jsonp works. Hope it'll help you. JSONP First Timer