I'm new to PouchDB, currently try to use Pouchdb on my Phonegap android app. I'm using Todos Sample App from http://pouchdb.com/getting-started.html.
It worked fine on browser, but not on Android (Jelly Bean 4.2), I'm using HTC One Mini to test the app.
Here is my code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>VanillaJS TodoMVC</title>
<link rel="stylesheet" href="style/base.css">
<!--[if IE]>
<script src="style/ie.js"></script>
<![endif]-->
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus value="">
</header>
<section id="main">
<ul id="todo-list"></ul>
</section>
<footer id="footer">
<span id="todo-count"></span>
<div id="sync-wrapper">
<div id="sync-success">Currently syncing</div>
<div id="sync-error">There was a problem syncing</div>
</div>
</footer>
</section>
<script src="js/pouchdb-nightly.min.js"></script>
<script src="js/app.js"></script>
<script src="js/base.js"></script>
</body>
</html>
Here is app.js code :
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){}
(function() {
'use strict';
var ENTER_KEY = 13;
var newTodoDom = document.getElementById('new-todo');
var syncDom = document.getElementById('sync-wrapper');
// EDITING STARTS HERE (you dont need to edit anything above this line)
var db = new PouchDB('todos');
var remoteCouch = false;
db.info(function(err, info) {
db.changes({
since: info.update_seq,
continuous: true,
onChange: showTodos
});
});
// We have to create a new todo document and enter it in the database
function addTodo(text) {
var todo = {
_id: new Date().toISOString(),
title: text,
completed: false
};
db.put(todo, function callback(err, result) {
if(!err) {
console.log('Successfully posted a todo!');
}
});
}
// Show the current list of todos by reading them from the database
function showTodos() {
db.allDocs({include_docs: true, descending:true}, function(err,doc) {
redrawTodosUI(doc.rows);
});
}
function checkboxChanged(todo, event) {
todo.completed = event.target.checked;
db.put(todo);
}
// User pressed the delete button for a todo, delete it
function deleteButtonPressed(todo) {
db.remove(todo);
}
// The input box when editing a todo has blurred, we should save
// the new title or delete the todo if the title is empty
function todoBlurred(todo, event) {
var trimmedText = event.target.value.trim();
if(!trimmedText) {
db.remove(todo);
} else {
todo.title = trimmedText;
db.put(todo);
}
}
// Initialise a sync with the remote server
function sync() {
}
// EDITING STARTS HERE (you dont need to edit anything below this line)
// There was some form or error syncing
function syncError() {
syncDom.setAttribute('data-sync-state', 'error');
}
// User has double clicked a todo, display an input so they can edit the title
function todoDblClicked(todo) {
var div = document.getElementById('li_' + todo._id);
var inputEditTodo = document.getElementById('input_' + todo._id);
div.className = 'editing';
inputEditTodo.focus();
}
// If they press enter while editing an entry, blur it to trigger save
// (or delete)
function todoKeyPressed(todo, event) {
if (event.keyCode === ENTER_KEY) {
var inputEditTodo = document.getElementById('input_' + todo._id);
inputEditTodo.blur();
}
}
// Given an object representing a todo, this will create a list item
// to display it.
function createTodoListItem(todo) {
var checkbox = document.createElement('input');
checkbox.className = 'toggle';
checkbox.type = 'checkbox';
checkbox.addEventListener('change', checkboxChanged.bind(this, todo));
var label = document.createElement('label');
label.appendChild( document.createTextNode(todo.title));
label.addEventListener('dblclick', todoDblClicked.bind(this, todo));
var deleteLink = document.createElement('button');
deleteLink.className = 'destroy';
deleteLink.addEventListener( 'click', deleteButtonPressed.bind(this, todo));
var divDisplay = document.createElement('div');
divDisplay.className = 'view';
divDisplay.appendChild(checkbox);
divDisplay.appendChild(label);
divDisplay.appendChild(deleteLink);
var inputEditTodo = document.createElement('input');
inputEditTodo.id = 'input_' + todo._id;
inputEditTodo.className = 'edit';
inputEditTodo.value = todo.title;
inputEditTodo.addEventListener('keypress', todoKeyPressed.bind(this, todo));
inputEditTodo.addEventListener('blur', todoBlurred.bind(this, todo));
var li = document.createElement('li');
li.id = 'li_' + todo._id;
li.appendChild(divDisplay);
li.appendChild(inputEditTodo);
if (todo.completed) {
li.className += 'complete';
checkbox.checked = true;
}
return li;
}
function redrawTodosUI(todos) {
var ul = document.getElementById('todo-list');
ul.innerHTML = '';
todos.forEach(function(todo) {
ul.appendChild(createTodoListItem(todo.doc));
});
}
function newTodoKeyPressHandler( event ) {
if (event.keyCode === ENTER_KEY) {
addTodo(newTodoDom.value);
newTodoDom.value = '';
}
}
function addEventListeners() {
newTodoDom.addEventListener('keypress', newTodoKeyPressHandler, false);
}
addEventListeners();
showTodos();
if (remoteCouch) {
sync();
}
})();
Problem :
When i add a todos, after press enter..it doesn't appear anything..
I wonder the local database in my android phone not created yet.
Hope somebody could help me out..any answer would appreciate!
Thanks
https://stackoverflow.com/questions/20541302
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian