PDA

View Full Version : issue with Ext.util.JSONP.request



russellharrower
1 Aug 2010, 1:37 AM
hi I am using a bit of code I found on this site, and it works fine when your searching twitters search.json
however when i try to get it to search mine, it seems not to show any of the results.

if anyone can help that would be great.
Thank you
Russell


Ext.setup({
onReady: function () {

var favoritesTab = { title: 'Favorites', iconCls: 'favorites', html: 'Favorites' };

var settingsTab = { title: 'Settings', iconCls: 'settings', html: 'Settings' };

var peopleDisplay = new Ext.Component({ scroll: 'vertical',
tpl: ['<tpl for="."><div style="background:#000; color:#fff;"><img src="{cd_cover}" width="30" height="30" /> ' +
'<i>{from_user}</i>: {text}</div></tpl>']
});

var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team', layout: 'card',
items: [{ html: 'Please Wait...' }, peopleDisplay],
listeners: {
activate: function () {
//this == Ext.getCmp('peopleTab')
this.getLayout().setActiveItem(0);
Ext.util.JSONP.request({
url: 'http://www.bonush.com/charts.json',
params: { q: 'bonush', rpp: 30 },
scope: this,
callback: function (data) {
peopleDisplay.update(results);
this.getLayout().setActiveItem(1);
}
});
}
}
};

new Ext.TabPanel({ fullscreen: true,
tabBar: { dock: 'bottom', layout: { pack: 'center'} },
animation: { type: 'slide' },
items: [favoritesTab, peopleTab, settingsTab]
});

}
});

Animal
1 Aug 2010, 2:00 AM
And is your charts.json adding the "P" bit? The callback?

russellharrower
1 Aug 2010, 2:04 AM
I am not sure, I just made a json file and placed data in side it?
How do i get it to add the P?

Animal
1 Aug 2010, 2:08 AM
You're using JSONP, and don't know what it is?

http://en.wikipedia.org/wiki/JSONP#JSONP

read this fully: http://www.sencha.com/deploy/touch/docs/?class=Ext.util.JSONP

russellharrower
1 Aug 2010, 2:30 AM
Hi Sorry,
I just relised I was not using JSONP but JSON
I have fixed that issue with


<?php
$callback = $_REQUEST['callback'];

// Create the output object.
$output = array('user' => 'russell', 'age' => '22');

header('Content-Type: text/javascript');
echo $callback . '{"results":[' . json_encode($output) . ']}';

?>

then changed the code above to


Ext.setup({
onReady: function () {

var favoritesTab = { title: 'Favorites', iconCls: 'favorites', html: 'Favorites' };

var settingsTab = { title: 'Settings', iconCls: 'settings', html: 'Settings' };

var peopleDisplay = new Ext.Component({ scroll: 'vertical',
tpl: ['<tpl for="."><div style="background:#000; color:#fff;"><i>{user}</i>: {age}</div></tpl>']
});

var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team', layout: 'card',
items: [{ html: 'Please Wait...' }, peopleDisplay],
listeners: {
activate: function () {
//this == Ext.getCmp('peopleTab')
this.getLayout().setActiveItem(0);
Ext.util.JSONP.request({
url: 'http://www.bonush.com/charts.php',
params: { user: 'russell', rpp: 30 },
scope: this,
callback: function (data) {
peopleDisplay.update(results);
this.getLayout().setActiveItem(1);
}
});
}
}
};

new Ext.TabPanel({ fullscreen: true,
tabBar: { dock: 'bottom', layout: { pack: 'center'} },
animation: { type: 'slide' },
items: [favoritesTab, peopleTab, settingsTab]
});

}
});

but still nothing... just keeps saying loading.

Animal
1 Aug 2010, 2:44 AM
OK, use Firebug to show the content that is being returned in that request

Animal
1 Aug 2010, 3:04 AM
OK, from http://www.bonush.com/charts.php?user=russell&rpp=30&callback=test

I get



{"results":[{"user":"russell","age":"22"}]}


So your tpl should iterate over "results", not "."

russellharrower
1 Aug 2010, 3:57 AM
The error I get in Firebug is
Javascript Error On Line 1
http:///www.bonush.com/...t.util.JSONP.callback
SyntaxError: Parse error

Animal
1 Aug 2010, 4:17 AM
Well that's not JSONP is it? It's JSON.

Animal
1 Aug 2010, 4:18 AM
The content passed back from a server resource requested by a JSONP request must be executable JavaScript source code because it is used as the source inside a <script> tag.

.

russellharrower
1 Aug 2010, 4:19 AM
Ok, and I take it then, JSON cant be used with Sencha?

Animal
1 Aug 2010, 4:20 AM
Whuhotnow?

What is the problem with comprehension here???

Are you not following all these links? never seen any of the many JSON examples? Can't read source?

russellharrower
1 Aug 2010, 6:38 AM
I got it working, was issue with my JSONP - PHP script.

Animal
1 Aug 2010, 6:44 AM
That's better.

I get



test({"results":{"user":"Russell Harrower","age":22}})



But I assume you want results to be an Array of objects, not a single object? Is that not your intention?

russellharrower
1 Aug 2010, 6:50 AM
So basically I want it to be a list, of people when the user clicks on a persons details I want it to show abit about the person.
In the long term, I would like to change this to Top 10 Music Charts, but i thought i would just get the basic learning first and go from there.

The strange thing is, while I know PHP/HTML/CSS the area I lack is Javascript however I know jQtouch.

Animal
1 Aug 2010, 6:57 AM
So you need to return an Array of user objects. not a single user object.

russellharrower
1 Aug 2010, 7:02 AM
Yeah, so I just coded the following and it works


<?php

$arr = array();
$arr[0] = array('user'=>"Russell Harrower",'age'=>22);
$arr[1] = array('user'=>"Ben Smith",'age'=>27);
$arr[2] = array('user'=>"Chris Williams",'age'=>50);


$json = json_encode($arr);
$callback = $_GET[callback];
echo $callback . '({"results":' . $json . '})';
?>

The next step, will be to find away to put this into a LIST, and make it clickable to show more data about the user...

Animal
1 Aug 2010, 7:12 AM
http://www.sencha.com/deploy/touch/docs/?class=Ext.DataView

russellharrower
1 Aug 2010, 7:51 AM
Ok I understand the example code that is in the link above, so my question is simple.
Is EXT similar to jQuery?
If so would I be able to do link events that when clicked it would slide to the link, just like jQuery and jQTouch allows.

for e.g.
say I have to pass the number 6 thought to the ext script I am guessing it would be somthing like




$("#changestation div.divlink").click( changeTrack );

function changeTrack(e) {
//$("#stationTitle").html($(this).attr("title"));

var content_show = $(this).attr("title");

var store = new Ext.data.JsonStore({
url: 'get-images.php',
params: {"metaID":content_show}
root: 'images',
fields: [
'name', 'url',
{name:'size', type: 'float'},
{name:'lastmod', type:'date', dateFormat:'timestamp'}
]
});
store.load();



I could be way off, I am also googleing it to see what I can find

russellharrower
1 Aug 2010, 8:06 AM
I found this code


var wrapper = new Ext.fly("wrapper");
wrapper.on("click", function(e){

var target = e.getTarget();
alert('refresh');
});


however when I add this to my code, it stops the app from loading...

Animal
1 Aug 2010, 8:26 AM
What's this dollar thing.?

Why don't you use the powerful and easy to use, and well documented widgets?

DataView does all this for you. Read the docs. Read the examples. Use it.