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"
        }

    ]
});

Answer 1

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.