Delete method is not working for Indexed DB HTML5... It returns success but the record is not deleted

Question

Another problem that I am getting with Indexed DB for HTML5, using Desktop Chrome, is that I can not delete a record from an object store. The onsuccess event is triggered but the record is still there... My ID is a time stamp just because I wanted to achieve a working app faster. I hardcoded it but it still does not work. It is really strange because the onsuccess event is triggered...

The part of the code that "does it" is the following:

try {

        if (localDatabase != null && localDatabase.db != null) 
        {
            var store = localDatabase.db.transaction("patients", "readwrite").objectStore("patients");
            var request = store.delete("1384882073632");

            request.onsuccess = function(event) 
            {


                alert("Patient deleted from DB");
                update_patients_stored();

                aux1.value = "";
                aux2.value = "";
                aux3.value = "";
                aux4.value = "";

            };

            request.onerror = function(event) 
            {
                alert("Error deleting");
            };
        }
    }
    catch(e)
    {
        alert(e);
    }

Thank you in advance!

Nyctaginaceous

The same than happens in my other question: #20078835 – Nyctaginaceous

I have changed the id and it worked but I can see results after refreshing the page. I have a button to update what is in the DB and show it but with this button I can still see the deleted one. – Nyctaginaceous

Answer 1

I've found a similar problem. Non-deleting behaviour but onsuccess event fired. Despite w3 IDBObjectStore.delete specification states key parameter can be of any type, I solved it forcing the parameter conversion to number:

//My version
//I use default autoIncrement for keys
var objectStore = db.createObjectStore(objStoreName,{autoIncrement:true});
//appears to need a number for the key (but retrieved from HTML as string
var request = db.transaction(objStoreName,'readwrite')
                    .objectStore(objStoreName)
                    .delete(Number(parent.id));
    request.onsuccess = function(e) {
        console.log("element deleted"); //sadly this always run :-(
    }

So your line four should be:

var request = store.delete(1384882073632); //integer id
//rather than (WRONG):
//var request = store.delete("1384882073632"); //WRONG! string id

Tried it on:

Chromium -- Version 50.0.2661.94 (64-bit) on Manjaro Linux

Have not tested it on other environments or browsers, but guess that's your problem.

Gaiety

Answer 2

I am sure you are deleting to wrong key. Note that number, string and date are different keys even if they are same if you compare with ==.

IndexedDB return success as long as it does not violate database constraint. In this case not deleting any record. I have propose to return number of deleted record on delete request, but not favored. My library, ydn-db, did it, of course.

Chancelor

No, that's the correct key. I have checked it using the Developer Tools of Chrome... The weird thing is that when I refresh/reload the page, I can see that the record was deleted. It was deleted but I can only see that it was deleted after refreshing the website. – Nyctaginaceous

I got it! The problem was that I need to use the oncomplete event to update the UI... Also, I have a minor problem in my update function. Thank you! – Nyctaginaceous

I solved this issue by converting delete function parameter to number by Number() function. – Japan

Answer 3

Try putting key in an Array.

type IDBValidKey = number | string | Date | BufferSource | IDBArrayKey;

interface IDBArrayKey extends Array<IDBValidKey> {}

Ex.

dbRequest.onsuccess = function (event: any) {
      const db: IDBDatabase = event.target.result;

      const transaction = db.transaction([albumStoreObjName], "readwrite");

      transaction.oncomplete = () => {
        subscriber.next();
        subscriber.complete();
      };

      const objectStore = transaction.objectStore(albumStoreObjName);
      const request = objectStore.delete([albumId]);

      // ...
    };

Limit

wow! i use a guid as a key and your solution work well in my case. Have no idea why... really! – Rifkin

Answer 4

I was having this problem, I solved it by leaving the keypath with autoincrement:

const objectStoreLocation = db.createObjectStore('storeName', 
    { keyPath: 'id', autoIncrement: true });

After I set autoIncrement: true, it resolved.

Cristionna