【发布时间】：2020-04-20 21:12:53
【问题描述】：
我正在尝试将 PouchDB 与 jQuery 一起使用。问题是我无法在 app.js 中使用“put”方法。它在 document.ready 函数上运行良好，但它不适用于代码的其他函数。我的意思是，当页面加载时，它会在数据库中创建一个新行，但是当我提交表单时，它什么也不做。 （注意：“prueba”在西班牙语中的意思是“测试”）。
这是我的 index.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>
这是我的 app.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-started-todo 复制粘贴。我还放了很多警报进行调试，并注释了一些代码。 非常感谢！ 莱安德罗。
【问题讨论】：
标签： javascript jquery pouchdb