I was recently trying to get a Sencha Touch demo up-and-running, but my callback functions after requests for JSON data never ran, and Firefox would throw errors along the lines of “invalid label.” I didn’t understand why–until I read more about JSONP.
JSONP prefixes your JSON response with a function name, which runs when the response is retrieved. It’s a way of handling the data without a listener.
This means that your JSONP provider needs to detect a JSONP parameter, and then wrap or “pad” the response within the specified parameter value.
For Sencha Touch, the JSON returned should be wrapped in Ext.util.JSONP.callback();. If your JSON looks like this:
{"results":[{"name":"Chris"},{"name","Harry"}]}
then your JSONP should look like this:
Ext.util.JSONP.callback({"results":[{"name":"Chris"},{"name","Harry"}]});
Not that you should hard-code that function name anywhere in your JSON output–web-based APIs and services should pick up the function from your request and wrap the JSON for you. For example, the twitter search API accepts a callback querystring parameter.
http://search.twitter.com/search.json?q=fakecriterions&callback=myCallbackFunction
would wrap the JSON response inside
myCallbackFunction();
I ignored the extra letter in the acronym at my own peril–I figured it was just a trivial variation on JSON (which it is) that wouldn’t make any difference in how it was handled (but it does).
Thank you. Helped me on the track. Changed the proxy type to the ajax from jsonp, and at least the app started to work, so I can modify it further.
Thanks for posting this – clarifies a simple but obv very important point.
Thanks for this post! Helped sort out the confusion I had!
Hi all Dev,
I have meet one problem that need all help me, I want to get Json Data format from web url http://townhub.bmsolution.biz/mysql2json-2010-11-07/example.php , but i have got error invalid label
[Break On This Error] “data”: [
here is my code:
index.html
Getting Started
app.js
// JavaScript Document
Ext.application({
name: ‘Sencha’,
launch: function() {
Ext.create(‘Ext.DataView’, {
fullscreen: true,
store: {
autoLoad: true,
fields: [“from_user”, “text”, “profile_image_url”],
proxy: {
type: ‘jsonp’,
//url: ‘http://search.twitter.com/search.json?q=Sencha Touch’,
//url: ‘http://search.twitter.com/search.json?q=fakecriterions&callback=myCallbackFunction’,
url:’http://townhub.bmsolution.biz/mysql2json-2010-11-07/example.php’,
reader: {
type: ‘json’,
root: ‘results’
}
}
},
});
}
});
I have got en Error from fire bug like this sms:invalid label
[Break On This Error] “data”: [
thax for advance that reply me back……….
Hi Bouheang,
It looks like the root element of your JSON data is named ‘data’ rather than ‘results’ — that may be part of the problem. If you update
root: 'results'to
root: 'data'that may help.
Hi all Dev,
thank u for ur reply me but i try to update it, but it still error that I have meet one problem that need all help me, I want to get Json Data format from web url http://townhub.bmsolution.biz/mysql2json-2010-11-07/example.php , but i have got error invalid label
[Break On This Error] “data”: [
here is my code:
index.html
Getting Started
app.js
// JavaScript Document
Ext.application({
name: ‘Sencha’,
launch: function() {
Ext.create(‘Ext.DataView’, {
fullscreen: true,
store: {
autoLoad: true,
fields: [“from_user”, “text”, “profile_image_url”],
proxy: {
type: ‘jsonp’,
//url: ‘http://search.twitter.com/search.json?q=Sencha Touch’,
//url: ‘http://search.twitter.com/search.json?q=fakecriterions&callback=myCallbackFunction’,
url:’http://townhub.bmsolution.biz/mysql2json-2010-11-07/example.php’,
reader: {
type: ‘json’,
root: ‘data’
}
}
},
});
}
});
I have got en Error from fire bug like this sms:invalid label
[Break On This Error] “data”: [
thax for advance that reply me back……….
Hi Chris Herdt,
thank u for ur reply me but i try to update it, but it still got error that I have meet one problem that need u again help me, I want to get Json Data format from web url http://townhub.bmsolution.biz/mysql2json-2010-11-07/example.php , but i have got error invalid label
[Break On This Error] “data”: [
here is my code:
index.html
Getting Started
app.js
// JavaScript Document
Ext.application({
name: ‘Sencha’,
launch: function() {
Ext.create(‘Ext.DataView’, {
fullscreen: true,
store: {
autoLoad: true,
//i have update fields like this
//fields: [“from_user”, “text”, “profile_image_url”],
/*—i have change to */
fields:[“id”,”cust_firstname”,”cust_lastname”,”cust_email”],
proxy: {
type: ‘jsonp’,
//url: ‘http://search.twitter.com/search.json?q=Sencha Touch’,
//url: ‘http://search.twitter.com/search.json?q=fakecriterions&callback=myCallbackFunction’,
url:’http://townhub.bmsolution.biz/mysql2json-2010-11-07/example.php’,
reader: {
type: ‘json’,
root: ‘data’
}
}
},
});
}
});
Sorry Chris Herdt and all Dev Pls check it again for me cos i realy need for find solution for my project that nearly Dateline
I have got en Error from fire bug like this sms:invalid label
[Break On This Error] “data”: [
thax for advance that reply me back……….i doing waitting Reply—
Hi, all Sencha Touch Dev
recently i have meet the difficult problem that i have ajax to load data from server it success full but i can not tack the data respone out of ajax function. i have meet an Error is Undefind ………here is my code;
$.ajax({
type: ‘GET’,
url: ‘http://townhub.bmsolution.biz/Mobile/example.php?callback=callback’,
async: false,
jsonpCallback: ‘callback’,
contentType: “application/json”,
dataType: ‘jsonp’,
success: function(data){
/*————————————————-I want use DynamicDetail Varaibale out of this ajax——————
//return data.myrootf[id].overview;
DynamicDetail=data.myrootf[id].overview;
alert(”Detail_info= “+DynamicDetail);
},
error: function(e){
console.log(e.message);
}
});
alert(”Detail_info= “+DynamicDetail);it Error DynamicDetail undefind
any help or idea i allway waitting for respone ………..thank u for advance ………
this is awesome, really saved my butt. thanks!