Forcing another JSONP request from the Twitter API

[nelstrom]

This code should create a 'Timeline' tab, and populate it from Twitter search results:

var timeline = new Ext.Component({
	title: 'Timeline',
	cls: 'timeline',
	scroll: 'vertical',
	tpl: [
		'<tpl for=".">',
			'<div class="tweet">',
					'<div class="avatar"><img src="{profile_image_url}" /></div>',
					'<div class="tweet-content">',
						'<h2>{from_user}</h2>',
						'<p>{text}</p>',
					'</div>',
			'</div>',
		'</tpl>'
	]
});

var panel = new Ext.TabPanel({
	fullscreen: true,
	items: [timeline]
});

var refresh = function() {
	Ext.util.JSONP.request({
		url: 'http://search.twitter.com/search.json',
		callbackKey: 'callback',
		params: {
			q: "bored",
			rpp: 30
		},
		callback: function(data) {
			var tweet_list = data.results;
			timeline.update(tweet_list);	// Update the tweets in timeline
		}
	});
};

panel.getTabBar().add([
	{xtype: 'spacer'},
	{
		xtype: 'button',
		iconMask: true,
		iconCls: 'refresh',
		ui: 'plain',
		style: 'margin:0;',
		handler: refresh
	}
]);
panel.getTabBar().doLayout();

refresh();

I'm using the word 'bored' as my query, because it's mentioned on Twitter about 70 times per minute.

I've attached the 'refresh' function to the handler of the 'refresh' button, and it is being called when I click the button, but the view never gets redrawn.

I discovered that I could force another request to be made to Twitter by adding a meaningless query parameter, with the value randomized. E.g:

var refresh = function() {
	Ext.util.JSONP.request({
		url: 'http://search.twitter.com/search.json',
		callbackKey: 'callback',
		params: {
			q: "bored",
			rpp: 30,
			uniquify: Math.random()
		},
		callback: function(data) {
			var tweet_list = data.results;
			timeline.update(tweet_list);	// Update the tweets in timeline
		}
	});
};

Now, when I click the refresh button, the view is updated with fresh data from Twitter.

So it seems that if you try to submit a JSONP request with the same parameters more than once, a cached version of the data is returned. Is there a neater way of always fetching fresh data from the API?

In this case, I'm not sure if the caching is done by Sencha Touch or by Twitter.

[VinylFox]

The caching is done by the browser.

If you used a DataView & Store with a ScriptTagProxy, then a cache busting string is appended for you.

[nelstrom]

Thanks for confirming where the caching is being done.

In this case, it seems like passing one extra query parameter to the JSONP request is a lot simpler than switching to the DataView+Store with a ScriptTagProxy. I'll go with the simpler solution for now.