Stack Overflow Asked by SourOddity on December 18, 2020
This snippet from my code uses a function to take the data from my indexedDB Database and append it to a table.
The next thing I need to do is to add a button to delete a task from the list and database which I want to do by having a button at the end of each row of tasks which can select the task by ID and remove it from the database which should be reflected by the table.
const db = new Database();
document.addEventListener("DOMContentLoaded", function(event) {
setTimeout(function() {
db.getAllTodos(function(records) {
records.forEach(function() {
console.log(records.length)
var cols = ['taskName','taskDesc', 'taskDate','taskTime','taskPriority','taskLocation','taskImage']
for (var i = 0; i <= records.length; i++){
$('table').append('<tr></tr>' );
for (var j = 0; j < cols.length; j++) {
$('table tr:last-child').append ('<td>' + records[i][cols[j]] + '</td>' );
}
}
})
});
}, 1000);
});
Below are some images of my web page and database for reference:
https://imgur.com/a/5h6qMMJ
I was thinking of doing this by adding the button as data into the database but it always appeared as null or undefined when I tried to put it in.
Answer for adding button is above, gonna close this one as question is moving off topic.
Answered by SourOddity on December 18, 2020
Hi SourOddity,
Perhaps adding the button HTML tag just before the last TD or even better in a separated TD inside the same TR would be the trick for this case. You can then use the button ID to invoke the click event on it in order to run your delete function. I certainly hope this helps!
$('table tr:last-child').append ('<td>' + records[i][cols[j]] + '</td>' + "</td><button id='delbtn' type='button'>Delete</button></td>");
I have made some edits to the code, and now it looks like this:
const db = new Database();
document.addEventListener("DOMContentLoaded", function(event) {
setTimeout(function() {
db.getAllTodos(function(records) {
records.forEach(function() {
console.log(records.length);
var cols = ['taskName','taskDesc', 'taskDate','taskTime','taskPriority','taskLocation','taskImage'];
for (var i = 0; i <= records.length; i++){
$('table').append('<tr></tr>' );
for (var j = 0; j < cols.length; j++) {
var lastCell = $('table tr:last-child');
lastCell.append ('<td>' + records[i][cols[j]] + '</td>' );
}
lastCell.append("<td class="delete"><button onclick="deleteTask()">Delete</button></td>");
}
})
});
}, 1000);
});
function deleteTask() {
console.log("working");
}
This solution works to add the buttons, however I now get this error:
The lines of code mentioned but not visible from database.js
async getAllTodos(callback) {
let store = this.database.transaction(["taskList"], "readonly").objectStore("taskList");
let allRecords = store.getAll();
allRecords.onsuccess = () => callback(allRecords.result);
}
Answered by Alvison Hunter on December 18, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP