Я пытаюсь использовать PouchDB с jQuery. Проблема в том, что я не могу использовать метод put внутри своего приложения. js. Он хорошо работает с функцией document.ready, но не работает с другими функциями кода. Я имею в виду, когда страница загружается, она создает новую строку в базе данных, но когда я отправляю форму, она ничего не делает. (Примечание: «prueba» означает «тест» на испанском sh).
Вот мой индекс. html:
<html>
<head>
<title>Prueba PouchDB</title>
<script src="pouchdb.js"></script>
<script src="jquery.js"></script>
<script src="base.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="crearEntrada">
<form method="post">
<input type="text" placeholder="Texto" name="texto" id="texto"
autocapitalize="off" autocorrect="off"
autocomplete="off" />
<input type="submit" class="submit" name="action"
value="Guardar entrada" />
</form>
</div>
<div id="mostrarRegistros">
<button onclick="showTodos()">Mostrar Registros</button>
<ul>
<li id="entryTemplate" class="entry" style="display:none ;text-align: center">
<span class="registro">Registro</span>
</li>
</ul>
</div>
</body>
Вот мое приложение. js:
var db = new PouchDB('prueba');
var remoteCouch = false;
var ENTER_KEY = 13;
var newTodoDom = document.getElementById('new-todo');
var syncDom = document.getElementById('sync-wrapper');
$(document).ready(function(){
$('#crearEntrada form').submit(addTodo);
'use strict';
db.put({
_id:"406",
title:"Example",
completed:false
});
// EDITING STARTS HERE (you dont need to edit anything above this line)
showTodos();
if (remoteCouch) {
sync();
}
});
function addTodo() {
var db = new PouchDB('prueba');
db.put({
_id:"408",
title:"Another example",
completed:false
});
var texto= $('#texto').val();
alert(texto);
var todo = {
_id: new Date().toISOString(),
title: texto,
completed: false
};
alert(JSON.stringify(todo));
alert("Base de datos" + db);
alert(JSON.stringify(db.put(todo)));
db.put(todo).then(function(result){
alert("Everything is A-OK");
alert(result);
}).catch(function (err) {
alert("everything is terrible");
alert(err);
});
alert("termino addTodo");
/*
db.put(todo, function callback(err, result) {
if (!err) {
alert('Successfully posted a todo!');
}
else{
alert('Algo salio mal');
}
});
*/
}
// Show the current list of todos by reading them from the database
function showTodos() {
}
function checkboxChanged(todo, event) {
}
// User pressed the delete button for a todo, delete it
function deleteButtonPressed(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) {
}
// 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));
});
}
Я просто пытаюсь заставить работать функцию addTodo. Остальная часть кода просто копируется из pouchdb-Getting-Start-Todo. Я также поставил много предупреждений для отладки и прокомментировал некоторый код. Большое спасибо! Leandro.