我成功创建了一个没有任何问题的待办事项列表。但是,我尝试进一步调整应用程序以显示所有待办事项的表格。
除删除部分外,一切都很好。
我现在有2个jQuery函数来监听delete keypress(一个用于列表,一个用于表):
// ============= Remove todo from the list and Database ============
$('.list').on('click', 'span', function(e){
e.stopPropagation();
removeTodo($(this).parent()); // Remove todo from the list and
Database
})
// ============== Remove todo from the table and Database ==========
$('tbody').on('click', '.btn-danger', function(e){
e.stopPropagation();
table // remove row from table - Start
.row($(this).parents('tr')) // ...
.remove() // ...
.draw() // remove row from table - End
removeOnt($(this).parent()); // Remove from database - HOWEVER, NOT WORKING
})
然后我有删除待办事项的功能:
function removeTodo(todo){
var clickedId = todo.data('id'); // I know the problem with removing the data from the database when I call the function from the table jQuery call, doesn't work
var deleteUrl = '/api/todos/' + clickedId;
$.ajax({
method: 'DELETE',
url: deleteUrl
})
.then(function(data){
todo.remove();
})
.catch(function(err){
console.log(err);
})
}
通过Table调用从数据库中删除条目的功能的问题是因为“ var clickedId = todo.data('id'); ”是“ undefined ”。
来自 todo.data('id')的上述数据('id')被定义为“addTodo(todo){}”函数为< / p>
var newTodo = $('<li class="task">'+todo.name +' <span>X</span></li>');
newTodo.data('id', todo._id);
这是创建表格行的函数的代码:
function addTodoRow(todo){
table.row.add([
todo.name,
todo.created_date,
"<button type='button' class='btn btn-danger'>DELETE</button>"
]).draw();
if(todo.completed){
$('td').addClass('done');
}
}
我的问题是:如何在“ addTodoRow(todo)中定义” newTodo.data('id',todo._id); “的等价物“我们为” addTodo(todo)“做了什么?
感谢任何帮助。
提前致谢。
斯蒂芬
答案 0 :(得分:0)
我检查了你的JS代码,将行添加到数据表中,
function addTodoRow(todo){
// console.log(todo.name)
table.row.add([
todo.name,
todo.created_date,
'High',
'MyName',
"<button type='button' class='btn btn-danger'>DELETE</button>"
]).draw();
if(todo.completed){
$('td').addClass('done');
}
}
以下是我的建议,
- &GT;就像你传递 todo.name,todo.created_date 的值一样。
- &GT;传递您的记录的值是数据库。喜欢 todo.db_record_id
- &GT;并在按钮中更改以下内容,新的JS将为
function addTodoRow(todo){
// console.log(todo.name)
table.row.add([
todo.name,
todo.created_date,
'High',
'MyName',
"<button onclick='removeTodo(+todo.db_record_id+)' type='button' class='btn btn-danger'>DELETE</button>"
]).draw();
if(todo.completed){
$('td').addClass('done');
}
}
- &GT;更新JS函数以删除记录,
function removeTodo(todo_id){
console.log(todo.name);
var deleteUrl = '/api/todos/' + todo_id;
$.ajax({
method: 'DELETE',
url: deleteUrl
})
.then(function(data){
todo.remove();
})
.catch(function(err){
console.log(err);
})
}
尝试以上步骤。希望这会对你有所帮助。
答案 1 :(得分:0)
我找到了一个找到值的工作,并调用delete函数来成功删除行和mongodb记录。
代码调整如下:
function removeTodo2(todo_id){
var deleteUrl = '/api/todos/' + todo_id;
$.ajax({
method: 'DELETE',
url: deleteUrl
})
.then(function(data){
console.log(data)
})
.catch(function(err){
console.log(err);
})
}
&#13;
//Remove todo from the table and Database
$('tbody').on('click', '.btn-danger', function(e){
var test = $(this).parents('tr');
var test2 = test.find('td:eq(2)')[0].innerHTML; // Find the mongodb record ID. Note, for the purpose of this exercise the ID as been added to the row, but would not be done in reality.
e.stopPropagation();
table // remove row from table - Start
.row($(this).parents('tr')) // ...
.remove() // ...
.draw() // remove row from table - End
removeTodo2(test2); // Remove from database - HOWEVER, NOT WORKING
})
&#13;
这符合我的目的,但我不认为这是正确的做法。
感谢所有帮助@Sunil Dora