Help With JSONP Request

[indieangler]

I'm looking for help with the following code that's just a simple JSONP request to get data from a different server and display it via a simple template. I'm very new to Sencha and ExtJS but I'm doing my best. I've tried messing with this code all afternoon and I can't seem to figure out what's going wrong even though it seems like it should be working fine. If this ends up being a double post, I apologize, admin please delete the original as this one makes much more sense and is more helpful than my original request.

The index.js code is as follows:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var blogs = new Ext.Component({
title: 'Blog Data',
cls: 'timeline',
scroll: 'vertical',
tpl: [
'<tpl for=".">',
'<p><h2>{title}</h2>',
'posted on {date}<br />',
'{post}<br />{link}</p>',
'</tpl>'
]
});

var panel = new Ext.TabPanel({
fullscreen: true,
animation: 'slide',
items: [blogs]
});

var refresh = function() {

Ext.util.JSONP.request({
url: 'http://www.calculatewhat.com/data.json',
callbackKey: 'callback',
callback: function(data) {
data = data.results;
blogs.update(data.results);

}
});
};

var tabBar = panel.getTabBar();
tabBar.addDocked({
xtype: 'button',
ui: 'mask',
iconCls: 'refresh',
dock: 'right',
stretch: false,
align: 'center',
handler: refresh
});

}
});
And the external data.json file I'm trying to play with looks like this:


[{
"title":"Title 1",
"post":"Post Text 1",
"date":"Date 1",
"link": "URL 1"
}, {
"title":"Title 2",
"post":"Post Text 2",
"date":"Date 2",
"link": "URL 2"
}]
I'm not sure if the problem is in the JSON data file or in the way I'm calling it and the code on index.js. I'm hoping this is pretty basic and someone can push me in the right direction to getting this solved because it's starting to drive me crazy. Thanks!

[TommyMaintz]

The reason this doesnt work is because you are sending raw json over a JSONP request. JSONP is a "hack" to get around cross domain limitations of XHR. The way JSONP works is by sending back a script that executes a callback passing the data as an argument. Your data would have to be formatted like the following to work:



Ext.util.JSONP.callback([{
"title":"Title 1",
"post":"Post Text 1",
"date":"Date 1",
"link": "URL 1"
}, {
"title":"Title 2",
"post":"Post Text 2",
"date":"Date 2",
"link": "URL 2"
}]);


This is the reason you usually pass a callbackKey to the request. This will be used as the param name send to the server that indicates what the callback function is. For example, setting callbackKey to 'callback', will make a request like:



http://www.calculatewhat.com/data.json?callback=Ext.util.JSONP.callback


'callback' is the name that most web services use (like Flickr, Digg, etc).

[indieangler]

Thanks a lot, Tommy, that really helps clear things up for me. I'm not familiar with YQL but I see it's a SQL like method of querying data. Does YQL support cross domain data querying? For example, in this same scenario would you think YQL is a valid option over JSONP? Any major disadvantages to either? Thanks a bundle, way cool product you guys have here.

[indieangler]

Hrm, I changed the JSON file and reformatted the data as you showed but it's still not doing anything. Either that or it's doing something and just not getting displayed properly for some reason but it appears blank still.

[indieangler]

Sorry to bother again but any idea why that might still not be working even after I changed the data as you showed?

[TommyMaintz]

The data that is being passed to the callback of the request is the actual array. That means that your callback should do something like the following (which makes it work for me).



var refresh = function() {
Ext.util.JSONP.request({
url: 'http://www.calculatewhat.com/data.json',
callback: function(data) {
blogs.update(data);
}
});
};