I am new to phonegap and and trying to build a basic app that is pulling data from a rails app using ajax. Here are the relevant files...
#www/index.html
<body>
<h1>Task List</h1>
<div class="page current" id="tasks">
<header>
<h1>Open Tasks</h1>
</header>
<ul></ul>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/tasks.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
#www/js/tasks.js
function loadTasks() {
var tasks = $('#tasks ul');
$.ajax({
type: 'GET',
url: 'http://limitless-chamber-2009.herokuapp.com/tasks.json',
dataType: 'JSON',
timeout: 5000,
success: function(data) {
$.each(JSON.parse(data), function(i,item){
tasks.append('<li>'+item.name+'</li>')
});
},
error: function(data) {
tasks.append('<li>There was an error loading the tasks');
}
});
}
loadTasks();
When I loaded index.html in my web browser I get the error "There was an error loading the tasks". I know there are sophisticated ways to debug this, but I'm a js and ajax noob, so not sure what to check, but I am open to suggestions. Any help appreciated.