PDA

View Full Version : Uncaught TypeError



jjkilpatrick
12 Mar 2011, 1:47 AM
Hi,

I'm trying to make a small app Based on the Ajax Example.

I'm getting various issues in console when I try and execute my code.
My code is as follows:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady: function() {
var tpl = Ext.XTemplate.from('events');

var makeAjaxRequest = function() {
Ext.getBody().mask('Loading...', 'x-mask-loading', false);
Ext.Ajax.request({
url: 'test.json',
success: function(response, opts) {
Ext.getCmp('content').update(response.responseText);
Ext.getCmp('status').setTitle('Static test.json file loaded');
Ext.getBody().unmask();
}
});
};

var makeJSONPRequest = function() {
Ext.util.JSONP.request({
url: 'http://ws.audioscrobbler.com/2.0/',
params: {
method: 'geo.getevents',
location: 'london',
format: 'json',
api_key: 'xxx',
limit: '1',
},

callbackKey: 'callback',
callback: function(result) {
// Output result to console (Firebug/Chrome/Safari)
console.log(result);
// Handle error logic
if (result.error) {
alert(result.error)
return;
}

var events = result.data.events;
if (events) {
var html = tpl.applyTemplate(events);
Ext.getCmp('content').update(html);
}
else {
alert('There was an error retrieving the events.');
}
Ext.getCmp('status').setTitle('Lastfm Data');
}
});
};

new Ext.Panel({
fullscreen: true,
id: 'content',
scroll: 'vertical',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'JSONP',
handler: makeJSONPRequest
},{xtype: 'spacer'},{
text: 'XMLHTTP',
handler: makeAjaxRequest
}]
},{
id: 'status',
xtype: 'toolbar',
dock: 'bottom',
title: "Tap a button above."
}]
});
}
});


I'm getting the following errors:

Uncaught TypeError: Cannot read property 'events' of undefined
makeJSONPRequest.Ext.util.JSONP.request.callback
Ext.util.JSONP.callback
(anonymous function) - related to the lastfm api

Any help would be appreciated. Thanks

13 Mar 2011, 7:26 AM
What does the JSON from that API look like?

jjkilpatrick
13 Mar 2011, 9:06 AM
JSON result



{"events":{"event":{"id":"1844439","title":"Laura Isaacson","artists":{"artist":"Laura Isaacson","headliner":"Laura Isaacson"},"venue":{"id":"9111224","name":"The Forge","location":{"geo:point":{"geo:lat":"51.511623","geo:long":"-0.126369"},"city":"Camden, London","country":"United Kingdom","street":"3-7 Delancey Street","postalcode":"NW1 7NL"},"url":"http:\/\/www.last.fm\/venue\/9111224+The+Forge","website":"http:\/\/www.forgevenue.org","phonenumber":"020 7 383 7808","image":[{"#text":"","size":"small"},{"#text":"","size":"medium"},{"#text":"","size":"large"},{"#text":"","size":"extralarge"},{"#text":"","size":"mega"}]},"startDate":"Sun, 13 Mar 2011 11:00:00","description":"<div class=\"bbcode\">Laura Isaacson performs works for cello and piano by Handel, Schumann, &amp; Debussy<\/div>","image":[{"#text":"","size":"small"},{"#text":"","size":"medium"},{"#text":"","size":"large"},{"#text":"","size":"extralarge"}],"attendance":"0","reviews":"0","tag":"lastfm:event=1844439","url":"http:\/\/www.last.fm\/event\/1844439+Laura+Isaacson+at+The+Forge+on+13+March+2011","website":"http:\/\/www.forgevenue.org\/whats-on\/?lgig=a56a2871-15f1-438e-b195-2d88d5fa1eae&performance=1","tickets":"\n ","cancelled":"0"},"@attr":{"location":"London, United Kingdom","page":"1","perPage":"1","totalPages":"1833","total":"1833"}}}


Also here is my code for the index.html



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AJAX</title>
<link rel="stylesheet" href="sencha-touch.css" type="text/css">
<script type="text/javascript" src="sencha-touch.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<textarea id="events" class="x-hidden-display">
<tpl for=".">
<div class="event">
<div class="title">
{id}
{tag}
(title}
{website}
</div>
</div>
</tpl>
</textarea>
</body>
</html>

Forgot to mention this is my first stab at javascript + sencha