Linking IndexedDB and JQuery: How to delete a table row by targeting the table data in a selected row?

Question

I'm trying to link my jQuery table with IndexedDB (IDB). Currently, I'm able to add items to the browser UI and to IDB successfully, which generates an identifier key. When the item is pulled from IDB I've stored the identifier key in a hidden column at the furthest right of the table (see screenshot) for each item.

What I want to do is delete the item from the UI and IDB. My code from line 26 of the main.js (bottom-right in screenshot) is successfully deleting the item from the UI, however the code at line 32 isn't deleting the item from IDB as required.

I've run both an alert/console.log for the variable (line 34) which is reporting the correct key identifier has been stored in the variable, but seems to be functioning unusually in that it is reporting it multiple times based on which row is selected in the table (i.e. if I delete "exercise" it reports 36 on three separate alerts?). The variable is then not correctly deleted. However, if I run line 35 and pass the literal key identifier into it (i.e. "36") instead of a variable, the item is deleted.

Any suggestions would be really welcome, thank you!

Screenshot[1]

Table and code https://i.stack.imgur.com/Etb2S.png

Full code available here (please note I've included all separate files on the JS page) https://codepen.io/QuiveringCoward/pen/gOMqpRv



    
        
        
        jQuery Add / Remove Table Rows
        
        
        
        
        
        
        
        
    

    
     Simplicity | Simplify Your Life 
    
        
        Task
        
        
        Description        
        
        
        Due Date        
        
        
        Time        
        

        Frequency        
        
        
        Location        
        
        
        Priority        
        
        
        

        

            
        
        

        

        Search Table
        

    
    Todo List
    
        
         
            
                Select
                Task
                Description
                Due Date ↕
                Time
                Frequency
                Location
                Priority ↕

//*************** OTHER PAGES STORED LOCALLY **************//

// AddItem.js
$("#todo-list").submit(function(event){

    event.preventDefault();

    setDatabaseName("Luke's Todo List", ["UsersObjectStore", "ItemsObjectStore"]);

    setCurrObjectStoreName("ItemsObjectStore");

    startDB(function () {
        saveItemData();
        alert("Item has been saved successfully!");
    })
})

// AddItemDAO.js

function saveItemData() {


    var data = {

    };

    insertOne(data, function(lastID){
        event.preventDefault();
        return false;
    });

}

// ListItems.js
setDatabaseName("Luke's Todo List", ["UsersObjectStore", "ItemsObjectStore"]);
setCurrObjectStoreName("ItemsObjectStore");
startDB(function() {
    showAllItems();
});

//ListItemsDAO.js
function showAllItems() {
    selectAll(function(results) {
        var len = results.length, i;

        for(i = 0; i < len; i++) {
            $("#todo-table").append(
                '\
                     \
                    ' + results[i].task + '\
                    ' + results[i].description + '\
                    ' + results[i].date + '\
                    ' + results[i].time + '\
                    ' + results[i].frequency + '\
                    ' + results[i].location + '\
                    ' + results[i].priority + '\
                    ' + results[i].id + '\
                 '
            )
        }
    });
}

// Indexed DB library wrapper

    //This is an indexeddb wrapper javascript library
    
    //Global variables
    var db, indexedDB, IDBTransaction, currObjectStoreName, databaseName, objectStores;
    
    //startDB creates connection with the databaseName
    //and create database and object stores
    function startDB(successCallback, failureCallback) {
        try {
            indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
            IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
            IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
        }
        catch(e) {
            console.log('Initial IndexedDB error: ' + e);
            failureCallback();
        }
        
        if(!window.indexedDB) {
            failureCallback();
            return;
        }

        var request = indexedDB.open(databaseName, 1);
            
        //The onupgradeneeded property is triggered when a database 
        //of a bigger version number than the existing stored database is loaded.
        request.onupgradeneeded = function(event) {
            console.log('onupgradeneeded method is invoked');
            db = event.target.result;
            for(i=0; i < objectStores.length; i++) {
                db.createObjectStore(objectStores[i], { keyPath: 'id', autoIncrement: true });
            }
        };

        request.onsuccess = function(event) {
            db = event.target.result;
            successCallback && successCallback();
        };

        request.onerror = function(event) {
            console.log('User don\'t allow IndexedDB to use offline storage.');
            failureCallback();
        };
    }

    //Just print any indexeddb related error message in console window
    function indexedDBError(event) {
        console.log('An error occurred in IndexedDB', event);
    }
    
    //setDatabaseName sets the Database name and Object Stores required for a website
    function setDatabaseName(dbName, objStores) {
        databaseName = dbName;
        objectStores = objStores;
        console.log('Database : ', dbName);
    }
    
    //setCurrObjectStoreName set the current object store to store or retrieve data
    function setCurrObjectStoreName(objStoreName) {
        currObjectStoreName = objStoreName;
        console.log('Current Object Store Name : ', currObjectStoreName);
    }

    //selectAll retrieves all data from the current object store
    function selectAll(successCallback) {
        var transaction = db.transaction([currObjectStoreName], IDBTransaction.READ_ONLY || 'readonly'),
            objectStore, request, results = [];
            
        transaction.onerror = indexedDBError;
        objectStore = transaction.objectStore(currObjectStoreName);
        request = objectStore.openCursor();

        request.onerror = indexedDBError;
        request.onsuccess = function(event) {
            // event.target means request
            var cursor = event.target.result;
            if(!cursor) {
                if(successCallback) {
                    successCallback(results);
                }
                return;
            }
            results.push(cursor.value);
            cursor.continue();
        };
    }
    
    //insertOne inserts data into the current object store
    //This function also creates unique id for each data
    function insertOne(data, successCallback) {
        var transaction = db.transaction([currObjectStoreName], IDBTransaction.READ_WRITE || 'readwrite'),
            objectStore, request, lastID;
        
        objectStore = transaction.objectStore(currObjectStoreName);
        request = objectStore.add(data);
        request.onsuccess = function(event) {
            lastID = event.target.result;
        }
        request.onerror = indexedDBError;
        
        transaction.onerror = indexedDBError;

        transaction.oncomplete = function(event) {
            console.log('Data was inserted succesfully');
            if(successCallback) {
                successCallback(lastID);
            }
        };
    }
    
    //deleteOne inserts data into the current object store
    function deleteOne(id, successCallback) {
        var transaction = db.transaction([currObjectStoreName], IDBTransaction.READ_WRITE || 'readwrite'),
            objectStore, request;
            
        objectStore = transaction.objectStore(currObjectStoreName);
        request = objectStore.delete(id);
        request.onerror = indexedDBError;
        request.onsuccess = function(event) {
            var result = event.target.result;
        };
        transaction.onerror = indexedDBError;
        transaction.oncomplete = function() {
            console.log('Data with ' + id + ' was deleted successfully');
            if(successCallback) {
                successCallback();
            }
        };
    }
    
    //updateOne updates a specific data in the current object store
    function updateOne(data, successCallback) {
        var transaction = db.transaction([currObjectStoreName], IDBTransaction.READ_WRITE || 'readwrite'),
            objectStore, request, lastID;
        
        objectStore = transaction.objectStore(currObjectStoreName);
        request = objectStore.put(data);
        request.onsuccess = function(event) {
            lastID = event.target.result;
        }
        request.onerror = indexedDBError;
        
        transaction.onerror = indexedDBError;

        transaction.oncomplete = function(event) {
            console.log('Data with ' + lastID + ' was deleted successfully');
            if(successCallback) {
                successCallback(lastID);
            }
        };
    }
    
    //selectOne select just one data
    function selectOne(id, successCallback) {
        var transaction = db.transaction([currObjectStoreName], IDBTransaction.READ_ONLY || 'readonly'),
            objectStore, request;
            
        transaction.onerror = indexedDBError;
        objectStore = transaction.objectStore(currObjectStoreName);
        request = objectStore.get(parseInt(id));

        request.onerror = indexedDBError;
        request.onsuccess = function(event) {
            // event.target means request
            
            var record = request.result;
            
            if(record) {
                
                if(successCallback) {
                    
                    successCallback(record);
                }
                return;
            }
        };
    }

user_13434851 · Answer

I discovered that there's also a function that you can call to delete the data from IndexedDB, it's called deleteOne() and all you have to do is find the key of the data that needed to be deleted. I solved it with this code

$("table tbody").find('input[name="record"]:checked').each(function() {
     deleteOne(parseInt($(this).closest('tr')[0].id))
});

Linking IndexedDB and JQuery: How to delete a table row by targeting the table data in a selected row?

1 Answers