<!DOCTYPE html>
<html>
<head>
<title>Loading data into a PhoneGap app</title>
<meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jsonp.min.js"></script>
<script src="phonegap-1.4.1.js"></script>
<script>
$(document).ready(function(){
$.jsonp({
url: 'http://twitter.com/status/user_timeline/samcroft.json?count=20',
callbackParameter: 'callback',
success: function(data, status) {
// $('#listview').append('<li>The feed loads fine</li>');
$.each(data, function(i,item){
var tweet = item.text;
$('#listview').append('<li>'+tweet+'</li>');
refresh();
});
},
error: function(){
$('#listview').append('<li>There was an error loading the feed');
}
});
});
function refresh()
{
var list = document.getElementById('listview');
$(list).listview("refresh");
}
</script>
</head>
<body>
<ul data-role="listview" data-theme="c" data-dividertheme="b" id="listview">
<li data-role="list-divider"> MY TWEETS </li>
<li> <a href="#"> List item 1 </a> </li>
<li> <a href="#"> List item 2 </a> </li>
<li> <a href="#"> List item 3 </a> </li>
</ul>
</body>
</html>