i was trying to build a todo list mobile app using phonegap for windows mobile. But after clicking the "Add" button, the list is not being added. I am not getting any list items displayed on my mobile screen. But the same works really well in browser. can someone help me pls!!
Html and js code
<!DOCTYPE html>
<html manifest="storage.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova_plugins.js"></script>
<script type="text/javascript" charset="utf-8">
var storage = window.localStorage;
$(document).ready(function(){
console.log('Inside document.ready');
initTodoList();
$("#clearStorage").click(function(){
console.log('Entering clearstorage');
storage.clear();
$('li').remove();
console.log('Exiting clearstorage');
});
});
function remove_item(key){
console.log('Entering remove_item');
storage.removeItem(key);
console.log('Find and remove element with id = ' + key)
$('#'+key).remove();
console.log('Exiting remove_item');
}
function add_item() {
console.log('Entering add_item');
var d = new Date();
var key = d.getTime();
var value = $('#new_item').val();
storage.setItem(key, value);
createToDoListItem(key, value);
$("#new_item").val('');
console.log('Exiting add_item');
}
function initTodoList(){
console.log("Entering initTodoList " + storage.length);
for(var i = 0; i < storage.length; i++){
var key = storage.key(i);
var value = storage.getItem(key);
createToDoListItem(key,value);
}
}
function createToDoListItem(key, value){
var html = '<li data-key="' + key + '" id="' + key + '">' + value + '<button onclick="javascript:remove_item(\'' + key + '\')">Delete</button></li>';
console.log('Appending html ' + html)
$("#todo_list").append(html);
$("#todo_list").listview().listview("refresh");
}
</script>
</head>
<body>
<div class="app">
<h1>To Do List</h1>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<input type="text" id="new_item">
<button onclick="add_item()">Add</button>
<ul id="todo_list">
</ul>
<br/>
<button id="clearStorage">Clear storage</button>
</body>
</html>
You are missing a semi-colon at the end of the
console.log('Appending html ' + html)line.Also, if possible, it's a good idea to try and debugging the PhoneGap web page on the browser on your development machine and check for errors in the console of your browser's developer tools.
(It's not always possible to debug the page on your local machine with PhoneGap since you sometimes need access to mobile functionality etc.)