JSONP ajax callback failing

Question

I have following script running on my local test drive. It imports a JSON file and builds a webpage, but for some reason, there is an error in handling the data. No data is shown...

But whenever I use (the same) data hard-coded, I get the result I want. So this made me think it has something to do with the way I handle the JSON import...

This is my AJAX callback:

getGames: function(fn) {
     $.ajax({
          type: "GET",
          url: App.Config('webserviceurl')+'games-payed.js',
          dataType: "jsonp",
          success: function (data) {
              console.log('streets', data);
              if(fn){
                  fn(data);
              }
          },
          error: function (msg) {
              if(fn){
                  fn({status:400});
              }
          }
     });
}

And this code isn't working, nor am I getting any errors in my console...

When I load the data hard coded, it works perfectly:

getGames: function(fn) {
     var games = App.Config('dummyGames');

     if(fn){
          fn(games);
     }
}

Is there something wrong with my AJAX callback?

EDIT: The JSON file looks like this:

jsonp1({
    "status": "200",
    "data": [
        {
            "id": "1",
            "title": "Title 1",
            "publishDate": "2013-03-27T15:25:53.430Z",
            "thumbnail": "images/thumbs/image_game1.png",
            "html5": "http://mysite.com/index.html"
        },
        {
            "id": "2",
            "title": "Title 2",
            "publishDate": "2013-03-20T15:25:53.430Z",
            "thumbnail": "images/thumbs/image_game2.png",
            "html5": "http://mysite.com/index.html"
        },
        {
            "id": "3",
            "title": "Title 3",
            "publishDate": "2013-03-18T15:25:53.430Z",
            "thumbnail": "images/thumbs/image_game3.png",
            "html5": "http://mysite.com/index.html"
        }

    ]
});

Do you see anything in the console if you log in the error callback? is "games-payed" a typo? What do you see in the network tab of your browser? — Alberto Zaccagni
– Alberto Zaccagni, Commented Aug 5, 2013 at 11:04
Can you show us what games-payed.js looks like? About payed : english.stackexchange.com/questions/92547/paid-vs-payed tldr; use paid — Halcyon
– Halcyon, Commented Aug 5, 2013 at 11:04
About the "payed" naming, it's a service we get from our client, so I have no control on the naming :) I've added a snippet of the JSON file. — Michiel
– Michiel, Commented Aug 5, 2013 at 11:09
I edited to change the question's title to "JSONP ajax callback failing" instead of "JSON ajax callback failing" as this question is more about jsonp. Hope you ok with it — Khanh TO
– Khanh TO, Commented Aug 5, 2013 at 14:49

Khanh TO · Accepted Answer · 2013-08-05 16:12:48Z

In your example, I see that you wrap your json data inside jsonp1. I suppose that is a fixed name. If that's the case, try this:

getGames: function(fn) {
     $.ajax({
          type: "GET",
          url: App.Config('webserviceurl')+'games-payed.js',
          jsonp: false,
          jsonpCallback:"jsonp1",
          dataType: "jsonp",
          success: function (data) {
              console.log('streets', data);
              if(fn){
                  fn(data);
              }
          },
          error: function (msg) {
              if(fn){
                  fn({status:400});
              }
          }
     });
}

Notice the jsonpCallback:"jsonp1" and jsonp: false. The reason for this is: by default, jquery will generate the callback function name automatically and randomly and append ?callback=generatedFunctionName to the end of your url. Thanks to the callback parameter, the code on server side could use the same function name to call the callback on browser.

In your case, you're using fixed function name (jsonp1), so you have to:

Specify your function name explicitly using jsonpCallback="jsonp1"
Set jsonp = false to prevent jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation.

Collectives™ on Stack Overflow

JSONP ajax callback failing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related